@vkontakte/vkui 7.3.8 → 7.4.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n  /**\n   * Управляет видимостью иконки шеврона `›`.\n   *\n   * - `auto` - добавляет шеврон справа только для платформы `ios`;\n   * - `always` - всегда показывает шеврон.\n   */\n  chevron?: 'auto' | 'always';\n  /**\n   * Размер chevron.\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста.\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  chevron,\n  multiline,\n  overTitle,\n  subtitle,\n  extraSubtitle,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const hasChevron = chevron === 'always' || (chevron === 'auto' && platform === 'ios');\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        restProps.disabled && styles.disabled,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        multiline && styles.mult,\n      )}\n    >\n      <div className={classNames(styles.before, platform === 'ios' && styles.beforeIos)}>\n        {before}\n      </div>\n      <div className={styles.middle}>\n        {overTitle && (\n          <Subhead Component=\"span\" className={classNames(styles.text, styles.overTitle)}>\n            {overTitle}\n          </Subhead>\n        )}\n        <div className={styles.content}>\n          {badgeBeforeTitle && <span className={styles.badge}>{badgeBeforeTitle}</span>}\n          <Headline Component=\"span\" className={styles.children} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && <span className={styles.badge}>{badgeAfterTitle}</span>}\n        </div>\n        {subtitle && (\n          <div className={styles.content}>\n            {badgeBeforeSubtitle && <span className={styles.badge}>{badgeBeforeSubtitle}</span>}\n            <Footnote normalize={false} className={classNames(styles.text, styles.subtitle)}>\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && <span className={styles.badge}>{badgeAfterSubtitle}</span>}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote className={classNames(styles.text, styles.extraSubtitle)}>\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles.indicator}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles.after, 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && <Chevron size={chevronSize} className={styles.chevronIcon} />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Tappable","Footnote","Headline","Subhead","Chevron","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","chevron","multiline","overTitle","subtitle","extraSubtitle","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","baseClassName","host","disabled","mult","div","className","beforeIos","middle","Component","text","content","span","badge","weight","normalize","size","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,uBAAoB;AAC5C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAkEA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,cAAc,GAAG,EACjB,GAAGC,WACa;IAChB,MAAMC,WAAW5B;IAEjB,MAAM6B,aAAaR,YAAY,YAAaA,YAAY,UAAUO,aAAa;IAE/E,MAAME,WAAWhC,aAAasB,UAAUS;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGhC;IAE3B,qBACE,MAACE;QACE,GAAG0B,SAAS;QACbK,eAAenC,WACbS,OAAO2B,IAAI,EACXN,UAAUO,QAAQ,IAAI5B,OAAO4B,QAAQ,EACrCH,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CT,aAAahB,OAAO6B,IAAI;;0BAG1B,KAACC;gBAAIC,WAAWxC,WAAWS,OAAOW,MAAM,EAAEW,aAAa,SAAStB,OAAOgC,SAAS;0BAC7ErB;;0BAEH,MAACmB;gBAAIC,WAAW/B,OAAOiC,MAAM;;oBAC1BhB,2BACC,KAACnB;wBAAQoC,WAAU;wBAAOH,WAAWxC,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOiB,SAAS;kCAC1EA;;kCAGL,MAACa;wBAAIC,WAAW/B,OAAOoC,OAAO;;4BAC3B7B,kCAAoB,KAAC8B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG/B;;0CACrD,KAACV;gCAASqC,WAAU;gCAAOH,WAAW/B,OAAOa,QAAQ;gCAAE0B,QAAO;0CAC3D1B;;4BAEFrB,aAAagB,kCAAoB,KAAC6B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG9B;;;;oBAEnEU,0BACC,MAACY;wBAAIC,WAAW/B,OAAOoC,OAAO;;4BAC3B3B,qCAAuB,KAAC4B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG7B;;0CACxD,KAACb;gCAAS4C,WAAW;gCAAOT,WAAWxC,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOkB,QAAQ;0CAC3EA;;4BAEFR,oCAAsB,KAAC2B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG5B;;;;oBAG1DS,+BACC,KAACvB;wBAASmC,WAAWxC,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOmB,aAAa;kCAC9DA;;;;YAIN3B,aAAaoB,4BACZ,KAACf;gBAASqC,WAAU;gBAAOK,QAAO;gBAAIR,WAAW/B,OAAOY,SAAS;0BAC9DA;;YAGJY,0BACC,MAACM;gBAAIC,WAAWxC,WAAWS,OAAOc,KAAK,EAAE;;oBACtCA;oBACAS,4BAAc,KAACxB;wBAAQ0C,MAAMrB;wBAAaW,WAAW/B,OAAO0C,WAAW;;;;;;AAKlF,EAAE"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasComponent } from '../../types';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n  /**\n   * Управляет видимостью иконки шеврона `›`.\n   *\n   * - `auto` - добавляет шеврон справа только для платформы `ios`;\n   * - `always` - всегда показывает шеврон.\n   */\n  chevron?: 'auto' | 'always';\n  /**\n   * Размер chevron.\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста.\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableOmitProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  chevron,\n  multiline,\n  overTitle,\n  subtitle,\n  extraSubtitle,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const hasChevron = chevron === 'always' || (chevron === 'auto' && platform === 'ios');\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        restProps.disabled && styles.disabled,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        multiline && styles.mult,\n      )}\n    >\n      <div className={classNames(styles.before, platform === 'ios' && styles.beforeIos)}>\n        {before}\n      </div>\n      <div className={styles.middle}>\n        {overTitle && (\n          <Subhead Component=\"span\" className={classNames(styles.text, styles.overTitle)}>\n            {overTitle}\n          </Subhead>\n        )}\n        <div className={styles.content}>\n          {badgeBeforeTitle && <span className={styles.badge}>{badgeBeforeTitle}</span>}\n          <Headline Component=\"span\" className={styles.children} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && <span className={styles.badge}>{badgeAfterTitle}</span>}\n        </div>\n        {subtitle && (\n          <div className={styles.content}>\n            {badgeBeforeSubtitle && <span className={styles.badge}>{badgeBeforeSubtitle}</span>}\n            <Footnote normalize={false} className={classNames(styles.text, styles.subtitle)}>\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && <span className={styles.badge}>{badgeAfterSubtitle}</span>}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote className={classNames(styles.text, styles.extraSubtitle)}>\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles.indicator}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles.after, 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && <Chevron size={chevronSize} className={styles.chevronIcon} />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Tappable","Footnote","Headline","Subhead","Chevron","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","chevron","multiline","overTitle","subtitle","extraSubtitle","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","baseClassName","host","disabled","mult","div","className","beforeIos","middle","Component","text","content","span","badge","weight","normalize","size","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,uBAAoB;AAC5C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAkEA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,cAAc,GAAG,EACjB,GAAGC,WACa;IAChB,MAAMC,WAAW5B;IAEjB,MAAM6B,aAAaR,YAAY,YAAaA,YAAY,UAAUO,aAAa;IAE/E,MAAME,WAAWhC,aAAasB,UAAUS;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGhC;IAE3B,qBACE,MAACE;QACE,GAAG0B,SAAS;QACbK,eAAenC,WACbS,OAAO2B,IAAI,EACXN,UAAUO,QAAQ,IAAI5B,OAAO4B,QAAQ,EACrCH,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CT,aAAahB,OAAO6B,IAAI;;0BAG1B,KAACC;gBAAIC,WAAWxC,WAAWS,OAAOW,MAAM,EAAEW,aAAa,SAAStB,OAAOgC,SAAS;0BAC7ErB;;0BAEH,MAACmB;gBAAIC,WAAW/B,OAAOiC,MAAM;;oBAC1BhB,2BACC,KAACnB;wBAAQoC,WAAU;wBAAOH,WAAWxC,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOiB,SAAS;kCAC1EA;;kCAGL,MAACa;wBAAIC,WAAW/B,OAAOoC,OAAO;;4BAC3B7B,kCAAoB,KAAC8B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG/B;;0CACrD,KAACV;gCAASqC,WAAU;gCAAOH,WAAW/B,OAAOa,QAAQ;gCAAE0B,QAAO;0CAC3D1B;;4BAEFrB,aAAagB,kCAAoB,KAAC6B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG9B;;;;oBAEnEU,0BACC,MAACY;wBAAIC,WAAW/B,OAAOoC,OAAO;;4BAC3B3B,qCAAuB,KAAC4B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG7B;;0CACxD,KAACb;gCAAS4C,WAAW;gCAAOT,WAAWxC,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOkB,QAAQ;0CAC3EA;;4BAEFR,oCAAsB,KAAC2B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG5B;;;;oBAG1DS,+BACC,KAACvB;wBAASmC,WAAWxC,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOmB,aAAa;kCAC9DA;;;;YAIN3B,aAAaoB,4BACZ,KAACf;gBAASqC,WAAU;gBAAOK,QAAO;gBAAIR,WAAW/B,OAAOY,SAAS;0BAC9DA;;YAGJY,0BACC,MAACM;gBAAIC,WAAWxC,WAAWS,OAAOc,KAAK,EAAE;;oBACtCA;oBACAS,4BAAc,KAACxB;wBAAQ0C,MAAMrB;wBAAaW,WAAW/B,OAAO0C,WAAW;;;;;;AAKlF,EAAE"}

package/dist/cssm/components/Skeleton/Skeleton.js

@@ -3,12 +3,15 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { millisecondsInSecond } from "date-fns/constants";
+import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useResizeObserver } from "../../hooks/useResizeObserver.js";
 import { useStateWithPrev } from "../../hooks/useStateWithPrev.js";
 import { useDOM } from "../../lib/dom.js";
+import { animationVisibilityDelayStyles } from "../../styles/animationVisibilityDelay.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./Skeleton.module.css";
+import stylesDelay from "../../styles/animationVisibilityDelay.module.css";
 const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
 /**
  * Синхронизирует анимацию скелетонов с помощью временных отрезков.
@@ -89,7 +92,7 @@ const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
  * > вписывается в слоты компонентов, которые обычно ожидают текст.
  *
  * @since 6.1.0
- */ export const Skeleton = ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, children, colorFrom, colorTo, noAnimation = false, duration, margin, getRootRef, ...restProps })=>{
+ */ export const Skeleton = ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, children, colorFrom, colorTo, noAnimation = false, duration, margin, getRootRef, visibilityDelay, ...restProps })=>{
     const rootRef = useExternRef(getRootRef);
     const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);
     const skeletonGradientLeft = useSkeletonPosition(rootRef);
@@ -116,8 +119,8 @@ const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
     return /*#__PURE__*/ _jsx(RootComponent, {
         getRootRef: rootRef,
         Component: "span",
-        baseClassName: classNames(styles.host, disableAnimation && styles.disableAnimation),
-        baseStyle: skeletonStyle,
+        baseClassName: classNames(styles.host, disableAnimation && styles.disableAnimation, visibilityDelay && stylesDelay.visibilityDelay),
+        baseStyle: mergeStyle(skeletonStyle, animationVisibilityDelayStyles(visibilityDelay)),
         ...restProps,
         children: children || /*#__PURE__*/ _jsx(_Fragment, {
             children: "‌"

package/dist/cssm/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { millisecondsInSecond } from 'date-fns/constants';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков.\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`.\n *\n * Смотри https://developer.chrome.com/blog/page-lifecycle-api/.\n *\n * @param duration Длительность анимации в секундах.\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона.\n */\nfunction useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n    useStateWithPrev('0');\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el || !document) {\n      return;\n    }\n\n    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useResizeObserver(window, updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации.\n   */\n  colorFrom?: string;\n\n  /**\n   * Финальный цвет анимации.\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет.\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах.\n   */\n  duration?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(styles.host, disableAnimation && styles.disableAnimation)}\n      baseStyle={skeletonStyle}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useResizeObserver","useStateWithPrev","useDOM","RootComponent","styles","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host","baseStyle"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { millisecondsInSecond } from 'date-fns/constants';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { useDOM } from '../../lib/dom';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков.\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`.\n *\n * Смотри https://developer.chrome.com/blog/page-lifecycle-api/.\n *\n * @param duration Длительность анимации в секундах.\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона.\n */\nfunction useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n    useStateWithPrev('0');\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el || !document) {\n      return;\n    }\n\n    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useResizeObserver(window, updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации.\n   */\n  colorFrom?: string;\n\n  /**\n   * Финальный цвет анимации.\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет.\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах.\n   */\n  duration?: number;\n\n  /**\n   * Задерживает отрисовку элемента на заданное количество миллисекунд.\n   */\n  visibilityDelay?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  visibilityDelay,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(\n        styles.host,\n        disableAnimation && styles.disableAnimation,\n        visibilityDelay && stylesDelay.visibilityDelay,\n      )}\n      baseStyle={mergeStyle(skeletonStyle, animationVisibilityDelayStyles(visibilityDelay))}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","mergeStyle","useExternRef","useResizeObserver","useStateWithPrev","useDOM","animationVisibilityDelayStyles","RootComponent","styles","stylesDelay","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","visibilityDelay","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host","baseStyle"],"mappings":"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"}

package/dist/cssm/components/Spinner/Spinner.js

@@ -2,11 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
+import { animationVisibilityDelayStyles } from "../../styles/animationVisibilityDelay.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { SpinnerAnimation } from "./SpinnerAnimation.js";
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from "./icons.js";
 import styles from "./Spinner.module.css";
+import stylesDelay from "../../styles/animationVisibilityDelay.module.css";
 const spinnerIconMap = {
     s: Icon16Spinner,
     m: Icon24Spinner,
@@ -16,13 +18,14 @@ const spinnerIconMap = {
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */ // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames
-export const Spinner = /*#__PURE__*/ React.memo(({ size = 'm', children = 'Загружается...', disableAnimation = false, noColor = false, ...restProps })=>{
+export const Spinner = /*#__PURE__*/ React.memo(({ size = 'm', children = 'Загружается...', disableAnimation = false, noColor = false, visibilityDelay, ...restProps })=>{
     const SpinnerIcon = spinnerIconMap[size];
     return /*#__PURE__*/ _jsxs(RootComponent, {
         Component: "span",
         role: "status",
         ...restProps,
-        baseClassName: classNames(styles.host, noColor && styles.noColor),
+        baseClassName: classNames(styles.host, noColor && styles.noColor, visibilityDelay && stylesDelay.visibilityDelay),
+        baseStyle: animationVisibilityDelayStyles(visibilityDelay),
         children: [
             /*#__PURE__*/ _jsx(SpinnerIcon, {
                 children: disableAnimation ? null : /*#__PURE__*/ _jsx(SpinnerAnimation, {

package/dist/cssm/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { SpinnerAnimation } from './SpinnerAnimation';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from './icons';\nimport styles from './Spinner.module.css';\n\nconst spinnerIconMap = {\n  s: Icon16Spinner,\n  m: Icon24Spinner,\n  l: Icon32Spinner,\n  xl: Icon44Spinner,\n};\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  /**\n   * Размер спиннера.\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /**\n   * Отключение анимации.\n   */\n  disableAnimation?: boolean;\n  /**\n   * Задать цвет можно будет через свойство color родителя.\n   */\n  noColor?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\n// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\nexport const Spinner = React.memo(\n  ({\n    size = 'm',\n    children = 'Загружается...',\n    disableAnimation = false,\n    noColor = false,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = spinnerIconMap[size];\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={classNames(styles.host, noColor && styles.noColor)}\n      >\n        <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(Spinner, 'Spinner');\n}\n"],"names":["React","classNames","hasReactNode","defineComponentDisplayNames","RootComponent","VisuallyHidden","SpinnerAnimation","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","styles","spinnerIconMap","s","m","l","xl","Spinner","memo","size","children","disableAnimation","noColor","restProps","SpinnerIcon","Component","role","baseClassName","host","process","env","NODE_ENV"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,aAAU;AACrF,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,GAAGN;IACHO,GAAGN;IACHO,GAAGN;IACHO,IAAIN;AACN;AAiBA;;CAEC,GACD,0FAA0F;AAC1F,OAAO,MAAMO,wBAAUjB,MAAMkB,IAAI,CAC/B,CAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACf,GAAGC,WACU;IACb,MAAMC,cAAcZ,cAAc,CAACO,KAAK;IAExC,qBACE,MAACf;QACCqB,WAAU;QACVC,MAAK;QACJ,GAAGH,SAAS;QACbI,eAAe1B,WAAWU,OAAOiB,IAAI,EAAEN,WAAWX,OAAOW,OAAO;;0BAEhE,KAACE;0BAAaH,mBAAmB,qBAAO,KAACf;oBAAiBa,MAAMA;;;YAC/DjB,aAAakB,2BAAa,KAACf;0BAAgBe;;;;AAGlD,GACA;AAEF,IAAIS,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC5B,4BAA4Bc,SAAS;AACvC"}
+{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { SpinnerAnimation } from './SpinnerAnimation';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from './icons';\nimport styles from './Spinner.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst spinnerIconMap = {\n  s: Icon16Spinner,\n  m: Icon24Spinner,\n  l: Icon32Spinner,\n  xl: Icon44Spinner,\n};\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  /**\n   * Размер спиннера.\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /**\n   * Отключение анимации.\n   */\n  disableAnimation?: boolean;\n  /**\n   * Задать цвет можно будет через свойство color родителя.\n   */\n  noColor?: boolean;\n  /**\n   * Задерживает отрисовку элемента на заданное количество миллисекунд.\n   */\n  visibilityDelay?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\n// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\nexport const Spinner = React.memo(\n  ({\n    size = 'm',\n    children = 'Загружается...',\n    disableAnimation = false,\n    noColor = false,\n    visibilityDelay,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = spinnerIconMap[size];\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={classNames(\n          styles.host,\n          noColor && styles.noColor,\n          visibilityDelay && stylesDelay.visibilityDelay,\n        )}\n        baseStyle={animationVisibilityDelayStyles(visibilityDelay)}\n      >\n        <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(Spinner, 'Spinner');\n}\n"],"names":["React","classNames","hasReactNode","defineComponentDisplayNames","animationVisibilityDelayStyles","RootComponent","VisuallyHidden","SpinnerAnimation","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","styles","stylesDelay","spinnerIconMap","s","m","l","xl","Spinner","memo","size","children","disableAnimation","noColor","visibilityDelay","restProps","SpinnerIcon","Component","role","baseClassName","host","baseStyle","process","env","NODE_ENV"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,8BAA8B,QAAQ,2CAAwC;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,aAAU;AACrF,OAAOC,YAAY,uBAAuB;AAC1C,OAAOC,iBAAiB,mDAAmD;AAE3E,MAAMC,iBAAiB;IACrBC,GAAGP;IACHQ,GAAGP;IACHQ,GAAGP;IACHQ,IAAIP;AACN;AAqBA;;CAEC,GACD,0FAA0F;AAC1F,OAAO,MAAMQ,wBAAUnB,MAAMoB,IAAI,CAC/B,CAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACfC,eAAe,EACf,GAAGC,WACU;IACb,MAAMC,cAAcb,cAAc,CAACO,KAAK;IAExC,qBACE,MAAChB;QACCuB,WAAU;QACVC,MAAK;QACJ,GAAGH,SAAS;QACbI,eAAe7B,WACbW,OAAOmB,IAAI,EACXP,WAAWZ,OAAOY,OAAO,EACzBC,mBAAmBZ,YAAYY,eAAe;QAEhDO,WAAW5B,+BAA+BqB;;0BAE1C,KAACE;0BAAaJ,mBAAmB,qBAAO,KAAChB;oBAAiBc,MAAMA;;;YAC/DnB,aAAaoB,2BAAa,KAAChB;0BAAgBgB;;;;AAGlD,GACA;AAEF,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzChC,4BAA4BgB,SAAS;AACvC"}

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  /**\n   * Стиль отображения кнопки.\n   */\n  mode?: 'primary' | 'outline' | 'tertiary';\n  /**\n   * Тип внешнего вида кнопки.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Размер кнопки.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Выбранное состояние.\n   */\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`.\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24.\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Нужно ли отображать иконку `\"chevron\"`.\n   */\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles.disabled,\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","host","disabled","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AA4CA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAG1C;IAE3B,qBACE,KAACC;QACC0C,WAAW;QACXC,kBAAiB;QAChB,GAAGb,SAAS;QACbc,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CX,UAAUgB,QAAQ,IAAI3C,OAAO2C,QAAQ;kBAGvC,cAAA,MAACC;YAAKC,WAAW7C,OAAO8C,EAAE;;gBACvBZ,wBAAU,KAACU;oBAAKC,WAAW7C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXmB,WAAW7C,OAAO+C,KAAK;oBACvBC,WAAU;8BAETX;;gBAEFF,uBAAS,KAACS;oBAAKC,WAAW7C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAemD,WAAW7C,OAAOiD,WAAW;;;;;AAIjE,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableOmitProps, 'size'> {\n  /**\n   * Стиль отображения кнопки.\n   */\n  mode?: 'primary' | 'outline' | 'tertiary';\n  /**\n   * Тип внешнего вида кнопки.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Размер кнопки.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Выбранное состояние.\n   */\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`.\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24.\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Нужно ли отображать иконку `\"chevron\"`.\n   */\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles.disabled,\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","host","disabled","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AA4CA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAG1C;IAE3B,qBACE,KAACC;QACC0C,WAAW;QACXC,kBAAiB;QAChB,GAAGb,SAAS;QACbc,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CX,UAAUgB,QAAQ,IAAI3C,OAAO2C,QAAQ;kBAGvC,cAAA,MAACC;YAAKC,WAAW7C,OAAO8C,EAAE;;gBACvBZ,wBAAU,KAACU;oBAAKC,WAAW7C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXmB,WAAW7C,OAAO+C,KAAK;oBACvBC,WAAU;8BAETX;;gBAEFF,uBAAS,KAACS;oBAAKC,WAAW7C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAemD,WAAW7C,OAAOiD,WAAW;;;;;AAIjE,EAAE"}

package/dist/cssm/components/Tabs/Tabs.js

@@ -6,17 +6,17 @@ import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useTabsNavigation } from "../../hooks/useTabsNavigation.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
+import { useTabsController } from "./TabsController.js";
+import { TabsModeContext } from "./TabsModeContext.js";
 import styles from "./Tabs.module.css";
-/* eslint-enable jsdoc/require-jsdoc */ export const TabsModeContext = /*#__PURE__*/ React.createContext({
-    mode: 'default',
-    withGaps: false,
-    layoutFillMode: 'auto',
-    withScrollToSelectedTab: false,
-    scrollBehaviorToSelectedTab: 'nearest'
-});
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
- */ export const Tabs = ({ children, mode = 'default', role = 'tablist', withScrollToSelectedTab, scrollBehaviorToSelectedTab = 'nearest', layoutFillMode = 'auto', ...restProps })=>{
+ */ export const Tabs = ({ children, mode = 'default', role = 'tablist', withScrollToSelectedTab, scrollBehaviorToSelectedTab = 'nearest', layoutFillMode = 'auto', selectedId, defaultSelectedId, onSelectedIdChange, ...restProps })=>{
+    const controller = useTabsController({
+        selectedId,
+        defaultSelectedId,
+        onSelectedIdChange
+    });
     const platform = usePlatform();
     const direction = useConfigDirection();
     const isTabFlow = role === 'tablist';
@@ -35,7 +35,8 @@ import styles from "./Tabs.module.css";
                     withGaps,
                     layoutFillMode,
                     withScrollToSelectedTab,
-                    scrollBehaviorToSelectedTab
+                    scrollBehaviorToSelectedTab,
+                    controller
                 },
                 children: children
             })

package/dist/cssm/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки.\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно.\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","direction","isTabFlow","tabsRef","baseClassName","host","modeDefault","div","className","in","ref","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAoCvC,qCAAqC,GAErC,OAAO,MAAMC,gCACXP,MAAMQ,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B,GAAG;AAEL;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRN,OAAO,SAAS,EAChBO,OAAO,SAAS,EAChBJ,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCF,iBAAiB,MAAM,EACvB,GAAGM,WACO;IACV,MAAMC,WAAWf;IACjB,MAAMgB,YAAYjB;IAClB,MAAMkB,YAAYJ,SAAS;IAC3B,MAAMN,WAAWD,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEY,OAAO,EAAE,GAAGjB,kBAAkBgB,WAAWD,cAAc;IAE/D,qBACE,KAACd;QACE,GAAGY,SAAS;QACbK,eAAerB,WACbK,OAAOiB,IAAI,EACX,oBACAL,aAAa,WAAW,2BACxBR,YAAYT,WAAWK,OAAOI,QAAQ,EAAE,+BACxCD,SAAS,aAAaH,OAAOkB,WAAW;QAE1CR,MAAMA;kBAEN,cAAA,KAACS;YAAIC,WAAWpB,OAAOqB,EAAE;YAAEC,KAAKP;sBAC9B,cAAA,KAACd,gBAAgBsB,QAAQ;gBACvBC,OAAO;oBACLrB;oBACAC;oBACAC;oBACAC;oBACAC;gBACF;0BAECE;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { useTabsController } from './TabsController';\nimport { TabsModeContext } from './TabsModeContext';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки.\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно.\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n  /**\n   * Идентификатор выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  selectedId?: string;\n  /**\n   * Идентификатор выбранной вкладки по умолчанию. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  defaultSelectedId?: string;\n  /**\n   * Обработчик изменения выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.\n   */\n  onSelectedIdChange?: (id: string) => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  selectedId,\n  defaultSelectedId,\n  onSelectedIdChange,\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const controller = useTabsController({\n    selectedId,\n    defaultSelectedId,\n    onSelectedIdChange,\n  });\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n            controller,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","useTabsController","TabsModeContext","styles","Tabs","children","mode","role","withScrollToSelectedTab","scrollBehaviorToSelectedTab","layoutFillMode","selectedId","defaultSelectedId","onSelectedIdChange","restProps","controller","platform","direction","isTabFlow","withGaps","tabsRef","baseClassName","host","modeDefault","div","className","in","ref","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,iBAAiB,QAAQ,sBAAmB;AACrD,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,oBAAoB;AAwCvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRC,OAAO,SAAS,EAChBC,OAAO,SAAS,EAChBC,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCC,iBAAiB,MAAM,EACvBC,UAAU,EACVC,iBAAiB,EACjBC,kBAAkB,EAClB,GAAGC,WACO;IACV,MAAMC,aAAad,kBAAkB;QACnCU;QACAC;QACAC;IACF;IACA,MAAMG,WAAWlB;IACjB,MAAMmB,YAAYpB;IAClB,MAAMqB,YAAYX,SAAS;IAC3B,MAAMY,WAAWb,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEc,OAAO,EAAE,GAAGrB,kBAAkBmB,WAAWD,cAAc;IAE/D,qBACE,KAACjB;QACE,GAAGc,SAAS;QACbO,eAAezB,WACbO,OAAOmB,IAAI,EACX,oBACAN,aAAa,WAAW,2BACxBG,YAAYvB,WAAWO,OAAOgB,QAAQ,EAAE,+BACxCb,SAAS,aAAaH,OAAOoB,WAAW;QAE1ChB,MAAMA;kBAEN,cAAA,KAACiB;YAAIC,WAAWtB,OAAOuB,EAAE;YAAEC,KAAKP;sBAC9B,cAAA,KAAClB,gBAAgB0B,QAAQ;gBACvBC,OAAO;oBACLvB;oBACAa;oBACAT;oBACAF;oBACAC;oBACAM;gBACF;0BAECV;;;;AAKX,EAAE"}

package/dist/cssm/components/Tabs/TabsController.js

@@ -0,0 +1,19 @@
+import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
+import { useStableCallback } from "../../hooks/useStableCallback.js";
+/* eslint-enable jsdoc/require-jsdoc */ export const useTabsController = ({ selectedId, defaultSelectedId, onSelectedIdChange: onSelectedIdChangeProp })=>{
+    const onSelectedIdChange = useStableCallback((id)=>id && onSelectedIdChangeProp?.(id));
+    const [value, onChange] = useCustomEnsuredControl({
+        onChange: onSelectedIdChange,
+        value: selectedId,
+        defaultValue: defaultSelectedId
+    });
+    if (!selectedId && !defaultSelectedId || !value) {
+        return null;
+    }
+    return {
+        onChange,
+        selectedTab: value
+    };
+};
+
+//# sourceMappingURL=TabsController.js.map

package/dist/cssm/components/Tabs/TabsController.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Tabs/TabsController.ts"],"sourcesContent":["import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { type TabsProps } from './Tabs';\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport type TabsController = {\n  onChange: (id: string) => void;\n  selectedTab: string;\n};\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport const useTabsController = ({\n  selectedId,\n  defaultSelectedId,\n  onSelectedIdChange: onSelectedIdChangeProp,\n}: Pick<\n  TabsProps,\n  'selectedId' | 'defaultSelectedId' | 'onSelectedIdChange'\n>): TabsController | null => {\n  const onSelectedIdChange = useStableCallback(\n    (id: string | undefined) => id && onSelectedIdChangeProp?.(id),\n  );\n\n  const [value, onChange] = useCustomEnsuredControl<string | undefined>({\n    onChange: onSelectedIdChange,\n    value: selectedId,\n    defaultValue: defaultSelectedId,\n  });\n\n  if ((!selectedId && !defaultSelectedId) || !value) {\n    return null;\n  }\n  return {\n    onChange,\n    selectedTab: value,\n  };\n};\n"],"names":["useCustomEnsuredControl","useStableCallback","useTabsController","selectedId","defaultSelectedId","onSelectedIdChange","onSelectedIdChangeProp","id","value","onChange","defaultValue","selectedTab"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,mCAAgC;AACxE,SAASC,iBAAiB,QAAQ,mCAAgC;AAQlE,qCAAqC,GAErC,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,UAAU,EACVC,iBAAiB,EACjBC,oBAAoBC,sBAAsB,EAI3C;IACC,MAAMD,qBAAqBJ,kBACzB,CAACM,KAA2BA,MAAMD,yBAAyBC;IAG7D,MAAM,CAACC,OAAOC,SAAS,GAAGT,wBAA4C;QACpES,UAAUJ;QACVG,OAAOL;QACPO,cAAcN;IAChB;IAEA,IAAI,AAAC,CAACD,cAAc,CAACC,qBAAsB,CAACI,OAAO;QACjD,OAAO;IACT;IACA,OAAO;QACLC;QACAE,aAAaH;IACf;AACF,EAAE"}

package/dist/cssm/components/Tabs/TabsModeContext.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+/* eslint-enable jsdoc/require-jsdoc */ export const TabsModeContext = React.createContext({
+    mode: 'default',
+    withGaps: false,
+    layoutFillMode: 'auto',
+    withScrollToSelectedTab: false,
+    scrollBehaviorToSelectedTab: 'nearest',
+    controller: null
+});
+
+//# sourceMappingURL=TabsModeContext.js.map

package/dist/cssm/components/Tabs/TabsModeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Tabs/TabsModeContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { type TabsProps } from './Tabs';\nimport { type TabsController } from './TabsController';\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n  controller: TabsController | null;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n    controller: null,\n  });\n"],"names":["React","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAa/B,qCAAqC,GAErC,OAAO,MAAMC,kBACXD,MAAME,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;IAC7BC,YAAY;AACd,GAAG"}

package/dist/cssm/components/TabsItem/TabsItem.js

@@ -7,7 +7,7 @@ import { useExternRef } from "../../hooks/useExternRef.js";
 import { usePrevious } from "../../hooks/usePrevious.js";
 import { useDOM } from "../../lib/dom.js";
 import { warnOnce } from "../../lib/warnOnce.js";
-import { TabsModeContext } from "../Tabs/Tabs.js";
+import { TabsModeContext } from "../Tabs/TabsModeContext.js";
 import { Tappable } from "../Tappable/Tappable.js";
 import { Headline } from "../Typography/Headline/Headline.js";
 import { Subhead } from "../Typography/Subhead/Subhead.js";
@@ -29,11 +29,12 @@ const fillModeClassNames = {
 const warn = warnOnce('TabsItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
- */ export const TabsItem = ({ before, children, status, after, selected = false, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = styles.hover, activeMode = '', hasActive = false, focusVisibleMode = 'inside', ...restProps })=>{
+ */ export const TabsItem = ({ before, children, status, after, selected: selectedProp = false, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = styles.hover, activeMode = '', hasActive = false, focusVisibleMode = 'inside', id, onClick, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
-    const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } = React.useContext(TabsModeContext);
+    const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab, controller } = React.useContext(TabsModeContext);
     let statusComponent = null;
     const isTabFlow = role === 'tab';
+    const selected = selectedProp || !!id && controller?.selectedTab === id;
     if (hasReactNode(status)) {
         statusComponent = typeof status === 'number' ? /*#__PURE__*/ _jsxs(Subhead, {
             Component: "span",
@@ -58,7 +59,7 @@ const warn = warnOnce('TabsItem');
     if (process.env.NODE_ENV === 'development' && isTabFlow) {
         if (!restProps['aria-controls']) {
             warn(`Передайте в "aria-controls" id контролируемого блока`, 'warn');
-        } else if (!restProps['id']) {
+        } else if (!id) {
             warn(`Передайте "id" компоненту для использования в "aria-labelledby" контролируемого блока`, 'warn');
         }
     }
@@ -97,6 +98,16 @@ const warn = warnOnce('TabsItem');
         shouldScrollToSelected,
         scrollBehaviorToSelectedTab
     ]);
+    const _onClick = React.useCallback((e)=>{
+        onClick?.(e);
+        if (id) {
+            controller?.onChange(id);
+        }
+    }, [
+        id,
+        onClick,
+        controller
+    ]);
     return /*#__PURE__*/ _jsxs(Tappable, {
         getRootRef: rootRef,
         hoverMode: hoverMode,
@@ -107,6 +118,8 @@ const warn = warnOnce('TabsItem');
         "aria-selected": selected,
         tabIndex: tabIndex,
         baseClassName: classNames(styles.host, mode && stylesMode[mode], selected && styles.selected, sizeY !== 'regular' && sizeYClassNames[sizeY], withGaps && styles.withGaps, layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode]),
+        onClick: _onClick,
+        id: id,
         ...restProps,
         children: [
             before && /*#__PURE__*/ _jsx("div", {

package/dist/cssm/components/TabsItem/TabsItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","aria-selected","baseClassName","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableOmitProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected: selectedProp = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  id,\n  onClick,\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n    controller,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  const selected = selectedProp || (!!id && controller?.selectedTab === id);\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!id) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      onClick?.(e);\n      if (id) {\n        controller?.onChange(id);\n      }\n    },\n    [id, onClick, controller],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      onClick={_onClick}\n      id={id}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","controller","useContext","statusComponent","isTabFlow","selectedTab","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}

package/dist/cssm/components/Tappable/Tappable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  compact: styles.sizeXCompact,\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n  /**\n   * @deprecated Since 7.3.0.\n   *\n   * Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`.\n   */\n  activeClassName?: string; // Переделать на Omit<ClickableProps, 'activeClassName' | 'hoverClassName'>\n  /**\n   * @deprecated Since 7.3.0.\n   *\n   * Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`.\n   */\n  hoverClassName?: string; // Переделать на Omit<ClickableProps, 'activeClassName' | 'hoverClassName'>\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","SizeType","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","styles","sizeXClassNames","none","sizeXNone","compact","sizeXCompact","hasPointerClassName","hasPointer","undefined","hasPointerNone","hasPointerFalse","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","host","REGULAR","borderRadiusInherit","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,gCAAuB;AAChD,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AACvF,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH,OAAOR,OAAOS,cAAc;QAC9B,KAAK;YACH,OAAOT,OAAOU,eAAe;IACjC;IAEA,OAAOF;AACT;AAsBA,OAAO,MAAMG,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYjB,kBAAkB,EAC9BkB,aAAalB,kBAAkB,EAC/BmB,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAc5B,eAAe2B;IAEnC,MAAM,EAAEE,QAAQ,MAAM,EAAEd,UAAU,EAAE,GAAGlB;IAEvC,MAAMiC,aAAa3B,mBAAmBqB,YAAYT;IAClD,MAAM,EAAEgB,MAAM,EAAE,GAAGC,cAAc,GAAG5B,UAAU0B,YAAYf;IAE1D,MAAMkB,WAAWlC,WAAWiC,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAACnC;QACCmB,eAAexB,WACb,wBACAwB,eACAZ,OAAO6B,IAAI,EACXR,UAAU/B,SAASwC,OAAO,IAAI7B,eAAe,CAACoB,MAAM,EACpDR,qBAAqB,aAAab,OAAO+B,mBAAmB,EAC5DzB,oBAAoBC;QAEtByB,gBAAgBjC,WAAWgB;QAC3BkB,iBAAiBpC,YAAYmB;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACtB;gBAAO4B,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  compact: styles.sizeXCompact,\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n  /**\n   * @deprecated Since 7.3.0.\n   *\n   * Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`.\n   */\n  activeClassName?: string; // Переделать на Omit<ClickableProps, 'activeClassName' | 'hoverClassName'>\n  /**\n   * @deprecated Since 7.3.0.\n   *\n   * Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`.\n   */\n  hoverClassName?: string; // Переделать на Omit<ClickableProps, 'activeClassName' | 'hoverClassName'>\n}\n\n// TODO [>=8]: = React.AllHTMLAttributes<HTMLElement> & HasRootRef<HTMLElement>\n//\n// NOTE: Возможно стоит вообще запретить компонентам расширяться от TappableProps?\nexport type TappableOmitProps = Omit<TappableProps, 'DefaultComponent'>;\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","SizeType","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","styles","sizeXClassNames","none","sizeXNone","compact","sizeXCompact","hasPointerClassName","hasPointer","undefined","hasPointerNone","hasPointerFalse","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","host","REGULAR","borderRadiusInherit","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,gCAAuB;AAChD,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AACvF,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH,OAAOR,OAAOS,cAAc;QAC9B,KAAK;YACH,OAAOT,OAAOU,eAAe;IACjC;IAEA,OAAOF;AACT;AA2BA,OAAO,MAAMG,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYjB,kBAAkB,EAC9BkB,aAAalB,kBAAkB,EAC/BmB,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAc5B,eAAe2B;IAEnC,MAAM,EAAEE,QAAQ,MAAM,EAAEd,UAAU,EAAE,GAAGlB;IAEvC,MAAMiC,aAAa3B,mBAAmBqB,YAAYT;IAClD,MAAM,EAAEgB,MAAM,EAAE,GAAGC,cAAc,GAAG5B,UAAU0B,YAAYf;IAE1D,MAAMkB,WAAWlC,WAAWiC,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAACnC;QACCmB,eAAexB,WACb,wBACAwB,eACAZ,OAAO6B,IAAI,EACXR,UAAU/B,SAASwC,OAAO,IAAI7B,eAAe,CAACoB,MAAM,EACpDR,qBAAqB,aAAab,OAAO+B,mBAAmB,EAC5DzB,oBAAoBC;QAEtByB,gBAAgBjC,WAAWgB;QAC3BkB,iBAAiBpC,YAAYmB;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACtB;gBAAO4B,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}

package/dist/cssm/components/ToolButton/ToolButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n  row: styles.directionRow,\n  column: styles.directionColumn,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  /**\n   * Внешний вид компонента.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Направление контента.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при `direction=\"column\"` если передан `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        rounded && getRoundedClassName(direction, hasChildren),\n        hasChildren && direction === 'row' && styles.withFakeEndIcon,\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles.text}>{children}</span>}\n    </Tappable>\n  );\n};\n\nexport function getRoundedClassName(\n  direction: 'row' | 'column',\n  hasChildren: boolean,\n): string | undefined {\n  switch (direction) {\n    case 'row':\n      return styles.rounded;\n    case 'column':\n      return hasChildren ? undefined : styles.rounded;\n  }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","styles","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","stylesAppearance","accent","appearanceAccent","neutral","appearanceNeutral","stylesDirection","row","directionRow","column","directionColumn","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","ToolButton","mode","appearance","direction","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","baseClassName","host","getRoundedClassName","withFakeEndIcon","span","className","text","undefined"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,SAASF,OAAOG,WAAW;IAC3BC,WAAWJ,OAAOK,aAAa;IAC/BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,mBAAmB;IACvBC,QAAQX,OAAOY,gBAAgB;IAC/BC,SAASb,OAAOc,iBAAiB;AACnC;AAEA,MAAMC,kBAAkB;IACtBC,KAAKhB,OAAOiB,YAAY;IACxBC,QAAQlB,OAAOmB,eAAe;AAChC;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AAuBA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EACP,GAAGC,WACa;IAChB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGrC;IAC3B,MAAMsC,cAAcvC,aAAaiC;IAEjC,qBACE,MAAC9B;QACCqC,WAAWpC,OAAOqC,KAAK;QACvBC,YAAYtC,OAAOuC,MAAM;QACzBC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBC,eAAehD,WACbK,OAAO4C,IAAI,EACXZ,WAAWa,oBAAoBjB,WAAWO,cAC1CA,eAAeP,cAAc,SAAS5B,OAAO8C,eAAe,EAC5D7C,UAAU,CAACyB,KAAK,EAChBhB,gBAAgB,CAACiB,WAAW,EAC5BZ,eAAe,CAACa,UAAU,EAC1BM,UAAU,aAAad,eAAe,CAACc,MAAM;QAE9C,GAAGD,SAAS;;0BAEb,KAACnC;gBAAqBgC,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACY;gBAAKC,WAAWhD,OAAOiD,IAAI;0BAAGpB;;;;AAGrD,EAAE;AAEF,OAAO,SAASgB,oBACdjB,SAA2B,EAC3BO,WAAoB;IAEpB,OAAQP;QACN,KAAK;YACH,OAAO5B,OAAOgC,OAAO;QACvB,KAAK;YACH,OAAOG,cAAce,YAAYlD,OAAOgC,OAAO;IACnD;AACF"}
+{"version":3,"sources":["../../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n  row: styles.directionRow,\n  column: styles.directionColumn,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface ToolButtonProps extends TappableOmitProps, AdaptiveIconRendererProps {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  /**\n   * Внешний вид компонента.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Направление контента.\n   */\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при `direction=\"column\"` если передан `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        rounded && getRoundedClassName(direction, hasChildren),\n        hasChildren && direction === 'row' && styles.withFakeEndIcon,\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles.text}>{children}</span>}\n    </Tappable>\n  );\n};\n\nexport function getRoundedClassName(\n  direction: 'row' | 'column',\n  hasChildren: boolean,\n): string | undefined {\n  switch (direction) {\n    case 'row':\n      return styles.rounded;\n    case 'column':\n      return hasChildren ? undefined : styles.rounded;\n  }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","styles","stylesMode","primary","modePrimary","secondary","modeSecondary","tertiary","modeTertiary","outline","modeOutline","stylesAppearance","accent","appearanceAccent","neutral","appearanceNeutral","stylesDirection","row","directionRow","column","directionColumn","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","ToolButton","mode","appearance","direction","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","hover","activeMode","active","Component","href","focusVisibleMode","baseClassName","host","getRoundedClassName","withFakeEndIcon","span","className","text","undefined"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,SAASF,OAAOG,WAAW;IAC3BC,WAAWJ,OAAOK,aAAa;IAC/BC,UAAUN,OAAOO,YAAY;IAC7BC,SAASR,OAAOS,WAAW;AAC7B;AAEA,MAAMC,mBAAmB;IACvBC,QAAQX,OAAOY,gBAAgB;IAC/BC,SAASb,OAAOc,iBAAiB;AACnC;AAEA,MAAMC,kBAAkB;IACtBC,KAAKhB,OAAOiB,YAAY;IACxBC,QAAQlB,OAAOmB,eAAe;AAChC;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AAuBA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EACP,GAAGC,WACa;IAChB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGrC;IAC3B,MAAMsC,cAAcvC,aAAaiC;IAEjC,qBACE,MAAC9B;QACCqC,WAAWpC,OAAOqC,KAAK;QACvBC,YAAYtC,OAAOuC,MAAM;QACzBC,WAAWP,UAAUQ,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBC,eAAehD,WACbK,OAAO4C,IAAI,EACXZ,WAAWa,oBAAoBjB,WAAWO,cAC1CA,eAAeP,cAAc,SAAS5B,OAAO8C,eAAe,EAC5D7C,UAAU,CAACyB,KAAK,EAChBhB,gBAAgB,CAACiB,WAAW,EAC5BZ,eAAe,CAACa,UAAU,EAC1BM,UAAU,aAAad,eAAe,CAACc,MAAM;QAE9C,GAAGD,SAAS;;0BAEb,KAACnC;gBAAqBgC,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACY;gBAAKC,WAAWhD,OAAOiD,IAAI;0BAAGpB;;;;AAGrD,EAAE;AAEF,OAAO,SAASgB,oBACdjB,SAA2B,EAC3BO,WAAoB;IAEpB,OAAQP;QACN,KAAK;YACH,OAAO5B,OAAOgC,OAAO;QACvB,KAAK;YACH,OAAOG,cAAce,YAAYlD,OAAOgC,OAAO;IACnD;AACF"}