@vkontakte/vkui 5.5.4 → 5.6.0

package/dist/components/SimpleCell/SimpleCell.js

@@ -3,16 +3,18 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
-import { Icon24Chevron } from "@vkontakte/icons";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
 import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
+import { warnOnce } from "../../lib/warnOnce";
 import { Tappable } from "../Tappable/Tappable";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
+import { Chevron } from "./Chevron/Chevron";
+var warn = warnOnce("SimpleCell");
 var platformClassNames = {
     ios: classNames("vkuiSimpleCell--ios", "vkuiInternalSimpleCell--ios"),
     android: "vkuiSimpleCell--android",
@@ -25,7 +27,7 @@ var sizeYClassNames = (_obj = {
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
  */ export var SimpleCell = function(_param) {
-    var badgeBeforeTitle = _param.badgeBeforeTitle, badgeAfterTitle = _param.badgeAfterTitle, badgeBeforeSubtitle = _param.badgeBeforeSubtitle, badgeAfterSubtitle = _param.badgeAfterSubtitle, before = _param.before, indicator = _param.indicator, children = _param.children, after = _param.after, expandable = _param.expandable, multiline = _param.multiline, subhead = _param.subhead, subtitle = _param.subtitle, extraSubtitle = _param.extraSubtitle, className = _param.className, restProps = _object_without_properties(_param, [
+    var badgeBeforeTitle = _param.badgeBeforeTitle, badgeAfterTitle = _param.badgeAfterTitle, badgeBeforeSubtitle = _param.badgeBeforeSubtitle, badgeAfterSubtitle = _param.badgeAfterSubtitle, before = _param.before, indicator = _param.indicator, children = _param.children, after = _param.after, expandable = _param.expandable, multiline = _param.multiline, subhead = _param.subhead, subtitle = _param.subtitle, extraSubtitle = _param.extraSubtitle, className = _param.className, _param_chevronSize = _param.chevronSize, chevronSize = _param_chevronSize === void 0 ? "m" : _param_chevronSize, restProps = _object_without_properties(_param, [
         "badgeBeforeTitle",
         "badgeAfterTitle",
         "badgeBeforeSubtitle",
@@ -39,10 +41,16 @@ var sizeYClassNames = (_obj = {
         "subhead",
         "subtitle",
         "extraSubtitle",
-        "className"
+        "className",
+        "chevronSize"
     ]);
     var platform = usePlatform();
-    var hasAfter = hasReactNode(after) || expandable && platform === Platform.IOS;
+    if (process.env.NODE_ENV === "development" && expandable === true) {
+        // TODO [>=6]: Обновить типизацию для expandable свойства
+        warn('Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable="auto"');
+    }
+    var hasChevron = expandable === "always" || (expandable === true || expandable === "auto") && platform === Platform.IOS;
+    var hasAfter = hasReactNode(after) || hasChevron;
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     return /*#__PURE__*/ React.createElement(Tappable, _object_spread_props(_object_spread({}, restProps), {
         className: classNames("vkuiSimpleCell", "vkuiInternalSimpleCell", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, sizeYClassNames[sizeY], multiline && "vkuiSimpleCell--mult", className)
@@ -79,7 +87,10 @@ var sizeYClassNames = (_obj = {
         className: "vkuiSimpleCell__indicator"
     }, indicator), hasAfter && /*#__PURE__*/ React.createElement("div", {
         className: classNames("vkuiSimpleCell__after", "vkuiInternalSimpleCell__after")
-    }, after, expandable && platform === Platform.IOS && /*#__PURE__*/ React.createElement(Icon24Chevron, null)));
+    }, after, hasChevron && /*#__PURE__*/ React.createElement(Chevron, {
+        size: chevronSize,
+        className: "vkuiSimpleCell__chevronIcon"
+    })));
 };
 
 //# sourceMappingURL=SimpleCell.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SimpleCell.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === Platform.IOS);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            normalize={false}\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {expandable && platform === Platform.IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Chevron","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Tappable","Footnote","Headline","Subhead","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","hasAfter","IOS","sizeY","hasOwnProperty","div","Component","span","weight","normalize"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,qBAAqB;IACzBC,KAAKX,kCAAsC;IAC3CY,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMf,yCAA6C;GACnD,iBAFsB,MAErBI,SAASY,SAAUhB,4CAElB,4DAJoB,MAMrBI,SAASa,2CANY;AAkExB;;CAEC,GACD,OAAO,IAAMC,aAAa;QACxBC,0BAAAA,kBACAC,yBAAAA,iBACAC,6BAAAA,qBACAC,4BAAAA,oBACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,mBAAAA,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAW/B;IACjB,IAAMgC,WAAWlC,aAAayB,UAAWC,cAAcO,aAAa7B,SAAS+B;IAC7E,IAA2BlC,iBAAAA,wCAAAA,eAAnBmC,OAAAA,0CAAQ;IAEhB,qBACE,oBAAC/B,kDACK2B;QACJD,WAAWhC,6BAET,0BACAU,mBAAmB4B,eAAeJ,YAC9BxB,kBAAkB,CAACwB,SAAS,GAC5BxB,mBAAmBE,SACvBE,eAAe,CAACuB,MAAM,EACtBT,qCACAI;QAGDT,sBACD,oBAACgB;QAAIP,WAAWhC,mCAAuC;OACpD6B,yBACC,oBAACpB;QACC+B,WAAU;QACVR,WAAWhC;OAEV6B,wBAGL,oBAACU;QAAIP,SAAS;OACXb,kCACC,oBAACsB;QAAKT,SAAS;OAAgCb,iCAEjD,oBAACX;QAASgC,WAAU;QAAOR,SAAS;QAAkCU,QAAO;OAC1EjB,WAEFxB,aAAamB,kCACZ,oBAACqB;QAAKT,SAAS;OAAgCZ,mBAGlDU,0BACC,oBAACS;QAAIP,SAAS;OACXX,qCACC,oBAACoB;QAAKT,SAAS;OAAgCX,oCAEjD,oBAACd;QACCoC,WAAW;QACXX,WAAWhC;OAEV8B,WAEFR,oCACC,oBAACmB;QAAKT,SAAS;OAAgCV,sBAIpDS,+BACC,oBAACxB;QACCoC,WAAW;QACXX,WAAWhC;OAEV+B,iBAIN9B,aAAauB,4BACZ,oBAAChB;QAASgC,WAAU;QAAOE,QAAO;QAAIV,SAAS;OAC5CR,YAGJW,0BACC,oBAACI;QAAIP,WAAWhC,oCAAwC;OACrD0B,OACAC,cAAcO,aAAa7B,SAAS+B,qBAAO,oBAACrC;AAKvD,EAAE"}
+{"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst warn = warnOnce('SimpleCell');\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean | 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development' && expandable === true) {\n    // TODO [>=6]: Обновить типизацию для expandable свойства\n    warn(\n      'Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable=\"auto\"',\n    );\n  }\n\n  const hasChevron =\n    expandable === 'always' ||\n    ((expandable === true || expandable === 'auto') && platform === Platform.IOS);\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            normalize={false}\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","Tappable","Footnote","Headline","Subhead","Chevron","warn","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","process","env","NODE_ENV","hasChevron","IOS","hasAfter","sizeY","hasOwnProperty","div","Component","span","weight","normalize","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,IAAMC,OAAON,SAAS;AAEtB,IAAMO,qBAAqB;IACzBC,KAAKd,kCAAsC;IAC3Ce,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMlB,yCAA6C;GACnD,iBAFsB,MAErBI,SAASe,OAAO,EAAGnB,4CAElB,4DAJoB,MAMrBI,SAASgB,OAAO,oCANK;AAsExB;;CAEC,GACD,OAAO,IAAMC,aAAa;QACxBC,0BAAAA,kBACAC,yBAAAA,iBACAC,6BAAAA,qBACAC,4BAAAA,oBACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,mBAAAA,uCACAC,aAAAA,8CAAc,0BACXC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWnC;IAEjB,IAAIoC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBX,eAAe,MAAM;QACjE,yDAAyD;QACzDlB,KACE;IAEJ;IAEA,IAAM8B,aACJZ,eAAe,YACd,AAACA,CAAAA,eAAe,QAAQA,eAAe,MAAK,KAAMQ,aAAajC,SAASsC,GAAG;IAE9E,IAAMC,WAAW3C,aAAa4B,UAAUa;IACxC,IAA2BxC,iBAAAA,wCAAAA,eAAnB2C,OAAAA,0CAAQ;IAEhB,qBACE,oBAACtC,kDACK8B;QACJF,WAAWnC,6BAET,0BACAa,mBAAmBiC,cAAc,CAACR,YAC9BzB,kBAAkB,CAACyB,SAAS,GAC5BzB,mBAAmBE,OAAO,EAC9BE,eAAe,CAAC4B,MAAM,EACtBd,qCACAI;QAGDT,sBACD,oBAACqB;QAAIZ,WAAWnC,mCAAuC;OACpDgC,yBACC,oBAACtB;QACCsC,WAAU;QACVb,WAAWnC;OAEVgC,wBAGL,oBAACe;QAAIZ,SAAS;OACXb,kCACC,oBAAC2B;QAAKd,SAAS;OAAgCb,iCAEjD,oBAACb;QAASuC,WAAU;QAAOb,SAAS;QAAkCe,QAAO;OAC1EtB,WAEF3B,aAAasB,kCACZ,oBAAC0B;QAAKd,SAAS;OAAgCZ,mBAGlDU,0BACC,oBAACc;QAAIZ,SAAS;OACXX,qCACC,oBAACyB;QAAKd,SAAS;OAAgCX,oCAEjD,oBAAChB;QACC2C,WAAW;QACXhB,WAAWnC;OAEViC,WAEFR,oCACC,oBAACwB;QAAKd,SAAS;OAAgCV,sBAIpDS,+BACC,oBAAC1B;QACC2C,WAAW;QACXhB,WAAWnC;OAEVkC,iBAINjC,aAAa0B,4BACZ,oBAAClB;QAASuC,WAAU;QAAOE,QAAO;QAAIf,SAAS;OAC5CR,YAGJiB,0BACC,oBAACG;QAAIZ,WAAWnC,oCAAwC;OACrD6B,OACAa,4BACC,oBAAC/B;QAAQyC,MAAMhB;QAAaD,SAAS;;AAMjD,EAAE"}

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport interface SliderBaseProps\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?(index: number): string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?(value: number, index: number): string;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: number, event: TouchEvent): void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: [number, number], event: TouchEvent): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  // TODO [>=6]: Выставить 1 как значение по умолчанию, чтобы было как в браузерном <input type=\"range\" />\n  step,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  onChange,\n  ...restProps\n}: SliderProps | SliderMultipleProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (nextValue: InternalValueState, event: TouchEvent) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: TouchEventHandler = (event: TouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    const nextStartX = event.startX - nextContainerX;\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n  };\n\n  const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + shiftX;\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: TouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      // @ts-expect-error: TS2345 сейчас тип расширить не получится (см. TODO в описании `onChange`)\n      event,\n    );\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles['Slider'],\n        disabled && styles['Slider--disabled'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles['Slider__track']} />\n      <div\n        className={styles['Slider__track-fill']}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles['Slider__thumb']}\n          style={{\n            left: `${startValueInPercent}%`,\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          inputProps={{\n            'data-type': 'start',\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles['Slider__thumb']}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            inputProps={{\n              'data-type': 'end',\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","clamp","useAdaptivity","useExternRef","SizeType","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","sizeYClassNames","none","COMPACT","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","restProps","sizeY","isControlled","undefined","useState","localValue","setValue","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","getBoundingClientRect","left","nextContainerX","width","nextContainerWidth","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","data-value","REGULAR","onStart","onMove","onEnd","div","style","right","ref","data-type","zIndex","inputProps"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Touch, type TouchEvent, type TouchEventHandler } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport interface SliderBaseProps\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?(index: number): string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?(value: number, index: number): string;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: number, event: TouchEvent): void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  /**\n   * TODO [>=6]: Расширить тип `event` с `React.ChangeEvent`.\n   */\n  onChange?(value: [number, number], event: TouchEvent): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  // TODO [>=6]: Выставить 1 как значение по умолчанию, чтобы было как в браузерном <input type=\"range\" />\n  step,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  onChange,\n  ...restProps\n}: SliderProps | SliderMultipleProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (nextValue: InternalValueState, event: TouchEvent) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: TouchEventHandler = (event: TouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    const nextStartX = event.startX - nextContainerX;\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n  };\n\n  const handlePointerMove: TouchEventHandler = (event: TouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + shiftX;\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: TouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      // @ts-expect-error: TS2345 сейчас тип расширить не получится (см. TODO в описании `onChange`)\n      event,\n    );\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles['Slider'],\n        disabled && styles['Slider--disabled'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles['Slider__track']} />\n      <div\n        className={styles['Slider__track-fill']}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles['Slider__thumb']}\n          style={{\n            left: `${startValueInPercent}%`,\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          inputProps={{\n            'data-type': 'start',\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles['Slider__thumb']}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            inputProps={{\n              'data-type': 'end',\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","clamp","useAdaptivity","useExternRef","SizeType","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","sizeYClassNames","none","COMPACT","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","restProps","sizeY","isControlled","undefined","useState","localValue","setValue","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","getBoundingClientRect","left","nextContainerX","width","nextContainerWidth","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","data-value","REGULAR","onStart","onMove","onEnd","div","style","right","ref","data-type","zIndex","inputProps"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,KAAK,QAAiD,iBAAiB;AAChF,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SACEC,wCAAwC,EACxCC,8BAA8B,EAC9BC,gBAAgB,EAChBC,aAAa,EACbC,aAAa,EACbC,SAAS,EACTC,wBAAwB,EACxBC,sCAAsC,QACjC,YAAY;AAInB,IAAMC;IACJC,IAAI;GACHZ,SAASa,OAAO;AA8CnB;;CAEC,GACD,OAAO,IAAMC,SAAS;QACpB,wGAAwG;IACxGC,cAAAA,0BACAC,KAAAA,8BAAM,oCACNC,KAAAA,8BAAM,kBACNC,AAAOC,mBAAPD,OACAE,AAAUC,sBAAVD,uCACAE,cAAAA,gDAAeD,eAAe;QAACL;QAAKC;KAAI,GAAGD,2BAC3CO,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACAC,sBAAAA,cACAC,0BAAAA,kBACAC,kBAAAA,UACGC;QAZHd;QACAC;QACAC;QACAC;QACAE;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2B9B,iBAAAA,wCAAAA,eAAnBgC,OAAAA,0CAAQ;IAEhB,IAAMC,eAAeZ,cAAca;IACnC,IAA+BrC,mCAAAA,MAAMsC,QAAQ,CAACX,mBAAvCY,aAAwBvC,oBAAZwC,WAAYxC;IAE/B,IAAMuB,QAAQvB,MAAMyC,OAAO,CAAqB;QAC9C,IAAMC,gBAAgBN,eAAeZ,YAAYe;QACjD,OAAOI,MAAMC,OAAO,CAACF,iBACjB;YAACxC,MAAMwC,aAAa,CAAC,EAAE,EAAErB,KAAKC;YAAMpB,MAAMwC,aAAa,CAAC,EAAE,EAAErB,KAAKC;SAAK,GACtE;YAACpB,MAAMwC,eAAerB,KAAKC;YAAM;SAAK;IAC5C,GAAG;QAACc;QAAcZ;QAAWe;QAAYlB;QAAKC;KAAI;IAElD,IAA+BC,0BAAAA,WAAxBsB,aAAwBtB,WAAZuB,WAAYvB;IAC/B,IAAME,WAAWC,gBAAgBoB,aAAa;IAC9C,IAAMC,sBAAsBlC,UAAUgC,YAAYxB,KAAKC;IACvD,IAAM0B,4BAA4BvB,WAAWZ,UAAUiC,UAAUzB,KAAKC,OAAO;IAE7E,IAAM2B,UAAUjD,MAAMkD,MAAM,CAAqB;QAC/CC,UAAU;QACVC,QAAQ;QACRC,gBAAgB;IAClB,GAAGC,OAAO;IACV,IAAMC,qBAAqBnD,aAAa0B;IACxC,IAAM0B,qBAAqBxD,MAAMkD,MAAM,CAAmB;IAC1D,IAAMO,mBAAmBzD,MAAMkD,MAAM,CAAmB;IAExD,IACE1C,4CAAAA,yCAAyC0B,YADnCwB,YACNlD,0CADMkD,WAAWC,gBACjBnD,0CADiBmD,eAAeC,iBAChCpD,0CADgCoD,gBAAmBC,4DACnDrD;QADMkD;QAAWC;QAAeC;;IAGlC,IAAME,cAAc,SAACC,WAA+BC;QAClD,IAAIpC,YAAaL,KAAK,CAAC,EAAE,KAAKwC,SAAS,CAAC,EAAE,IAAIxC,KAAK,CAAC,EAAE,KAAKwC,SAAS,CAAC,EAAE,EAAG;YACxE;QACF;QAEA,IAAIrC,cAAc;YAChB,IAAIhB,iBAAiBqD,YAAY;gBAC/B,CAAC3B,gBAAgBI,SAASuB;gBAC1B9B,YAAYA,SAAS8B,WAAWC;YAClC;QACF,OAAO;YACL,CAAC5B,gBAAgBI,SAASuB,SAAS,CAAC,EAAE;YACtC9B,YAAYA,SAAS8B,SAAS,CAAC,EAAE,EAAEC;QACrC;IACF;IAEA,IAAMC,qBAAwC,SAACD;QAC7C,IAAI,CAACT,mBAAmBD,OAAO,EAAE;YAC/B;QACF;QAEA,IACEC,oDAAAA,mBAAmBD,OAAO,CAACY,qBAAqB,IAD1CC,AAAMC,iBACZb,kDADMY,MAAsBE,AAAOC,qBACnCf,kDAD4Bc;QAG9B,mGAAmG;QACnG,IAAME,oBAAoB9D,+BAA+BuD,MAAMQ,aAAa,CAACC,MAAM;QAEnF,IAAMC,aAAaV,MAAMZ,MAAM,GAAGgB;QAClC,IAAML,YAAYpD,cAAc+D,YAAYJ,oBAAoBjD,KAAKC,KAAKF;QAC1E,IAAMuD,eAAe/D,cAAcW,OAAOwC,WAAWQ;QAErDtB,QAAQE,QAAQ,GAAGwB;QACnB1B,QAAQI,cAAc,GAAGiB;QACzBrB,QAAQG,MAAM,GAAGsB;QAEjB,IAAME,4BAA4B9D,yBAChCS,OACAwC,WACA1C,KACAC,KACAqD;QAGF,IAAuCC,8CAAAA,+BAAhCC,iBAAgCD,+BAAhBE,eAAgBF;QACvC,IACEpB,mBAAmBF,OAAO,IACzBiB,CAAAA,sBAAsB,WACpBM,mBAAmBhC,cAAciC,iBAAiBhC,QAAQ,GAC7D;YACAU,mBAAmBF,OAAO,CAACyB,KAAK;YAChCf,MAAMQ,aAAa,CAACQ,cAAc;QACpC,OAAO,IACLvB,iBAAiBH,OAAO,IACvBiB,CAAAA,sBAAsB,SAAUO,iBAAiBhC,YAAY+B,mBAAmBhC,UAAU,GAC3F;YACAY,iBAAiBH,OAAO,CAACyB,KAAK;YAC9Bf,MAAMQ,aAAa,CAACQ,cAAc;QACpC;QAEAlB,YAAYc,2BAA2BZ;QAEvCA,MAAMQ,aAAa,CAACS,eAAe;IACrC;IAEA,IAAMC,oBAAuC,SAAClB;QAC5C,IAAQZ,SAAqCH,QAArCG,QAAQC,iBAA6BJ,QAA7BI,gBAAgBF,WAAaF,QAAbE;QAEhC,oBAAuBa,MAAfmB,QAAAA,oCAAS;QACjB,IAAMT,aAAatB,SAAS+B;QAC5B,IAAMpB,YAAYpD,cAAc+D,YAAYrB,gBAAgBhC,KAAKC,KAAKF;QAEtE0C,YAAYhD,yBAAyBS,OAAOwC,WAAW1C,KAAKC,KAAK6B,WAAWa;QAE5EA,MAAMQ,aAAa,CAACS,eAAe;QACnCjB,MAAMQ,aAAa,CAACQ,cAAc;IACpC;IAEA,IAAMI,mBAAsC,SAACpB;QAC3Cf,QAAQE,QAAQ,GAAG;QACnBa,MAAMQ,aAAa,CAACS,eAAe;IACrC;IAEA,IAAMI,4BAA4B,SAACrB;QACjCF,YACE/C,uCACEQ,OACA+D,OAAOtB,MAAMS,MAAM,CAAClD,KAAK,GACzBd,+BAA+BuD,MAAMS,MAAM,IAE7C,8FAA8F;QAC9FT;IAEJ;IAEA,qBACE,oBAAC1D;QACCiF,cAAY9D,WAAW,AAAC,GAAgBqB,OAAdD,YAAW,KAAY,OAATC,YAAaD;OACjDgB;QACJhC,WAAW5B,yBAET2B,oCACAO,UAAU9B,SAASmF,OAAO,IAAIxE,eAAe,CAACmB,MAAM,EACpDN;QAEF4D,SAAS7D,WAAWS,YAAY4B;QAChCyB,QAAQ9D,WAAWS,YAAY6C;QAC/BS,OAAO/D,WAAWS,YAAY+C;sBAE9B,oBAACQ;QAAI/D,SAAS;sBACd,oBAAC+D;QACC/D,SAAS;QACTgE,OACEpE,WACI;YAAE0C,MAAM,AAAC,GAAsB,OAApBpB,qBAAoB;YAAI+C,OAAO,AAAC,GAAkC,OAAhC,MAAM9C,2BAA0B;QAAG,IAChF;YAAEqB,OAAO,AAAC,GAAsB,OAApBtB,qBAAoB;QAAG;sBAG3C,oBAAC6C;QAAIG,KAAKxC;QAAoB1B,SAAS;qBACrC,oBAACtB;QACCyF,aAAU;QACVnE,SAAS;QACTgE,OAAO;YACL1B,MAAM,AAAC,GAAsB,OAApBpB,qBAAoB;YAC7B,6GAA6G;YAC7GkD,QAAQxE,YAAYsB,uBAAuB,KAAK,IAAIV;QACtD;QACA6D,YAAY;YACV,aAAa;YACb,OAAO1C;YACP,QAAQpC;YACR,OAAOC;YACP,SAASwB;YACT,OAAOpB,WAAWqB,WAAWxB;YAC7B,YAAYM;YACZ,cAAcG,eAAeA,aAAa,KAAK2B;YAC/C,kBAAkB1B,mBAAmBA,iBAAiBa,YAAY,KAAKc;YACvE,mBAAmBC;YACnB,YAAYyB;QACd;QAED5D,0BACC,oBAAClB;QACCyF,aAAU;QACVnE,SAAS;QACTgE,OAAO;YAAE1B,MAAM,AAAC,GAA4B,OAA1BnB,2BAA0B;QAAG;QAC/CkD,YAAY;YACV,aAAa;YACb,OAAOzC;YACP,QAAQrC;YACR,OAAOyB;YACP,SAASC;YACT,OAAOxB;YACP,YAAYM;YACZ,cAAcG,eAAeA,aAAa,KAAK2B;YAC/C,kBAAkB1B,mBAAmBA,iBAAiBc,UAAU,KAAKa;YACrE,mBAAmBC;YACnB,YAAYyB;QACd;;AAMZ,EAAE"}

package/dist/components/Slider/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { rescale } from '../../helpers/math';\nimport type { InternalDraggingType, InternalValueState } from './types';\n\nexport const toPercent = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100;\n\nexport const offsetToValue = (\n  startX: number,\n  width: number,\n  min: number,\n  max: number,\n  step?: number,\n) => {\n  return rescale(startX, [0, width], [min, max], { step });\n};\n\nconst restrictValueByMinMax = (value: number, min: number, max: number) => {\n  if (value < min) {\n    return min;\n  }\n  if (value > max) {\n    return max;\n  }\n  return value;\n};\n\nexport const updateInternalStateValue = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  min: number,\n  max: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n\n  if (prevEndValue === null) {\n    return [restrictValueByMinMax(nextValue, min, max), null];\n  }\n\n  switch (dragging) {\n    case 'start':\n      return nextValue > prevEndValue\n        ? [prevEndValue, prevEndValue]\n        : [restrictValueByMinMax(nextValue, min, max), prevEndValue];\n    case 'end':\n      return nextValue < prevStartValue\n        ? [prevStartValue, prevStartValue]\n        : [prevStartValue, restrictValueByMinMax(nextValue, min, max)];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport const updateInternalStateValueByNativeChange = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n  switch (dragging) {\n    case 'start':\n      return [nextValue, prevEndValue];\n    case 'end':\n      return [prevStartValue, nextValue];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport function isMultipleValues(value: InternalValueState): value is [number, number] {\n  return value[1] !== null;\n}\n\nexport const snapDirection = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  type: InternalDraggingType | null,\n) => {\n  if (type === 'start') {\n    return 'start';\n  }\n  if (type === 'end') {\n    return 'end';\n  }\n\n  const [startRaw, endRaw] = prevValue;\n  /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */\n  const FORCE_DIFF_VALUE = 0.1;\n  const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;\n  const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;\n  return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';\n};\n\nexport const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) | null>(\n  target: T,\n) => {\n  if (target) {\n    if (target.dataset.type === 'start') {\n      return 'start';\n    }\n    if (target.dataset.type === 'end') {\n      return 'end';\n    }\n  }\n  return null;\n};\n\nconst resetProps = {\n  'aria-label': undefined,\n  'aria-valuetext': undefined,\n  'aria-labelledby': undefined,\n};\n\nexport const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(\n  restProps: T,\n) => {\n  const ariaLabel = restProps['aria-label'];\n  const ariaValueText = restProps['aria-valuetext'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n  return { ...restProps, ...resetProps, ariaLabel, ariaValueText, ariaLabelledBy };\n};\n"],"names":["React","rescale","toPercent","v","min","max","offsetToValue","startX","width","step","restrictValueByMinMax","value","updateInternalStateValue","prevValue","nextValue","dragging","prevStartValue","prevEndValue","updateInternalStateValueByNativeChange","isMultipleValues","snapDirection","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","getDraggingTypeByTargetDataset","target","dataset","resetProps","undefined","extractSliderAriaAttributesFromRestProps","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,qBAAqB;AAG7C,OAAO,IAAMC,YAAY,SAACC,GAAWC,KAAaC;WAAgB,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;EAAI;AAElG,OAAO,IAAME,gBAAgB,SAC3BC,QACAC,OACAJ,KACAC,KACAI;IAEA,OAAOR,QAAQM,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACJ;QAAKC;KAAI,EAAE;QAAEI,MAAAA;IAAK;AACxD,EAAE;AAEF,IAAMC,wBAAwB,SAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEA,OAAO,IAAMC,2BAA2B,SACtCC,WACAC,WACAV,KACAC,KACAU;IAEA,IAAuCF,8BAAAA,eAAhCG,iBAAgCH,eAAhBI,eAAgBJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACP,sBAAsBI,WAAWV,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQU;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACP,sBAAsBI,WAAWV,KAAKC;gBAAMY;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBN,sBAAsBI,WAAWV,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOQ;IACX;AACF,EAAE;AAEF,OAAO,IAAMK,yCAAyC,SACpDL,WACAC,WACAC;IAEA,IAAuCF,8BAAAA,eAAhCG,iBAAgCH,eAAhBI,eAAgBJ;IACvC,OAAQE;QACN,KAAK;YACH,OAAO;gBAACD;gBAAWG;aAAa;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAgBF;aAAU;QACpC,KAAK;QACL;YACE,OAAOD;IACX;AACF,EAAE;AAEF,OAAO,SAASM,iBAAiBR,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEA,OAAO,IAAMS,gBAAgB,SAC3BP,WACAC,WACAO;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,IAA2BR,8BAAAA,eAApBS,WAAoBT,eAAVU,SAAUV;IAC3B,2EAA2E,GAC3E,IAAMW,mBAAmB;IACzB,IAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,IAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,IAAIH,QAAQX,cAAca,KAAKC,IAAIF,MAAMZ,aAAa,UAAU;AAC9E,EAAE;AAEF,OAAO,IAAMe,iCAAiC,SAC5CC;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,QAAQV,SAAS,SAAS;YACnC,OAAO;QACT;QACA,IAAIS,OAAOC,QAAQV,SAAS,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT,EAAE;AAEF,IAAMW,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEA,OAAO,IAAMC,2CAA2C,SACtDC;IAEA,IAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,IAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,IAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO,wCAAKA,WAAcH;QAAYI,WAAAA;QAAWC,eAAAA;QAAeC,gBAAAA;;AAClE,EAAE"}
+{"version":3,"sources":["../../../src/components/Slider/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { rescale } from '../../helpers/math';\nimport type { InternalDraggingType, InternalValueState } from './types';\n\nexport const toPercent = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100;\n\nexport const offsetToValue = (\n  startX: number,\n  width: number,\n  min: number,\n  max: number,\n  step?: number,\n) => {\n  return rescale(startX, [0, width], [min, max], { step });\n};\n\nconst restrictValueByMinMax = (value: number, min: number, max: number) => {\n  if (value < min) {\n    return min;\n  }\n  if (value > max) {\n    return max;\n  }\n  return value;\n};\n\nexport const updateInternalStateValue = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  min: number,\n  max: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n\n  if (prevEndValue === null) {\n    return [restrictValueByMinMax(nextValue, min, max), null];\n  }\n\n  switch (dragging) {\n    case 'start':\n      return nextValue > prevEndValue\n        ? [prevEndValue, prevEndValue]\n        : [restrictValueByMinMax(nextValue, min, max), prevEndValue];\n    case 'end':\n      return nextValue < prevStartValue\n        ? [prevStartValue, prevStartValue]\n        : [prevStartValue, restrictValueByMinMax(nextValue, min, max)];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport const updateInternalStateValueByNativeChange = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n  switch (dragging) {\n    case 'start':\n      return [nextValue, prevEndValue];\n    case 'end':\n      return [prevStartValue, nextValue];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport function isMultipleValues(value: InternalValueState): value is [number, number] {\n  return value[1] !== null;\n}\n\nexport const snapDirection = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  type: InternalDraggingType | null,\n) => {\n  if (type === 'start') {\n    return 'start';\n  }\n  if (type === 'end') {\n    return 'end';\n  }\n\n  const [startRaw, endRaw] = prevValue;\n  /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */\n  const FORCE_DIFF_VALUE = 0.1;\n  const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;\n  const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;\n  return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';\n};\n\nexport const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) | null>(\n  target: T,\n) => {\n  if (target) {\n    if (target.dataset.type === 'start') {\n      return 'start';\n    }\n    if (target.dataset.type === 'end') {\n      return 'end';\n    }\n  }\n  return null;\n};\n\nconst resetProps = {\n  'aria-label': undefined,\n  'aria-valuetext': undefined,\n  'aria-labelledby': undefined,\n};\n\nexport const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(\n  restProps: T,\n) => {\n  const ariaLabel = restProps['aria-label'];\n  const ariaValueText = restProps['aria-valuetext'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n  return { ...restProps, ...resetProps, ariaLabel, ariaValueText, ariaLabelledBy };\n};\n"],"names":["React","rescale","toPercent","v","min","max","offsetToValue","startX","width","step","restrictValueByMinMax","value","updateInternalStateValue","prevValue","nextValue","dragging","prevStartValue","prevEndValue","updateInternalStateValueByNativeChange","isMultipleValues","snapDirection","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","getDraggingTypeByTargetDataset","target","dataset","resetProps","undefined","extractSliderAriaAttributesFromRestProps","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,qBAAqB;AAG7C,OAAO,IAAMC,YAAY,SAACC,GAAWC,KAAaC;WAAgB,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM;EAAI;AAElG,OAAO,IAAME,gBAAgB,SAC3BC,QACAC,OACAJ,KACAC,KACAI;IAEA,OAAOR,QAAQM,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACJ;QAAKC;KAAI,EAAE;QAAEI,MAAAA;IAAK;AACxD,EAAE;AAEF,IAAMC,wBAAwB,SAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEA,OAAO,IAAMC,2BAA2B,SACtCC,WACAC,WACAV,KACAC,KACAU;IAEA,IAAuCF,8BAAAA,eAAhCG,iBAAgCH,eAAhBI,eAAgBJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACP,sBAAsBI,WAAWV,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQU;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACP,sBAAsBI,WAAWV,KAAKC;gBAAMY;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBN,sBAAsBI,WAAWV,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOQ;IACX;AACF,EAAE;AAEF,OAAO,IAAMK,yCAAyC,SACpDL,WACAC,WACAC;IAEA,IAAuCF,8BAAAA,eAAhCG,iBAAgCH,eAAhBI,eAAgBJ;IACvC,OAAQE;QACN,KAAK;YACH,OAAO;gBAACD;gBAAWG;aAAa;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAgBF;aAAU;QACpC,KAAK;QACL;YACE,OAAOD;IACX;AACF,EAAE;AAEF,OAAO,SAASM,iBAAiBR,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEA,OAAO,IAAMS,gBAAgB,SAC3BP,WACAC,WACAO;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,IAA2BR,8BAAAA,eAApBS,WAAoBT,eAAVU,SAAUV;IAC3B,2EAA2E,GAC3E,IAAMW,mBAAmB;IACzB,IAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,IAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,GAAG,CAACH,QAAQX,cAAca,KAAKC,GAAG,CAACF,MAAMZ,aAAa,UAAU;AAC9E,EAAE;AAEF,OAAO,IAAMe,iCAAiC,SAC5CC;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,OAAO,CAACV,IAAI,KAAK,SAAS;YACnC,OAAO;QACT;QACA,IAAIS,OAAOC,OAAO,CAACV,IAAI,KAAK,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT,EAAE;AAEF,IAAMW,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEA,OAAO,IAAMC,2CAA2C,SACtDC;IAEA,IAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,IAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,IAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO,wCAAKA,WAAcH;QAAYI,WAAAA;QAAWC,eAAAA;QAAeC,gBAAAA;;AAClE,EAAE"}

package/dist/components/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","div","vertical","horizontal","getRootRef","onStart","onMoveX","onEnd","ref","align","appearance","size","onClick"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,SAAS,QAAQ,uBAAuB;AACjD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAoB,iBAAiB;AACnD,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AAkDxD;;CAEC,GACD,OAAO,IAAMC,WAAW;QACtBC,kBAAAA,UACQC,aAARC,QAAQD,cAAAA,iBAAc,eAAdA,KACRE,gBAAAA,QACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,wBACXC,uBAAAA,eACAC,iBAAAA,8BACAC,MAAAA,gCAAO,yBACPC,mBAAAA,WACAC,kBAAAA,UACGC;QAXHZ;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWzB;IACjB,IAAM,AAAE0B,YAAc3B,kCAAd2B;IACR,IAAMC,YAAYD,aAAavB,UAAUyB;IACzC,IAAM,AAAEC,uBAAyB3B,0BAAzB2B;IAER,IAA8BhC,mCAAAA,MAAMiC,SAAS,YAAtCC,UAAuBlC,oBAAdmC,aAAcnC;IAC9B,IAA8BA,oCAAAA,MAAMiC,SAAS,YAAtCG,UAAuBpC,qBAAdqC,aAAcrC;IAE9B,IAAMsC,mBAAmBtC,MAAMuC,OAAe;IAC9C,IAAMC,mBAAmBxC,MAAMuC,OAAe;IAE9C,IAAME,YAAYzC,MAAMuC,OAA8B;IACtD,IAAMG,aAAa1C,MAAMuC,OAA8B;IAEvD,IAAMI,oBAAoB3C,MAAMuC,OAAwD;IAExF,IAAMK,mCAAmChB,aAAarB,SAASsC,MAAM,MAAM;IAE3E,IAAMC,QAAQ;QACZX,WAAW;QACXH,qBACEU,WAAWK,SACX;YACExB;QACF,GACAqB;IAEJ;IAEA,IAAMI,oBAA0D,SAACC;QAC/DH;QAEA,IAAI5B,UAAU,OAAOI,kBAAkB,YAAY;YACjDA,cAAc2B;QAChB;IACF;IAEA,IAAMC,eAAe9C,WAAW0C,OAAOzB;IAEvC,IAAM8B,mBAAmB,SAACC;QACxB,IAAIT,kBAAkBI,YAAY,MAAM;YACtCM,qBAAqBV,kBAAkBI;QACzC;QACAJ,kBAAkBI,UAAUO,sBAAsB;YAChD,IAAIb,UAAUM,SAAS;gBACrBN,UAAUM,QAAQQ,MAAMC,YAAY,AAAC,eAAsB,OAARJ,SAAQ;YAC7D;QACF;IACF;IAEA,IAAMK,eAAeP,aAAaQ;IAElC,IAAMC,eAAe,SAACC;YAQkBnB;QAPtC,IAAQoB,SAA0BD,MAA1BC,QAAQC,gBAAkBF,MAAlBE;QAChBA,cAAcC;QAEd,IAAI,CAAC3B,SAAS;YACZC,WAAW;QACb;YAEsCI;QAAtCH,iBAAiBS,UAAU,AAACc,SAAUpB,CAAAA,CAAAA,iCAAAA,CAAAA,qBAAAA,UAAUM,qBAAVN,gCAAAA,KAAAA,IAAAA,mBAAmBuB,yBAAnBvB,4CAAAA,iCAAkC,CAAA,IAAM;QAC9ED,iBAAiBO,UAAUvC,OAAO8B,iBAAiBS,SAAS,IAAI,KAAKnB,aAAarB,SAASsC;QAE3FM,iBAAiBX,iBAAiBO;IACpC;IAEA,IAAMkB,aAAa,SAAChB;QAClB,IAAIiB;QAEJ,IAAI9B,SAAS;YACX,IAAI+B,gBAAgB3B,iBAAiBO;YACrC,IAAMqB,mBAAmB,AAACD,gBAAgBlB,EAAE5B,WAAY,MAAM;YAC9D8C,gBAAgBA,gBAAgBC;YAEhC,IAAItC,aAAaqC,iBAAiB,CAAC,IAAI;gBACrCjB,aAAaQ;gBACb1B,qBACES,UAAUM,SACV;oBACExB;gBACF,GACAqB;gBAEFO,iBAAiB,CAAC;YACpB,OAAO,IAAI,CAACrB,aAAaqC,iBAAiB,IAAI;gBAC5CjB,aAAaQ;gBACb1B,qBACES,UAAUM,SACV;oBACExB;gBACF,GACAqB;gBAEFO,iBAAiB;YACnB,OAAO;gBACLe,WAAW;oBACThB,aAAamB;oBACblB,iBAAiB;gBACnB;YACF;QACF,OAAO;YACLD,aAAamB;QACf;QAEAhC,WAAW;QACX6B,YAAYZ,sBAAsBY;IACpC;IAEAlE,MAAMsE,UAAU;eAAMpB,aAAamB;OAAO;QAACnB;KAAa;IAExD,IAAMjC,SAASG,SAASU,aAAaJ,WAAW,aAAaV;IAE7D,qBACE,oBAACP,mCACC,oBAAC8D,+CACK5C;QACJF,WAAWxB,2BAET2B,aAAarB,SAASsC,4BACtB;YACE2B,QAAQ;YACRC,UAAU;QACZ,CAAC,CAACxD,OAAO,EACTO,SAAS,qCACTU,oCACAE,oCACAN,sCACAL;sBAGF,oBAACd;QACCc,SAAS;QACTiD,YAAYhC;QACZiC,SAASlB;QACTmB,SAASjB;QACTkB,OAAOZ;qBAEP,oBAACM;QAAI9C,SAAS;QAA4BqD,KAAKrC;OAC5CtB,wBAAU,oBAACoD;QAAI9C,SAAS;OAA+BN,uBAExD,oBAACoD;QAAI9C,SAAS;qBACZ,oBAACb;QAAUa,SAAS;OAAqCV,WACxDW,YAAY,CAACR,wBACZ,oBAACL;QAAQY,SAAS;OAAyCC,WAG5DR,UAAU,CAACQ,0BACV,oBAAChB;QACCqE,OAAM;QACNvD,MAAK;QACLwD,YAAYxD,SAAS,SAAS,YAAY;QAC1CyD,MAAK;QACLxD,SAAS;QACTyD,SAASlC;OAER9B,UAKNE,uBAAS,oBAACmD;QAAI9C,SAAS;OAA8BL;AAMlE,EAAE"}
+{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","div","vertical","horizontal","getRootRef","onStart","onMoveX","onEnd","ref","align","appearance","size","onClick"],"mappings":"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"}

package/dist/components/Spinner/Spinner.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: 'small' | 'regular' | 'medium' | 'large';
+    disableAnimation?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */
-export declare const Spinner: React.MemoExoticComponent<({ size, children, "aria-label": ariaLabel, className, ...restProps }: SpinnerProps) => React.JSX.Element>;
+export declare const Spinner: React.MemoExoticComponent<({ size, children, "aria-label": ariaLabel, disableAnimation, className, ...restProps }: SpinnerProps) => React.JSX.Element>;

package/dist/components/Spinner/Spinner.js

@@ -11,10 +11,11 @@ var warn = warnOnce("Spinner");
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */ export var Spinner = /*#__PURE__*/ React.memo(function(_param) {
     var _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, _param_children = _param.children, children = _param_children === void 0 ? "Загружается..." : _param_children, tmp = _param[// TODO [>=6]: Удалить автоматическое приведение aria-label
-    "aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, className = _param.className, restProps = _object_without_properties(_param, [
+    "aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, disableAnimation = _param.disableAnimation, className = _param.className, restProps = _object_without_properties(_param, [
         "size",
         "children",
         "aria-label",
+        "disableAnimation",
         "className"
     ]);
     var SpinnerIcon = {
@@ -23,6 +24,12 @@ var warn = warnOnce("Spinner");
         medium: Icon32Spinner,
         large: Icon44Spinner
     }[size];
+    var center = {
+        small: 8,
+        regular: 12,
+        medium: 16,
+        large: 22
+    }[size];
     // TODO [>=6]: Удалить варнинг
     if (process.env.NODE_ENV === "development") {
         if (ariaLabel && !children) {
@@ -33,9 +40,17 @@ var warn = warnOnce("Spinner");
         role: "status"
     }, restProps), {
         className: classNames("vkuiSpinner", className)
-    }), /*#__PURE__*/ React.createElement(SpinnerIcon, {
-        className: "vkuiSpinner__self"
-    }), /*#__PURE__*/ React.createElement(VisuallyHidden, null, children !== null && children !== void 0 ? children : ariaLabel));
+    }), /*#__PURE__*/ React.createElement(SpinnerIcon, null, !disableAnimation && // TODO [a11y]: use reduced motion hook?
+    //              https://github.com/VKCOM/VKUI/pull/4673
+    /*#__PURE__*/ React.createElement("animateTransform", {
+        attributeName: "transform",
+        attributeType: "XML",
+        type: "rotate",
+        from: "0 ".concat(center, " ").concat(center),
+        to: "360 ".concat(center, " ").concat(center),
+        dur: "0.7s",
+        repeatCount: "indefinite"
+    })), /*#__PURE__*/ React.createElement(VisuallyHidden, null, children !== null && children !== void 0 ? children : ariaLabel));
 });
 Spinner.displayName = "Spinner";
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\nconst warn = warnOnce('Spinner');\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    // TODO [>=6]: Удалить автоматическое приведение aria-label\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    // TODO [>=6]: Удалить варнинг\n    if (process.env.NODE_ENV === 'development') {\n      if (ariaLabel && !children) {\n        warn(\n          'a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.',\n        );\n      }\n    }\n\n    return (\n      <span role=\"status\" {...restProps} className={classNames(styles['Spinner'], className)}>\n        <SpinnerIcon className={styles['Spinner__self']} />\n        <VisuallyHidden>{children ?? ariaLabel}</VisuallyHidden>\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","warnOnce","VisuallyHidden","warn","Spinner","memo","size","children","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","process","env","NODE_ENV","span","role","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,cAAc,QAAQ,mCAAmC;AAOlE,IAAMC,OAAOF,SAAS;AACtB;;CAEC,GACD,OAAO,IAAMG,wBAAUT,MAAMU,KAC3B;6BACEC,MAAAA,gCAAO,kDACPC,UAAAA,wCAAW,oCAEGC,aADd,2DAA2D;IAC3D,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,mBAAAA,WACGC;QALHJ;QACAC;QAEA;QACAE;;IAGA,IAAME,cAAc;QAClBC,OAAOhB;QACPiB,SAAShB;QACTiB,QAAQhB;QACRiB,OAAOhB;IACT,CAAC,CAACO,KAAK;IAEP,8BAA8B;IAC9B,IAAIU,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAIV,aAAa,CAACD,UAAU;YAC1BJ,KACE;QAEJ;IACF;IAEA,qBACE,oBAACgB;QAAKC,MAAK;OAAaV;QAAWD,WAAWT,0BAA8BS;sBAC1E,oBAACE;QAAYF,SAAS;sBACtB,oBAACP,sBAAgBK,qBAAAA,sBAAAA,WAAYC;AAGnC,GACA;AAEFJ,QAAQiB,cAAc"}
+{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n  disableAnimation?: boolean;\n}\n\nconst warn = warnOnce('Spinner');\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    // TODO [>=6]: Удалить автоматическое приведение aria-label\n    'aria-label': ariaLabel = 'Загружается...',\n    disableAnimation,\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    const center = {\n      small: 8,\n      regular: 12,\n      medium: 16,\n      large: 22,\n    }[size];\n\n    // TODO [>=6]: Удалить варнинг\n    if (process.env.NODE_ENV === 'development') {\n      if (ariaLabel && !children) {\n        warn(\n          'a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.',\n        );\n      }\n    }\n\n    return (\n      <span role=\"status\" {...restProps} className={classNames(styles['Spinner'], className)}>\n        <SpinnerIcon>\n          {!disableAnimation && (\n            // TODO [a11y]: use reduced motion hook?\n            //              https://github.com/VKCOM/VKUI/pull/4673\n            <animateTransform\n              attributeName=\"transform\"\n              attributeType=\"XML\"\n              type=\"rotate\"\n              from={`0 ${center} ${center}`}\n              to={`360 ${center} ${center}`}\n              dur=\"0.7s\"\n              repeatCount=\"indefinite\"\n            />\n          )}\n        </SpinnerIcon>\n        <VisuallyHidden>{children ?? ariaLabel}</VisuallyHidden>\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","warnOnce","VisuallyHidden","warn","Spinner","memo","size","children","ariaLabel","disableAnimation","className","restProps","SpinnerIcon","small","regular","medium","large","center","process","env","NODE_ENV","span","role","animateTransform","attributeName","attributeType","type","from","to","dur","repeatCount","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,cAAc,QAAQ,mCAAmC;AAQlE,IAAMC,OAAOF,SAAS;AACtB;;CAEC,GACD,OAAO,IAAMG,wBAAUT,MAAMU,IAAI,CAC/B;6BACEC,MAAAA,gCAAO,kDACPC,UAAAA,wCAAW,oCAEGC,aADd,2DAA2D;IAC3D,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,0BAAAA,kBACAC,mBAAAA,WACGC;QANHL;QACAC;QAEA;QACAE;QACAC;;IAGA,IAAME,cAAc;QAClBC,OAAOjB;QACPkB,SAASjB;QACTkB,QAAQjB;QACRkB,OAAOjB;IACT,CAAC,CAACO,KAAK;IAEP,IAAMW,SAAS;QACbJ,OAAO;QACPC,SAAS;QACTC,QAAQ;QACRC,OAAO;IACT,CAAC,CAACV,KAAK;IAEP,8BAA8B;IAC9B,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIZ,aAAa,CAACD,UAAU;YAC1BJ,KACE;QAEJ;IACF;IAEA,qBACE,oBAACkB;QAAKC,MAAK;OAAaX;QAAWD,WAAWV,0BAA8BU;sBAC1E,oBAACE,mBACE,CAACH,oBACA,wCAAwC;IACxC,uDAAuD;kBACvD,oBAACc;QACCC,eAAc;QACdC,eAAc;QACdC,MAAK;QACLC,MAAM,AAAC,KAAcV,OAAVA,QAAO,KAAU,OAAPA;QACrBW,IAAI,AAAC,OAAgBX,OAAVA,QAAO,KAAU,OAAPA;QACrBY,KAAI;QACJC,aAAY;uBAIlB,oBAAC5B,sBAAgBK,qBAAAA,sBAAAA,WAAYC;AAGnC,GACA;AAEFJ,QAAQ2B,WAAW,GAAG"}

package/dist/components/SplitCol/SplitCol.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","SplitColContext","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","matches","warn","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef","process","env","NODE_ENV","div","ref","Provider","value"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAC/F,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,oBAAoB;AAGpD,IAAMC,uBAAuB;IAC3BC,MAAMX,2CAA+C;IACrDY,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,IAAM,AAAEC,YAAchB,gBAAdgB;IACR,IAA8BlB,mCAAAA,MAAMmB,SAASC,QAAQH,mBAA9CI,UAAuBrB,oBAAdsB,aAActB;IAC9B,IAAMuB,eAAepB;IAErBH,MAAMwB,UAAU;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BH,WAAWL;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BH,WAAWJ,YAAYb,UAAUqB;YACjC;QACF;QAEA,oDAAoD;QACpD,IAAMC,WAAW;mBAAML,WAAW,CAACC,aAAaT,gBAAgBc;;QAChED;QAEApB,0BAA0BgB,aAAaT,iBAAiBa;QACxD,OAAO;YACLnB,6BAA6Be,aAAaT,iBAAiBa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOF;AACT;AA2BA,IAAMQ,OAAOpB,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMqB,WAAW,SAACC;IACvB,IACEC,WAYED,MAZFC,UACAC,QAWEF,MAXFE,OACAC,WAUEH,MAVFG,UACAC,WASEJ,MATFI,UACAC,SAQEL,MARFK,QACAf,AAASJ,cAOPc,MAPFV,SACAgB,QAMEN,MANFM,OACAC,QAKEP,MALFO,OACAC,aAIER,MAJFQ,YACAC,oBAGET,MAHFS,mBACAC,YAEEV,MAFFU,WACGC,uCACDX;QAZFC;QACAC;QACAC;QACAC;QACAC;QACAf;QACAgB;QACAC;QACAC;QACAC;QACAC;;IAGF,IAAME,UAAU3C,MAAM4C,OAAuB;IAC7C,IAAM,AAAE1B,YAAchB,gBAAdgB;IACR,IAAMG,UAAUL,qBAAqBC;IAErC,IAAM4B,eAAezC,cAAc;QACjC0C,QAAQH;QACRtB,SAAAA;IACF;IAEA,IAAI0B,QAAQC,IAAIC,aAAa,iBAAiBb,WAAWX,WAAW;QAClE,6BAA6B;QAC7BI,KAAK;IACP;IAEA,qBACE,oBAACqB,+CACKR;QACJJ,OAAO,wCACFA;YACHL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZgB,KAAKR;QACLF,WAAWxC,2BAETK,qBAAqBK,sBAAsBO,YAC3CkB,UAAUnC,mCAAuC,iCACjDmC,WAAWX,aACTxB,wCAA4C,sCAC9CsC,cACEtC,wCAA4C,sCAC9CoC,gCACAG,0DACAC;sBAGF,oBAAC/B,gBAAgB0C;QAASC,OAAOR;OAC9BR,sBAAQ,oBAACa;QAAIT,SAAS;OAAmCT,YAAkBA;AAIpF,EAAE"}
+{"version":3,"sources":["../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","SplitColContext","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","matches","warn","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef","process","env","NODE_ENV","div","ref","Provider","value"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAC/F,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,oBAAoB;AAGpD,IAAMC,uBAAuB;IAC3BC,MAAMX,2CAA+C;IACrDY,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,IAAM,AAAEC,YAAchB,gBAAdgB;IACR,IAA8BlB,mCAAAA,MAAMmB,QAAQ,CAACC,QAAQH,mBAA9CI,UAAuBrB,oBAAdsB,aAActB;IAC9B,IAAMuB,eAAepB;IAErBH,MAAMwB,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BH,WAAWL;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BH,WAAWJ,YAAYb,UAAUqB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,IAAMC,WAAW;mBAAML,WAAW,CAACC,aAAaT,eAAe,CAACc,OAAO;;QACvED;QAEApB,0BAA0BgB,aAAaT,eAAe,EAAEa;QACxD,OAAO;YACLnB,6BAA6Be,aAAaT,eAAe,EAAEa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOF;AACT;AA2BA,IAAMQ,OAAOpB,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMqB,WAAW,SAACC;IACvB,IACEC,WAYED,MAZFC,UACAC,QAWEF,MAXFE,OACAC,WAUEH,MAVFG,UACAC,WASEJ,MATFI,UACAC,SAQEL,MARFK,QACAf,AAASJ,cAOPc,MAPFV,SACAgB,QAMEN,MANFM,OACAC,QAKEP,MALFO,OACAC,aAIER,MAJFQ,YACAC,oBAGET,MAHFS,mBACAC,YAEEV,MAFFU,WACGC,uCACDX;QAZFC;QACAC;QACAC;QACAC;QACAC;QACAf;QACAgB;QACAC;QACAC;QACAC;QACAC;;IAGF,IAAME,UAAU3C,MAAM4C,MAAM,CAAiB;IAC7C,IAAM,AAAE1B,YAAchB,gBAAdgB;IACR,IAAMG,UAAUL,qBAAqBC;IAErC,IAAM4B,eAAezC,cAAc;QACjC0C,QAAQH;QACRtB,SAAAA;IACF;IAEA,IAAI0B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBb,WAAWX,WAAW;QAClE,6BAA6B;QAC7BI,KAAK;IACP;IAEA,qBACE,oBAACqB,+CACKR;QACJJ,OAAO,wCACFA;YACHL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZgB,KAAKR;QACLF,WAAWxC,2BAETK,qBAAqBK,sBAAsBO,YAC3CkB,UAAUnC,mCAAuC,iCACjDmC,WAAWX,aACTxB,wCAA4C,sCAC9CsC,cACEtC,wCAA4C,sCAC9CoC,gCACAG,0DACAC;sBAGF,oBAAC/B,gBAAgB0C,QAAQ;QAACC,OAAOR;OAC9BR,sBAAQ,oBAACa;QAAIT,SAAS;OAAmCT,YAAkBA;AAIpF,EAAE"}

package/dist/components/SplitCol/SplitColContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,IAAMC,gCAAkBD,MAAME,cAAoC;IACvEC,QAAQ;IACRC,SAAS;AACX,GAAG;AAEH,OAAO,IAAMC,cAAc;WAAML,MAAMM,WAAWL;EAAiB"}
+{"version":3,"sources":["../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,IAAMC,gCAAkBD,MAAME,aAAa,CAAuB;IACvEC,QAAQ;IACRC,SAAS;AACX,GAAG;AAEH,OAAO,IAAMC,cAAc;WAAML,MAAMM,UAAU,CAACL;EAAiB"}

package/dist/components/SplitLayout/SplitLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","PopoutRoot","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS","div","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AAkBtD;;CAEC,GACD,OAAO,IAAMC,cAAc;QACzBC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWZ;IAEjB,qBACE,oBAACE;QACCQ,WAAWX,8BAETa,aAAaX,SAASY;QAExBT,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,oBAACQ,+CACKH;QACJI,KAAKN;QACLC,WAAWX,qCAET,CAAC,CAACO,4CACFI;QAGDH;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","PopoutRoot","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS","div","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AAkBtD;;CAEC,GACD,OAAO,IAAMC,cAAc;QACzBC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWZ;IAEjB,qBACE,oBAACE;QACCQ,WAAWX,8BAETa,aAAaX,SAASY,GAAG;QAE3BT,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,oBAACQ,+CACKH;QACJI,KAAKN;QACLC,WAAWX,qCAET,CAAC,CAACO,4CACFI;QAGDH;AAIT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"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  expandable?: 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  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","Tappable","Caption","Subhead","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","s","m","l","primary","outline","tertiary","REGULAR","span","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC;IACJC,IAAI;GACHL,SAASM;AA6BZ,IAAMC,gCAAgC;QACpCC,mBAAAA,WACGC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,oBAACL,SAAYM;IACtB;IAEA,qBAAO,oBAACP;QAAQQ,OAAOF,cAAc,MAAM,MAAM;OAASC;AAC5D;AAEA;;CAEC,GACD,OAAO,IAAME,sBAAsB;6BACjCC,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,oCACAN,WAAAA,0CAAY,wBACZO,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACGV;QATHG;QACAC;QACAC;QACAN;QACAO;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BpB,iBAAAA,wCAAAA,eAAnBqB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACnB,kDACKQ;QACJY,WAAW;QACXC,kBAAiB;QACjBH,WAAWrB,sCAET;YACEyB,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACZ,KAAK,EACP;YACEa,OAAO;YACPC,OAAO;YACPC,QAAQ;QACV,CAAC,CAAChB,KAAK,EACPE,iDACAM,UAAUpB,SAAS6B,WAAWzB,eAAe,CAACgB,MAAM,EACpDD;sBAGF,oBAACW;QAAKX,SAAS;OACZJ,wBAAU,oBAACe;QAAKX,SAAS;OAA0CJ,uBACpE,oBAACR;QACCC,WAAWA;QACXW,SAAS;QACTY,WAAU;OAETb,WAEFF,uBAAS,oBAACc;QAAKX,SAAS;OAAyCH,QACjEC,4BAAc,oBAACpB;QAAesB,SAAS;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"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  expandable?: 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  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","Tappable","Caption","Subhead","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","s","m","l","primary","outline","tertiary","REGULAR","span","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AA6BnB,IAAMC,gCAAgC;QACpCC,mBAAAA,WACGC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,oBAACL,SAAYM;IACtB;IAEA,qBAAO,oBAACP;QAAQQ,OAAOF,cAAc,MAAM,MAAM;OAASC;AAC5D;AAEA;;CAEC,GACD,OAAO,IAAME,sBAAsB;6BACjCC,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,oCACAN,WAAAA,0CAAY,wBACZO,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACGV;QATHG;QACAC;QACAC;QACAN;QACAO;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BpB,iBAAAA,wCAAAA,eAAnBqB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACnB,kDACKQ;QACJY,WAAW;QACXC,kBAAiB;QACjBH,WAAWrB,sCAET;YACEyB,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACZ,KAAK,EACP;YACEa,OAAO;YACPC,OAAO;YACPC,QAAQ;QACV,CAAC,CAAChB,KAAK,EACPE,iDACAM,UAAUpB,SAAS6B,OAAO,IAAIzB,eAAe,CAACgB,MAAM,EACpDD;sBAGF,oBAACW;QAAKX,SAAS;OACZJ,wBAAU,oBAACe;QAAKX,SAAS;OAA0CJ,uBACpE,oBAACR;QACCC,WAAWA;QACXW,SAAS;QACTY,WAAU;OAETb,WAEFF,uBAAS,oBAACc;QAAKX,SAAS;OAAyCH,QACjEC,4BAAc,oBAACpB;QAAesB,SAAS;;AAIhD,EAAE"}

package/dist/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      onBlur={callMultiple(onBlur, restProps.onBlur)}\n      onFocus={callMultiple(onFocus, restProps.onFocus)}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","Platform","FocusVisible","VisuallyHidden","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","getRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","label","IOS","REGULAR","disabled","ref","Component","type","span","aria-hidden","visible","mode"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,IAAMC;IACJC,IAAI;GACHN,SAASO;AAQZ;;CAEC,GACD,OAAO,IAAMC,SAAS;QAAGC,eAAAA,OAAOC,mBAAAA,WAAWC,oBAAAA,YAAYC,gBAAAA,QAAWC;QAAzCJ;QAAOC;QAAWC;QAAYC;;IACrD,IAAME,WAAWf;IACjB,IAA2BF,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAChB,IAA0CjB,mBAAAA,mBAAlCkB,eAAkClB,iBAAlCkB,cAAcC,SAAoBnB,iBAApBmB,QAAQC,UAAYpB,iBAAZoB;IAE9B,qBACE,oBAACC;QACCT,WAAWd,yBAETkB,aAAaZ,SAASkB,0BACtBL,UAAUf,SAASqB,WAAWhB,eAAe,CAACU,MAAM,EACpDF,UAAUS,oCACVZ;QAEFD,OAAOA;QACPc,KAAKZ;QACLM,QAAQhB,aAAagB,QAAQJ,UAAUI;QACvCC,SAASjB,aAAaiB,SAASL,UAAUK;qBAEzC,oBAACd,wDACKS;QACJW,WAAU;QACVb,YAAYC;QACZa,MAAK;QACLf,SAAS;uBAEX,oBAACgB;QAAKC,eAAAA;QAAYjB,SAAS;sBAC3B,oBAACP;QAAayB,SAASZ;QAAca,MAAK;;AAGhD,EAAE"}
+{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      onBlur={callMultiple(onBlur, restProps.onBlur)}\n      onFocus={callMultiple(onFocus, restProps.onFocus)}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","Platform","FocusVisible","VisuallyHidden","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","getRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","label","IOS","REGULAR","disabled","ref","Component","type","span","aria-hidden","visible","mode"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAQnB;;CAEC,GACD,OAAO,IAAMC,SAAS;QAAGC,eAAAA,OAAOC,mBAAAA,WAAWC,oBAAAA,YAAYC,gBAAAA,QAAWC;QAAzCJ;QAAOC;QAAWC;QAAYC;;IACrD,IAAME,WAAWf;IACjB,IAA2BF,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAChB,IAA0CjB,mBAAAA,mBAAlCkB,eAAkClB,iBAAlCkB,cAAcC,SAAoBnB,iBAApBmB,QAAQC,UAAYpB,iBAAZoB;IAE9B,qBACE,oBAACC;QACCT,WAAWd,yBAETkB,aAAaZ,SAASkB,GAAG,uBACzBL,UAAUf,SAASqB,OAAO,IAAIhB,eAAe,CAACU,MAAM,EACpDF,UAAUS,QAAQ,4BAClBZ;QAEFD,OAAOA;QACPc,KAAKZ;QACLM,QAAQhB,aAAagB,QAAQJ,UAAUI,MAAM;QAC7CC,SAASjB,aAAaiB,SAASL,UAAUK,OAAO;qBAEhD,oBAACd,wDACKS;QACJW,WAAU;QACVb,YAAYC;QACZa,MAAK;QACLf,SAAS;uBAEX,oBAACgB;QAAKC,eAAAA;QAAYjB,SAAS;sBAC3B,oBAACP;QAAayB,SAASZ;QAAca,MAAK;;AAGhD,EAAE"}

package/dist/components/Tabbar/Tabbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","div","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAc9C,IAAMC,0BAA0B,SAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOL,MAAMO,SAASC,MAAMF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,IAAMK,SAAS;QAAGH,kBAAAA,iCAAUI,QAAAA,oCAAS,sBAAMC,cAAAA,MAAMC,mBAAAA,WAAcC;QAA7CP;QAAUI;QAAeC;QAAMC;;IACtD,IAAME,WAAWZ;IAEjB,qBACE,oBAACa;QACCH,WAAWX,WACT,oCAEAa,aAAaX,SAASa,0BACtBZ,wBAAwBO,MAAML,WAC9BI,gCACAE;OAEEC,YAEHP;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","div","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAc9C,IAAMC,0BAA0B,SAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOL,MAAMO,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,IAAMK,SAAS;QAAGH,kBAAAA,iCAAUI,QAAAA,oCAAS,sBAAMC,cAAAA,MAAMC,mBAAAA,WAAcC;QAA7CP;QAAUI;QAAeC;QAAMC;;IACtD,IAAME,WAAWZ;IAEjB,qBACE,oBAACa;QACCH,WAAWX,WACT,oCAEAa,aAAaX,SAASa,GAAG,uBACzBZ,wBAAwBO,MAAML,WAC9BI,gCACAE;OAEEC,YAEHP;AAGP,EAAE"}

package/dist/components/TabbarItem/TabbarItem.js

@@ -34,7 +34,7 @@ var warn = warnOnce("TabbarItem");
         ref: getRootRef,
         disabled: disabled,
         href: href,
-        className: classNames("vkuiTabbarItem", platform === Platform.IOS && "vkuiTabbarItem--ios", platform === Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", !!text && "vkuiTabbarItem--text", className)
+        className: classNames("vkuiTabbarItem", platform === Platform.IOS && "vkuiTabbarItem--ios", platform === Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", className)
     }), /*#__PURE__*/ React.createElement(Tappable, {
         role: "presentation",
         Component: "div",

package/dist/components/TabbarItem/TabbarItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  getRootRef,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","getRootRef","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","ref","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAkB3D,IAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMI,aAAa;QACxBC,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,6BACzBE,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWlB;IAEjB,IAAImB,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAMC,oBAAoBX,QAAQM,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBhB,KAAKJ,gBAAgBqB,IAAI,CAACV,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,oBAACA,mDACKI;QACJO,KAAKR;QACLF,UAAUA;QACVF,MAAMA;QACNG,WAAWjB,6BAEToB,aAAajB,SAASwB,8BACtBP,aAAajB,SAASyB,sCACtBjB,wCACA,CAAC,CAACE,gCACFI;sBAGF,oBAACX;QACCuB,MAAK;QACLd,WAAU;QACVC,UAAUA;QACVc,YACEV,aAAajB,SAASwB,2CAA+C;QAEvEI,mBAAmBX,aAAajB,SAASwB,MAAM,IAAI;QACnDK,UAAU;QACVf,SAAS;sBAEX,oBAACgB;QAAIhB,SAAS;qBACZ,oBAACgB;QAAIhB,SAAS;OACXP,wBACD,oBAACuB;QAAIhB,WAAU;OACZhB,aAAaW,cAAcA,aAG/BC,sBACC,oBAACN;QAASQ,WAAU;QAAME,SAAS;QAA8BiB,QAAO;OACrErB;AAMb,EAAE"}
+{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  getRootRef,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","getRootRef","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","ref","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAkB3D,IAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMI,aAAa;QACxBC,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,6BACzBE,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWlB;IAEjB,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBX,QAAQM,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBhB,KAAKJ,gBAAgBqB,IAAI,CAACV,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,oBAACA,mDACKI;QACJO,KAAKR;QACLF,UAAUA;QACVF,MAAMA;QACNG,WAAWjB,6BAEToB,aAAajB,SAASwB,GAAG,2BACzBP,aAAajB,SAASyB,OAAO,+BAC7BjB,wCACAM;sBAGF,oBAACX;QACCuB,MAAK;QACLd,WAAU;QACVC,UAAUA;QACVc,YACEV,aAAajB,SAASwB,GAAG,wCAA4C;QAEvEI,mBAAmBX,aAAajB,SAASwB,GAAG,GAAG,IAAI;QACnDK,UAAU;QACVf,SAAS;sBAEX,oBAACgB;QAAIhB,SAAS;qBACZ,oBAACgB;QAAIhB,SAAS;OACXP,wBACD,oBAACuB;QAAIhB,WAAU;OACZhB,aAAaW,cAAcA,aAG/BC,sBACC,oBAACN;QAASQ,WAAU;QAAME,SAAS;QAA8BiB,QAAO;OACrErB;AAMb,EAAE"}