@vkontakte/vkui 5.4.3 → 5.5.1

package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js

@@ -8,35 +8,35 @@ Object.defineProperty(exports, "SubnavigationButton", {
         return SubnavigationButton;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _adaptivity = require("../../lib/adaptivity");
-var _tappable = require("../Tappable/Tappable");
-var _caption = require("../Typography/Caption/Caption");
-var _subhead = require("../Typography/Subhead/Subhead");
-var sizeYClassNames = _defineProperty({
+var _Tappable = require("../Tappable/Tappable");
+var _Caption = require("../Typography/Caption/Caption");
+var _Subhead = require("../Typography/Subhead/Subhead");
+var sizeYClassNames = _define_property._({
     none: "vkuiSubnavigationButton--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiSubnavigationButton--sizeY-compact");
 var SubnavigationButtonTypography = function(_param) {
-    var textLevel = _param.textLevel, restProps = _objectWithoutProperties(_param, [
+    var textLevel = _param.textLevel, restProps = _object_without_properties._(_param, [
         "textLevel"
     ]);
     if (textLevel === "1") {
-        return /*#__PURE__*/ _react.createElement(_subhead.Subhead, restProps);
+        return /*#__PURE__*/ _react.createElement(_Subhead.Subhead, restProps);
     }
-    return /*#__PURE__*/ _react.createElement(_caption.Caption, _objectSpread({
+    return /*#__PURE__*/ _react.createElement(_Caption.Caption, _object_spread._({
         level: textLevel === "2" ? "1" : "2"
     }, restProps));
 };
 var SubnavigationButton = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, selected = _param.selected, _param_textLevel = _param.textLevel, textLevel = _param_textLevel === void 0 ? "1" : _param_textLevel, before = _param.before, after = _param.after, expandable = _param.expandable, children = _param.children, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, selected = _param.selected, _param_textLevel = _param.textLevel, textLevel = _param_textLevel === void 0 ? "1" : _param_textLevel, before = _param.before, after = _param.after, expandable = _param.expandable, children = _param.children, className = _param.className, restProps = _object_without_properties._(_param, [
         "mode",
         "size",
         "selected",
@@ -48,7 +48,7 @@ var SubnavigationButton = function(_param) {
         "className"
     ]);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
-    return /*#__PURE__*/ _react.createElement(_tappable.Tappable, _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread_props._(_object_spread._({}, restProps), {
         hasActive: false,
         focusVisibleMode: "outside",
         className: (0, _vkjs.classNames)("vkuiSubnavigationButton", {

package/dist/cjs/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":["SubnavigationButton","sizeYClassNames","none","SizeType","COMPACT","SubnavigationButtonTypography","textLevel","restProps","Subhead","Caption","level","mode","size","selected","before","after","expandable","children","className","useAdaptivity","sizeY","Tappable","hasActive","focusVisibleMode","classNames","s","m","l","primary","outline","tertiary","REGULAR","span","Component","Icon16Dropdown"],"mappings":";;;;+BAwDaA;;;eAAAA;;;;;;;;2DAxDU;qBACQ;oBACJ;6BACG;0BACL;wBAEe;uBAChB;uBACA;AAGxB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA6BnB,IAAMC,gCAAgC,iBAGI;QAFxCC,mBAAAA,WACGC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,qBAACE,gBAAO,EAAKD;IACtB,CAAC;IAED,qBAAO,qBAACE,gBAAO;QAACC,OAAOJ,cAAc,MAAM,MAAM,GAAG;OAAMC;AAC5D;AAKO,IAAMP,sBAAsB,iBAWH;6BAV9BW,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,oCACAP,WAAAA,0CAAY,wBACZQ,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACGX;QATHI;QACAC;QACAC;QACAP;QACAQ;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ,uCACHd;QACJe,WAAW,KAAK;QAChBC,kBAAiB;QACjBL,WAAWM,IAAAA,gBAAU,6BAEnB;YACEC,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACf,KAAK,EACP;YACEgB,OAAO;YACPC,OAAO;YACPC,QAAQ;QACV,CAAC,CAACnB,KAAK,EACPE,iDACAO,UAAUjB,oBAAQ,CAAC4B,OAAO,IAAI9B,eAAe,CAACmB,MAAM,EACpDF;sBAGF,qBAACc;QAAKd,SAAS;OACZJ,wBAAU,qBAACkB;QAAKd,SAAS;OAA0CJ,uBACpE,qBAACT;QACCC,WAAWA;QACXY,SAAS;QACTe,WAAU;OAEThB,WAEFF,uBAAS,qBAACiB;QAAKd,SAAS;OAAyCH,QACjEC,4BAAc,qBAACkB,qBAAc;QAAChB,SAAS;;AAIhD"}
+{"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":["SubnavigationButton","sizeYClassNames","none","SizeType","COMPACT","SubnavigationButtonTypography","textLevel","restProps","Subhead","Caption","level","mode","size","selected","before","after","expandable","children","className","useAdaptivity","sizeY","Tappable","hasActive","focusVisibleMode","classNames","s","m","l","primary","outline","tertiary","REGULAR","span","Component","Icon16Dropdown"],"mappings":";;;;+BAwDaA;;;eAAAA;;;;;;;;+DAxDU;qBACQ;oBACJ;6BACG;0BACL;wBAEe;uBAChB;uBACA;AAGxB,IAAMC;IACJC,IAAI;GACHC,qBAASC;AA6BZ,IAAMC,gCAAgC;QACpCC,mBAAAA,WACGC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,qBAACE,kBAAYD;IACtB;IAEA,qBAAO,qBAACE;QAAQC,OAAOJ,cAAc,MAAM,MAAM;OAASC;AAC5D;AAKO,IAAMP,sBAAsB;6BACjCW,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,oCACAP,WAAAA,0CAAY,wBACZQ,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACGX;QATHI;QACAC;QACAC;QACAP;QACAQ;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,gEACKd;QACJe,WAAW;QACXC,kBAAiB;QACjBL,WAAWM,IAAAA,6CAET;YACEC,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACf,KAAK,EACP;YACEgB,OAAO;YACPC,OAAO;YACPC,QAAQ;QACV,CAAC,CAACnB,KAAK,EACPE,iDACAO,UAAUjB,qBAAS4B,WAAW9B,eAAe,CAACmB,MAAM,EACpDF;sBAGF,qBAACc;QAAKd,SAAS;OACZJ,wBAAU,qBAACkB;QAAKd,SAAS;OAA0CJ,uBACpE,qBAACT;QACCC,WAAWA;QACXY,SAAS;QACTe,WAAU;OAEThB,WAEFF,uBAAS,qBAACiB;QAAKd,SAAS;OAAyCH,QACjEC,4BAAc,qBAACkB;QAAehB,SAAS;;AAIhD"}

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

@@ -5,4 +5,4 @@ export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */
-export declare const Switch: ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => JSX.Element;
+export declare const Switch: ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => React.JSX.Element;

package/dist/cjs/components/Switch/Switch.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "Switch", {
         return Switch;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useFocusVisible = require("../../hooks/useFocusVisible");
@@ -21,13 +21,13 @@ var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
 var _callMultiple = require("../../lib/callMultiple");
 var _platform = require("../../lib/platform");
-var _focusVisible = require("../FocusVisible/FocusVisible");
-var _visuallyHidden = require("../VisuallyHidden/VisuallyHidden");
-var sizeYClassNames = _defineProperty({
+var _FocusVisible = require("../FocusVisible/FocusVisible");
+var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
+var sizeYClassNames = _define_property._({
     none: "vkuiSwitch--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiSwitch--sizeY-compact");
 var Switch = function(_param) {
-    var style = _param.style, className = _param.className, getRootRef = _param.getRootRef, getRef = _param.getRef, restProps = _objectWithoutProperties(_param, [
+    var style = _param.style, className = _param.className, getRootRef = _param.getRootRef, getRef = _param.getRef, restProps = _object_without_properties._(_param, [
         "style",
         "className",
         "getRootRef",
@@ -42,7 +42,7 @@ var Switch = function(_param) {
         ref: getRootRef,
         onBlur: (0, _callMultiple.callMultiple)(onBlur, restProps.onBlur),
         onFocus: (0, _callMultiple.callMultiple)(onFocus, restProps.onFocus)
-    }, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, _objectSpreadProps(_objectSpread({}, restProps), {
+    }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, _object_spread_props._(_object_spread._({}, restProps), {
         Component: "input",
         getRootRef: getRef,
         type: "checkbox",
@@ -50,7 +50,7 @@ var Switch = function(_param) {
     })), /*#__PURE__*/ _react.createElement("span", {
         "aria-hidden": true,
         className: "vkuiSwitch__pseudo"
-    }), /*#__PURE__*/ _react.createElement(_focusVisible.FocusVisible, {
+    }), /*#__PURE__*/ _react.createElement(_FocusVisible.FocusVisible, {
         visible: focusVisible,
         mode: "outside"
     }));

package/dist/cjs/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":["Switch","sizeYClassNames","none","SizeType","COMPACT","style","className","getRootRef","getRef","restProps","platform","usePlatform","useAdaptivity","sizeY","useFocusVisible","focusVisible","onBlur","onFocus","label","classNames","Platform","IOS","REGULAR","disabled","ref","callMultiple","VisuallyHidden","Component","type","span","aria-hidden","FocusVisible","visible","mode"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;;2DA1BU;oBACI;6BACG;+BACE;2BACJ;0BACH;4BACI;wBACJ;4BAEI;8BACE;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAWZ,IAAMJ,SAAS,iBAAyE;QAAtEK,eAAAA,OAAOC,mBAAAA,WAAWC,oBAAAA,YAAYC,gBAAAA,QAAWC;QAAzCJ;QAAOC;QAAWC;QAAYC;;IACrD,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA0CC,oBAAAA,IAAAA,gCAAe,KAAjDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAE9B,qBACE,qBAACC;QACCZ,WAAWa,IAAAA,gBAAU,gBAEnBT,aAAaU,kBAAQ,CAACC,GAAG,uBACzBR,UAAUV,oBAAQ,CAACmB,OAAO,IAAIrB,eAAe,CAACY,MAAM,EACpDJ,UAAUc,QAAQ,4BAClBjB;QAEFD,OAAOA;QACPmB,KAAKjB;QACLS,QAAQS,IAAAA,0BAAY,EAACT,QAAQP,UAAUO,MAAM;QAC7CC,SAASQ,IAAAA,0BAAY,EAACR,SAASR,UAAUQ,OAAO;qBAEhD,qBAACS,8BAAc,uCACTjB;QACJkB,WAAU;QACVpB,YAAYC;QACZoB,MAAK;QACLtB,SAAS;uBAEX,qBAACuB;QAAKC,eAAAA,IAAW;QAACxB,SAAS;sBAC3B,qBAACyB,0BAAY;QAACC,SAASjB;QAAckB,MAAK;;AAGhD"}
+{"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":["Switch","sizeYClassNames","none","SizeType","COMPACT","style","className","getRootRef","getRef","restProps","platform","usePlatform","useAdaptivity","sizeY","useFocusVisible","focusVisible","onBlur","onFocus","label","classNames","Platform","IOS","REGULAR","disabled","ref","callMultiple","VisuallyHidden","Component","type","span","aria-hidden","FocusVisible","visible","mode"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;;+DA1BU;oBACI;6BACG;+BACE;2BACJ;0BACH;4BACI;wBACJ;4BAEI;8BACE;AAG/B,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAWL,IAAMJ,SAAS;QAAGK,eAAAA,OAAOC,mBAAAA,WAAWC,oBAAAA,YAAYC,gBAAAA,QAAWC;QAAzCJ;QAAOC;QAAWC;QAAYC;;IACrD,IAAME,WAAWC,IAAAA;IACjB,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA0CC,oBAAAA,IAAAA,qCAAlCC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAE9B,qBACE,qBAACC;QACCZ,WAAWa,IAAAA,gCAETT,aAAaU,mBAASC,0BACtBR,UAAUV,qBAASmB,WAAWrB,eAAe,CAACY,MAAM,EACpDJ,UAAUc,oCACVjB;QAEFD,OAAOA;QACPmB,KAAKjB;QACLS,QAAQS,IAAAA,4BAAaT,QAAQP,UAAUO;QACvCC,SAASQ,IAAAA,4BAAaR,SAASR,UAAUQ;qBAEzC,qBAACS,4EACKjB;QACJkB,WAAU;QACVpB,YAAYC;QACZoB,MAAK;QACLtB,SAAS;uBAEX,qBAACuB;QAAKC,eAAAA;QAAYxB,SAAS;sBAC3B,qBAACyB;QAAaC,SAASjB;QAAckB,MAAK;;AAGhD"}

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

@@ -12,4 +12,4 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
  */
-export declare const Tabbar: ({ children, shadow, mode, className, ...restProps }: TabbarProps) => JSX.Element;
+export declare const Tabbar: ({ children, shadow, mode, className, ...restProps }: TabbarProps) => React.JSX.Element;

package/dist/cjs/components/Tabbar/Tabbar.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "Tabbar", {
         return Tabbar;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
@@ -26,14 +26,14 @@ var getItemsLayoutClassName = function(itemsLayout, children) {
     }
 };
 var Tabbar = function(_param) {
-    var children = _param.children, _param_shadow = _param.shadow, shadow = _param_shadow === void 0 ? true : _param_shadow, mode = _param.mode, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var children = _param.children, _param_shadow = _param.shadow, shadow = _param_shadow === void 0 ? true : _param_shadow, mode = _param.mode, className = _param.className, restProps = _object_without_properties._(_param, [
         "children",
         "shadow",
         "mode",
         "className"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    return /*#__PURE__*/ _react.createElement("div", _objectSpread({
+    return /*#__PURE__*/ _react.createElement("div", _object_spread._({
         className: (0, _vkjs.classNames)("vkuiInternalTabbar", "vkuiTabbar", platform === _platform.Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
     }, restProps), children);
 };

package/dist/cjs/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":["Tabbar","getItemsLayoutClassName","itemsLayout","children","React","Children","count","shadow","mode","className","restProps","platform","usePlatform","div","classNames","Platform","IOS"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;2DApCU;oBACI;2BACC;wBACH;AAczB,IAAMC,0BAA0B,SAC9BC,aACAC,UACW;IACX,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOE,OAAMC,QAAQ,CAACC,KAAK,CAACH,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE,CAAC;IACjD;AACF;AAKO,IAAMD,SAAS,iBAA6E;QAA1EG,kBAAAA,iCAAUI,QAAAA,oCAAS,IAAI,kBAAEC,cAAAA,MAAMC,mBAAAA,WAAcC;QAA7CP;QAAUI;QAAeC;QAAMC;;IACtD,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC;QACCJ,WAAWK,IAAAA,gBAAU,EACnB,oCAEAH,aAAaI,kBAAQ,CAACC,GAAG,uBACzBf,wBAAwBO,MAAML,WAC9BI,gCACAE;OAEEC,YAEHP;AAGP"}
+{"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":["Tabbar","getItemsLayoutClassName","itemsLayout","children","React","Children","count","shadow","mode","className","restProps","platform","usePlatform","div","classNames","Platform","IOS"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;+DApCU;oBACI;2BACC;wBACH;AAczB,IAAMC,0BAA0B,SAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOE,OAAMC,SAASC,MAAMH,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAKO,IAAMD,SAAS;QAAGG,kBAAAA,iCAAUI,QAAAA,oCAAS,sBAAMC,cAAAA,MAAMC,mBAAAA,WAAcC;QAA7CP;QAAUI;QAAeC;QAAMC;;IACtD,IAAME,WAAWC,IAAAA;IAEjB,qBACE,qBAACC;QACCJ,WAAWK,IAAAA,kBACT,oCAEAH,aAAaI,mBAASC,0BACtBf,wBAAwBO,MAAML,WAC9BI,gCACAE;OAEEC,YAEHP;AAGP"}

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

@@ -14,4 +14,4 @@ export interface TabbarItemProps extends React.AllHTMLAttributes<HTMLElement>, H
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */
-export declare const TabbarItem: ({ children, selected, indicator, text, href, Component, disabled, className, ...restProps }: TabbarItemProps) => JSX.Element;
+export declare const TabbarItem: ({ children, selected, indicator, text, href, Component, disabled, className, ...restProps }: TabbarItemProps) => React.JSX.Element;

package/dist/cjs/components/TabbarItem/TabbarItem.js

@@ -8,20 +8,20 @@ Object.defineProperty(exports, "TabbarItem", {
         return TabbarItem;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
 var _warnOnce = require("../../lib/warnOnce");
-var _tappable = require("../Tappable/Tappable");
-var _footnote = require("../Typography/Footnote/Footnote");
+var _Tappable = require("../Tappable/Tappable");
+var _Footnote = require("../Typography/Footnote/Footnote");
 var warn = (0, _warnOnce.warnOnce)("TabbarItem");
 var TabbarItem = function(_param) {
-    var children = _param.children, selected = _param.selected, indicator = _param.indicator, text = _param.text, href = _param.href, _param_Component = _param.Component, Component = _param_Component === void 0 ? href ? "a" : "button" : _param_Component, disabled = _param.disabled, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var children = _param.children, selected = _param.selected, indicator = _param.indicator, text = _param.text, href = _param.href, _param_Component = _param.Component, Component = _param_Component === void 0 ? href ? "a" : "button" : _param_Component, disabled = _param.disabled, className = _param.className, restProps = _object_without_properties._(_param, [
         "children",
         "selected",
         "indicator",
@@ -38,11 +38,11 @@ var TabbarItem = function(_param) {
             warn(_warnOnce.COMMON_WARNINGS.a11y[Component === "a" ? "link-name" : "button-name"], "error");
         }
     }
-    return /*#__PURE__*/ _react.createElement(Component, _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement(Component, _object_spread_props._(_object_spread._({}, restProps), {
         disabled: disabled,
         href: href,
         className: (0, _vkjs.classNames)("vkuiTabbarItem", platform === _platform.Platform.IOS && "vkuiTabbarItem--ios", platform === _platform.Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", !!text && "vkuiTabbarItem--text", className)
-    }), /*#__PURE__*/ _react.createElement(_tappable.Tappable, {
+    }), /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
         role: "presentation",
         Component: "div",
         disabled: disabled,
@@ -56,7 +56,7 @@ var TabbarItem = function(_param) {
         className: "vkuiTabbarItem__icon"
     }, children, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiInternalTabbarItem__label"
-    }, (0, _vkjs.hasReactNode)(indicator) && indicator)), text && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
+    }, (0, _vkjs.hasReactNode)(indicator) && indicator)), text && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         Component: "div",
         className: "vkuiTabbarItem__text",
         weight: "2"

package/dist/cjs/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  ...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      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":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","classNames","Platform","IOS","ANDROID","Tappable","role","activeMode","activeEffectDelay","hasHover","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;2DA9BU;oBACkB;2BACb;wBACH;wBACiB;wBAEjB;wBACA;AAkBzB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMF,aAAa,iBAUH;QATrBG,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,QAAQ,qBACjCE,kBAAAA,UACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBX,QAAQK,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBhB,KAAKiB,yBAAe,CAACC,IAAI,CAACX,cAAc,MAAM,cAAc,aAAa,CAAC,EAAE;QAC9E,CAAC;IACH,CAAC;IAED,qBACE,qBAACA,gDACKG;QACJF,UAAUA;QACVF,MAAMA;QACNG,WAAWU,IAAAA,gBAAU,oBAEnBR,aAAaS,kBAAQ,CAACC,GAAG,2BACzBV,aAAaS,kBAAQ,CAACE,OAAO,+BAC7BnB,wCACA,CAAC,CAACE,gCACFI;sBAGF,qBAACc,kBAAQ;QACPC,MAAK;QACLjB,WAAU;QACVC,UAAUA;QACViB,YACEd,aAAaS,kBAAQ,CAACC,GAAG,wCAA4C,YAAY;QAEnFK,mBAAmBf,aAAaS,kBAAQ,CAACC,GAAG,GAAG,IAAI,GAAG;QACtDM,UAAU,KAAK;QACflB,SAAS;sBAEX,qBAACmB;QAAInB,SAAS;qBACZ,qBAACmB;QAAInB,SAAS;OACXP,wBACD,qBAAC0B;QAAInB,WAAU;OACZoB,IAAAA,kBAAY,EAACzB,cAAcA,aAG/BC,sBACC,qBAACyB,kBAAQ;QAACvB,WAAU;QAAME,SAAS;QAA8BsB,QAAO;OACrE1B;AAMb"}
+{"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  ...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      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":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","classNames","Platform","IOS","ANDROID","Tappable","role","activeMode","activeEffectDelay","hasHover","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;+DA9BU;oBACkB;2BACb;wBACH;wBACiB;wBAEjB;wBACA;AAkBzB,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMF,aAAa;QACxBG,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,6BACzBE,kBAAAA,UACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IAEjB,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAMC,oBAAoBX,QAAQK,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBhB,KAAKiB,0BAAgBC,IAAI,CAACX,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,qBAACA,uDACKG;QACJF,UAAUA;QACVF,MAAMA;QACNG,WAAWU,IAAAA,oCAETR,aAAaS,mBAASC,8BACtBV,aAAaS,mBAASE,sCACtBnB,wCACA,CAAC,CAACE,gCACFI;sBAGF,qBAACc;QACCC,MAAK;QACLjB,WAAU;QACVC,UAAUA;QACViB,YACEd,aAAaS,mBAASC,2CAA+C;QAEvEK,mBAAmBf,aAAaS,mBAASC,MAAM,IAAI;QACnDM,UAAU;QACVlB,SAAS;sBAEX,qBAACmB;QAAInB,SAAS;qBACZ,qBAACmB;QAAInB,SAAS;OACXP,wBACD,qBAAC0B;QAAInB,WAAU;OACZoB,IAAAA,oBAAazB,cAAcA,aAG/BC,sBACC,qBAACyB;QAASvB,WAAU;QAAME,SAAS;QAA8BsB,QAAO;OACrE1B;AAMb"}

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

@@ -11,4 +11,4 @@ export declare const TabsModeContext: React.Context<TabsContextProps>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */
-export declare const Tabs: ({ children, mode, getRootRef, className, role, ...restProps }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ children, mode, getRootRef, className, role, ...restProps }: TabsProps) => React.JSX.Element;

package/dist/cjs/components/Tabs/Tabs.js

@@ -16,11 +16,11 @@ _export(exports, {
         return Tabs;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _usePlatform = require("../../hooks/usePlatform");
@@ -32,7 +32,7 @@ var TabsModeContext = /*#__PURE__*/ _react.createContext({
     withGaps: false
 });
 var Tabs = function(_param) {
-    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, getRootRef = _param.getRootRef, className = _param.className, _param_role = _param.role, role = _param_role === void 0 ? "tablist" : _param_role, restProps = _objectWithoutProperties(_param, [
+    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, getRootRef = _param.getRootRef, className = _param.className, _param_role = _param.role, role = _param_role === void 0 ? "tablist" : _param_role, restProps = _object_without_properties._(_param, [
         "children",
         "mode",
         "getRootRef",
@@ -127,7 +127,7 @@ var Tabs = function(_param) {
     (0, _useGlobalEventListener.useGlobalEventListener)(document, "keydown", handleDocumentKeydown, {
         capture: true
     });
-    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
         ref: getRootRef,
         className: (0, _vkjs.classNames)("vkuiTabs", "vkuiInternalTabs", platform === _platform.Platform.VKCOM && "vkuiInternalTabs--vkcom", withGaps && (0, _vkjs.classNames)("vkuiTabs--withGaps", "vkuiInternalTabs--withGaps"), mode === "default" && "vkuiTabs--mode-default", className),
         role: role

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === Platform.VKCOM && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"names":["TabsModeContext","Tabs","React","createContext","mode","withGaps","children","getRootRef","className","role","restProps","platform","usePlatform","document","useDOM","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","div","ref","classNames","Platform","VKCOM","Provider","value"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === Platform.VKCOM && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"names":["TabsModeContext","Tabs","React","createContext","mode","withGaps","children","getRootRef","className","role","restProps","platform","usePlatform","document","useDOM","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","div","ref","classNames","Platform","VKCOM","Provider","value"],"mappings":"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"}

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

@@ -27,4 +27,4 @@ export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
-export declare const TabsItem: ({ before, children, status, after, selected, className, role, tabIndex: tabIndexProp, ...restProps }: TabsItemProps) => JSX.Element;
+export declare const TabsItem: ({ before, children, status, after, selected, className, role, tabIndex: tabIndexProp, ...restProps }: TabsItemProps) => React.JSX.Element;

package/dist/cjs/components/TabsItem/TabsItem.js

@@ -8,27 +8,27 @@ Object.defineProperty(exports, "TabsItem", {
         return TabsItem;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _adaptivity = require("../../lib/adaptivity");
 var _warnOnce = require("../../lib/warnOnce");
-var _tabs = require("../Tabs/Tabs");
-var _tappable = require("../Tappable/Tappable");
-var _headline = require("../Typography/Headline/Headline");
-var _subhead = require("../Typography/Subhead/Subhead");
-var _visuallyHidden = require("../VisuallyHidden/VisuallyHidden");
-var sizeYClassNames = _defineProperty({
+var _Tabs = require("../Tabs/Tabs");
+var _Tappable = require("../Tappable/Tappable");
+var _Headline = require("../Typography/Headline/Headline");
+var _Subhead = require("../Typography/Subhead/Subhead");
+var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
+var sizeYClassNames = _define_property._({
     none: "vkuiTabsItem--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiTabsItem--sizeY-compact");
 var warn = (0, _warnOnce.warnOnce)("TabsItem");
 var TabsItem = function(_param) {
-    var before = _param.before, children = _param.children, status = _param.status, after = _param.after, _param_selected = _param.selected, selected = _param_selected === void 0 ? false : _param_selected, className = _param.className, _param_role = _param.role, role = _param_role === void 0 ? "tab" : _param_role, tabIndexProp = _param.tabIndex, restProps = _objectWithoutProperties(_param, [
+    var before = _param.before, children = _param.children, status = _param.status, after = _param.after, _param_selected = _param.selected, selected = _param_selected === void 0 ? false : _param_selected, className = _param.className, _param_role = _param.role, role = _param_role === void 0 ? "tab" : _param_role, tabIndexProp = _param.tabIndex, restProps = _object_without_properties._(_param, [
         "before",
         "children",
         "status",
@@ -39,17 +39,17 @@ var TabsItem = function(_param) {
         "tabIndex"
     ]);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
-    var _React_useContext = _react.useContext(_tabs.TabsModeContext), mode = _React_useContext.mode, withGaps = _React_useContext.withGaps;
+    var _React_useContext = _react.useContext(_Tabs.TabsModeContext), mode = _React_useContext.mode, withGaps = _React_useContext.withGaps;
     var statusComponent = null;
     var isTabFlow = role === "tab";
     if (status) {
-        statusComponent = typeof status === "number" ? /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
+        statusComponent = typeof status === "number" ? /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
             Component: "span",
             className: (0, _vkjs.classNames)("vkuiTabsItem__status", "vkuiTabsItem__status--count"),
             weight: "2"
-        }, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, null, "\xa0"), status) : /*#__PURE__*/ _react.createElement("span", {
+        }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, "\xa0"), status) : /*#__PURE__*/ _react.createElement("span", {
             className: "vkuiTabsItem__status"
-        }, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, null, "\xa0"), status);
+        }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, "\xa0"), status);
     }
     if (process.env.NODE_ENV === "development" && isTabFlow) {
         if (!restProps["aria-controls"]) {
@@ -62,7 +62,7 @@ var TabsItem = function(_param) {
     if (isTabFlow && tabIndex === undefined) {
         tabIndex = selected ? 0 : -1;
     }
-    return /*#__PURE__*/ _react.createElement(_tappable.Tappable, _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiTabsItem", mode && ({
             default: "vkuiTabsItem--mode-default",
             accent: "vkuiTabsItem--mode-accent",
@@ -77,7 +77,7 @@ var TabsItem = function(_param) {
         tabIndex: tabIndex
     }), before && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiTabsItem__before"
-    }, before), /*#__PURE__*/ _react.createElement(_headline.Headline, {
+    }, before), /*#__PURE__*/ _react.createElement(_Headline.Headline, {
         Component: "span",
         className: "vkuiTabsItem__label",
         level: mode === "default" ? "1" : "2",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["TabsItem","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","Subhead","Component","classNames","weight","VisuallyHidden","span","process","env","NODE_ENV","undefined","Tappable","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","Headline","level","aria-hidden","data-selected"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;;2DAhDU;oBACI;6BACG;0BACL;wBACA;oBACyB;wBACzB;wBACA;uBACD;8BACO;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA6BnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,WAAW,iBAUH;QATnBO,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,KAAK,oBAChBC,mBAAAA,gCACAC,MAAAA,gCAAO,qBACPC,AAAUC,sBAAVD,UACGE;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BG,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA6CC,oBAAAA,OAAMC,UAAU,CAACC,qBAAe,GAArEC,OAAqCH,kBAArCG,MAAMC,WAA+BJ,kBAA/BI;IACd,IAAIC,kBAAkB,IAAI;IAE1B,IAAMC,YAAYZ,SAAS;IAE3B,IAAIJ,QAAQ;QACVe,kBACE,OAAOf,WAAW,yBAChB,qBAACiB,gBAAO;YACNC,WAAU;YACVf,WAAWgB,IAAAA,gBAAU;YACrBC,QAAO;yBAEP,qBAACC,8BAAc,QAAC,SACfrB,wBAGH,qBAACsB;YAAKnB,SAAS;yBACb,qBAACkB,8BAAc,QAAC,SACfrB,OAEJ;IACL,CAAC;IAED,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBT,WAAW;QACvD,IAAI,CAACT,SAAS,CAAC,gBAAgB,EAAE;YAC/BX,KAAM,wDAAuD;QAC/D,OAAO,IAAI,CAACW,SAAS,CAAC,KAAK,EAAE;YAC3BX,KACG,yFACD;QAEJ,CAAC;IACH,CAAC;IAED,IAAIS,WAAWC;IACf,IAAIU,aAAaX,aAAaqB,WAAW;QACvCrB,WAAWH,WAAW,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,qBACE,qBAACyB,kBAAQ,uCACHpB;QACJJ,WAAWgB,IAAAA,gBAAU,kBAEnBN,QACE,CAAA;YACEe,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAACjB,KAAK,EACTX,sCACAO,UAAUf,oBAAQ,CAACqC,OAAO,IAAIvC,eAAe,CAACiB,MAAM,EACpDK,sCACAX;QAEF6B,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW,KAAK;QAChB/B,MAAMA;QACNgC,iBAAelC;QACfG,UAAUA;QAETP,wBAAU,qBAACuC;QAAIlC,SAAS;OAA+BL,uBACxD,qBAACwC,kBAAQ;QACPpB,WAAU;QACVf,SAAS;QACToC,OAAO1B,SAAS,YAAY,MAAM,GAAG;QACrCO,QAAO;OAENrB,WAEFgB,iBACAd,uBAAS,qBAACoC;QAAIlC,SAAS;OAA8BF,QACrDY,SAAS,2BACR,qBAACwB;QAAIlC,SAAS;QAAiCqC,eAAAA,IAAW;QAACC,iBAAevC;;AAIlF"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["TabsItem","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","Subhead","Component","classNames","weight","VisuallyHidden","span","process","env","NODE_ENV","undefined","Tappable","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","Headline","level","aria-hidden","data-selected"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;;+DAhDU;oBACI;6BACG;0BACL;wBACA;oBACyB;wBACzB;wBACA;uBACD;8BACO;AAG/B,IAAMC;IACJC,IAAI;GACHC,qBAASC;AA6BZ,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMN,WAAW;QACtBO,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,yBACXC,mBAAAA,gCACAC,MAAAA,gCAAO,qBACPC,AAAUC,sBAAVD,UACGE;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BG,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA6CC,oBAAAA,OAAMC,WAAWC,wBAAtDC,OAAqCH,kBAArCG,MAAMC,WAA+BJ,kBAA/BI;IACd,IAAIC,kBAAkB;IAEtB,IAAMC,YAAYZ,SAAS;IAE3B,IAAIJ,QAAQ;QACVe,kBACE,OAAOf,WAAW,yBAChB,qBAACiB;YACCC,WAAU;YACVf,WAAWgB,IAAAA;YACXC,QAAO;yBAEP,qBAACC,sCAAe,SACfrB,wBAGH,qBAACsB;YAAKnB,SAAS;yBACb,qBAACkB,sCAAe,SACfrB;IAGT;IAEA,IAAIuB,QAAQC,IAAIC,aAAa,iBAAiBT,WAAW;QACvD,IAAI,CAACT,SAAS,CAAC,gBAAgB,EAAE;YAC/BX,KAAM,wDAAuD;QAC/D,OAAO,IAAI,CAACW,SAAS,CAAC,KAAK,EAAE;YAC3BX,KACG,yFACD;QAEJ;IACF;IAEA,IAAIS,WAAWC;IACf,IAAIU,aAAaX,aAAaqB,WAAW;QACvCrB,WAAWH,WAAW,IAAI,CAAC;IAC7B;IAEA,qBACE,qBAACyB,gEACKpB;QACJJ,WAAWgB,IAAAA,kCAETN,QACE,CAAA;YACEe,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAACjB,KAAK,EACTX,sCACAO,UAAUf,qBAASqC,WAAWvC,eAAe,CAACiB,MAAM,EACpDK,sCACAX;QAEF6B,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW;QACX/B,MAAMA;QACNgC,iBAAelC;QACfG,UAAUA;QAETP,wBAAU,qBAACuC;QAAIlC,SAAS;OAA+BL,uBACxD,qBAACwC;QACCpB,WAAU;QACVf,SAAS;QACToC,OAAO1B,SAAS,YAAY,MAAM;QAClCO,QAAO;OAENrB,WAEFgB,iBACAd,uBAAS,qBAACoC;QAAIlC,SAAS;OAA8BF,QACrDY,SAAS,2BACR,qBAACwB;QAAIlC,SAAS;QAAiCqC,eAAAA;QAAYC,iBAAevC;;AAIlF"}

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

@@ -14,6 +14,10 @@ export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElem
      * Указывает, должен ли компонент реагировать на hover-состояние
      */
     hasHover?: boolean;
+    /**
+     * Позволяет управлять hovered-состоянием извне
+     */
+    hovered?: boolean;
     /**
      * Указывает, должен ли компонент реагировать на active-состояние
      */
@@ -41,5 +45,5 @@ export declare const ACTIVE_EFFECT_DELAY = 600;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tappable
  */
-export declare const Tappable: ({ children, Component, onClick, onKeyDown: _onKeyDown, activeEffectDelay, stopPropagation, getRootRef, hasHover: _hasHover, hoverMode, hasActive: _hasActive, activeMode, focusVisibleMode, onEnter, onLeave, className, ...props }: TappableProps) => JSX.Element;
+export declare const Tappable: ({ children, Component, onClick, onKeyDown: _onKeyDown, activeEffectDelay, stopPropagation, getRootRef, hasHover: _hasHover, hoverMode, hasActive: _hasActive, activeMode, focusVisibleMode, onEnter, onLeave, className, hovered: hoveredProp, ...props }: TappableProps) => React.JSX.Element;
 export {};