@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { HasRootRef } from '../../types';
-import { VisuallyHiddenInputProps } from '../VisuallyHiddenInput/VisuallyHiddenInput';
-export interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
+export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */
-export declare const Switch: ({ style, className, getRootRef, ...restProps }: SwitchProps) => JSX.Element;
+export declare const Switch: ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => JSX.Element;

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

@@ -22,32 +22,36 @@ var _adaptivity = require("../../lib/adaptivity");
 var _callMultiple = require("../../lib/callMultiple");
 var _platform = require("../../lib/platform");
 var _focusVisible = require("../FocusVisible/FocusVisible");
-var _visuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
+var _visuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var sizeYClassNames = _defineProperty({
     none: "vkuiSwitch--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiSwitch--sizeY-compact");
 var Switch = function(_param) {
-    var style = _param.style, className = _param.className, getRootRef = _param.getRootRef, restProps = _objectWithoutProperties(_param, [
+    var style = _param.style, className = _param.className, getRootRef = _param.getRootRef, getRef = _param.getRef, restProps = _objectWithoutProperties(_param, [
         "style",
         "className",
-        "getRootRef"
+        "getRootRef",
+        "getRef"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
-    var _useFocusVisible1 = (0, _useFocusVisible.useFocusVisible)(), onBlur = _useFocusVisible1.onBlur, onFocus = _useFocusVisible1.onFocus;
+    var _useFocusVisible1 = (0, _useFocusVisible.useFocusVisible)(), focusVisible = _useFocusVisible1.focusVisible, onBlur = _useFocusVisible1.onBlur, onFocus = _useFocusVisible1.onFocus;
     return /*#__PURE__*/ _react.createElement("label", {
         className: (0, _vkjs.classNames)("vkuiSwitch", platform === _platform.Platform.IOS && "vkuiSwitch--ios", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], restProps.disabled && "vkuiSwitch--disabled", className),
         style: style,
-        ref: getRootRef
-    }, /*#__PURE__*/ _react.createElement(_visuallyHiddenInput.VisuallyHiddenInput, _objectSpreadProps(_objectSpread({}, restProps), {
-        type: "checkbox",
-        className: "vkuiSwitch__self",
+        ref: getRootRef,
         onBlur: (0, _callMultiple.callMultiple)(onBlur, restProps.onBlur),
         onFocus: (0, _callMultiple.callMultiple)(onFocus, restProps.onFocus)
+    }, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, _objectSpreadProps(_objectSpread({}, restProps), {
+        Component: "input",
+        getRootRef: getRef,
+        type: "checkbox",
+        className: "vkuiSwitch__self"
     })), /*#__PURE__*/ _react.createElement("span", {
         "aria-hidden": true,
         className: "vkuiSwitch__pseudo"
     }), /*#__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 { HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\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 extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { 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    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["Switch","sizeYClassNames","none","SizeType","COMPACT","style","className","getRootRef","restProps","platform","usePlatform","useAdaptivity","sizeY","useFocusVisible","onBlur","onFocus","label","classNames","Platform","IOS","REGULAR","disabled","ref","VisuallyHiddenInput","type","callMultiple","span","aria-hidden","FocusVisible","mode"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;;2DA1BU;oBACI;6BACG;+BACE;2BACJ;0BACH;4BACI;wBACJ;4BAEI;mCAItB;AAGP,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAQZ,IAAMJ,SAAS,iBAAiE;QAA9DK,eAAAA,OAAOC,mBAAAA,WAAWC,oBAAAA,YAAeC;QAAjCH;QAAOC;QAAWC;;IACzC,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA4BC,oBAAAA,IAAAA,gCAAe,KAAnCC,SAAoBD,kBAApBC,QAAQC,UAAYF,kBAAZE;IAEhB,qBACE,qBAACC;QACCV,WAAWW,IAAAA,gBAAU,gBAEnBR,aAAaS,kBAAQ,CAACC,GAAG,uBACzBP,UAAUT,oBAAQ,CAACiB,OAAO,IAAInB,eAAe,CAACW,MAAM,EACpDJ,UAAUa,QAAQ,4BAClBf;QAEFD,OAAOA;QACPiB,KAAKf;qBAEL,qBAACgB,wCAAmB,uCACdf;QACJgB,MAAK;QACLlB,SAAS;QACTQ,QAAQW,IAAAA,0BAAY,EAACX,QAAQN,UAAUM,MAAM;QAC7CC,SAASU,IAAAA,0BAAY,EAACV,SAASP,UAAUO,OAAO;uBAElD,qBAACW;QAAKC,eAAAA,IAAW;QAACrB,SAAS;sBAC3B,qBAACsB,0BAAY;QAACC,MAAK;;AAGzB"}
+{"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"}

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

@@ -34,10 +34,8 @@ var Tabbar = function(_param) {
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     return /*#__PURE__*/ _react.createElement("div", _objectSpread({
-        className: (0, _vkjs.classNames)("vkuiTabbar", platform === _platform.Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
-    }, restProps), /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiTabbar__in"
-    }, children));
+        className: (0, _vkjs.classNames)("vkuiInternalTabbar", "vkuiTabbar", platform === _platform.Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
+    }, restProps), children);
 };
 
 //# sourceMappingURL=Tabbar.js.map

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        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      <div className={styles['Tabbar__in']}>{children}</div>\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,gBAEnBH,aAAaI,kBAAQ,CAACC,GAAG,uBACzBf,wBAAwBO,MAAML,WAC9BI,gCACAE;OAEEC,0BAEJ,qBAACG;QAAIJ,SAAS;OAAyBN;AAG7C"}
+{"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"}

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

@@ -55,7 +55,7 @@ var TabbarItem = function(_param) {
     }, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiTabbarItem__icon"
     }, children, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiTabbarItem__label"
+        className: "vkuiInternalTabbarItem__label"
     }, (0, _vkjs.hasReactNode)(indicator) && indicator)), text && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
         Component: "div",
         className: "vkuiTabbarItem__text",

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={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</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,SAAS;OAAgCoB,IAAAA,kBAAY,EAACzB,cAAcA,aAE1EC,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;;;;;;;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"}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';
+import { AnchorHTMLAttributesOnly, HasChildren, HasComponent, HasRootRef } from '../../types';
 import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
 import { TouchProps } from '../Touch/Touch';
 type StateMode = 'opacity' | 'background';
 export type TappableElementProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'onTouchCancel' | 'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'> & AnchorHTMLAttributesOnly;
-export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {
+export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, HasChildren, Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {
     /**
      * Длительность показа active-состояния
      */
@@ -30,7 +30,6 @@ export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElem
      * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
      */
     focusVisibleMode?: FocusVisibleMode | string;
-    children?: React.ReactNode;
     onEnter?(outputEvent: MouseEvent): void;
     onLeave?(outputEvent: MouseEvent): void;
 }

package/dist/cjs/components/Tappable/Tappable.js

@@ -311,6 +311,7 @@ var Tappable = function(_param) {
         "aria-hidden": true,
         className: "vkuiTappable__stateLayer"
     }), !props.disabled && isPresetFocusVisibleMode && /*#__PURE__*/ _react.createElement(_focusVisible.FocusVisible, {
+        visible: focusVisible,
         mode: focusVisibleMode
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  children?: React.ReactNode;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = _hovered && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHover && styles['Tappable--hasHover'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      {\n        background: styles['Tappable--hover-background'],\n        opacity: styles['Tappable--hover-opacity'],\n      }[hoverMode],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      {\n        background: styles['Tappable--active-background'],\n        opacity: styles['Tappable--active-opacity'],\n      }[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","Tappable","sizeXClassNames","none","compact","WAVE_LIVE","activeBus","mitt","TapState","pending","active","exiting","TappableContext","React","createContext","onHoverChange","noop","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","useTimeout","stopTimeout","useIsomorphicLayoutEffect","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","onKeyDown","e","isCustomElement","shouldTriggerClickOnEnterOrSpace","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","getOffsetRect","top","left","coordX","coordY","onMove","isSlide","onEnd","duration","activeDuration","activeEffectDelay","children","Component","onClick","_onKeyDown","stopPropagation","getRootRef","_hasHover","hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","TouchRootContext","platform","usePlatform","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeX","hasPointerContext","useAdaptivityHasPointer","hasHoverContext","useAdaptivityHasHover","childHover","setChildHover","useBooleanState","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","hovered","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","useExternRef","childContext","useRef","Platform","ANDROID","classes","classNames","IOS","SizeType","REGULAR","background","opacity","handlers","callMultiple","role","Touch","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","FocusVisible","mode"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasChildren, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    HasChildren,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = _hovered && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHover && styles['Tappable--hasHover'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      {\n        background: styles['Tappable--hover-background'],\n        opacity: styles['Tappable--hover-opacity'],\n      }[hoverMode],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      {\n        background: styles['Tappable--active-background'],\n        opacity: styles['Tappable--active-opacity'],\n      }[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible visible={focusVisible} mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","Tappable","sizeXClassNames","none","compact","WAVE_LIVE","activeBus","mitt","TapState","pending","active","exiting","TappableContext","React","createContext","onHoverChange","noop","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","useTimeout","stopTimeout","useIsomorphicLayoutEffect","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","onKeyDown","e","isCustomElement","shouldTriggerClickOnEnterOrSpace","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","getOffsetRect","top","left","coordX","coordY","onMove","isSlide","onEnd","duration","activeDuration","activeEffectDelay","children","Component","onClick","_onKeyDown","stopPropagation","getRootRef","_hasHover","hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","TouchRootContext","platform","usePlatform","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeX","hasPointerContext","useAdaptivityHasPointer","hasHoverContext","useAdaptivityHasHover","childHover","setChildHover","useBooleanState","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","hovered","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","useExternRef","childContext","useRef","Platform","ANDROID","classes","classNames","IOS","SizeType","REGULAR","background","opacity","handlers","callMultiple","role","Touch","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","FocusVisible","visible","mode"],"mappings":";;;;;;;;;;;IA2FaA,YAAY;eAAZA;;IACAC,mBAAmB;eAAnBA;;IA8EAC,QAAQ;eAARA;;;;;;;;;;2DA1KU;oBACU;yDAChB;6BACa;qCACQ;uCACE;+BACR;4BACH;+BACG;2BACJ;0BACD;6BACsB;0BACxB;4BACI;sBACC;wBACL;qBACM;yCACW;4BAEK;sBACD;iEACjB;AAG7B,IAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAIA,IAAMC,YAAY;AA4DX,IAAMN,eAAe;AACrB,IAAMC,sBAAsB;AAEnC,IAAMM,YAAYC,IAAAA,aAAI;AACtB,IAAMC,WAAW;IAAEL,MAAM;IAAGM,SAAS;IAAGC,QAAQ;IAAGC,SAAS;AAAE;AAG9D,IAAMC,gCAAkBC,OAAMC,aAAa,CAA2B;IACpEC,eAAeC,UAAI;AACrB;AAEA,SAASC,kBAAkBC,SAA6B,EAA0B;IAChF,OAAQA;QACN,KAAK;QACL,KAAK;YACH,OAAO,IAAI;QACb;YACE,OAAO,KAAK;IAChB;AACF;AAEA,SAASC,YAAYC,SAAkB,EAAEC,SAAiB,EAAE;IAC1D,IAAMC,KAAKT,OAAMU,OAAO,CAAC;eAAMC,KAAKC,KAAK,CAACD,KAAKE,MAAM,KAAK,KAAKC,QAAQ,CAAC;OAAK,EAAE;IAE/E,IAAgCd,iCAAAA,OAAMe,QAAQ,CAC5CpB,SAASL,IAAI,OADR0B,WAAyBhB,oBAAfiB,cAAejB;IAGhC,IAAMkB,QAAQ;eAAMD,YAAYtB,SAASL,IAAI;;IAC7C,IAAM6B,QAAQ;eAAMZ,aAAaU,YAAYtB,SAASE,MAAM;;IAC5D,IAAMuB,aAAa,WAAM;QACvBb,aAAaU,YAAYtB,SAASC,OAAO;IAC3C;IAEA,IAAMyB,gBAAgBC,IAAAA,sBAAU,EAACH,OAAOjC;IACxC,IAAMqC,cAAcD,IAAAA,sBAAU,EAACJ,OAAOV;IAEtCgB,IAAAA,oDAAyB,EAAC,WAAM;QAC9B,IAAIR,aAAarB,SAASC,OAAO,EAAE;YACjCyB,cAAcI,GAAG;YACjB,OAAOJ,cAAcK,KAAK;QAC5B,CAAC;QACD,IAAIV,aAAarB,SAASG,OAAO,EAAE;YACjC,OAAOyB,YAAYG,KAAK;QAC1B,CAAC;QACD,IAAIV,aAAarB,SAASE,MAAM,EAAE;YAChCJ,UAAUkC,IAAI,CAAC,UAAUlB;QAC3B,CAAC;QACD,OAAON,UAAI;IACb,GAAG;QAACa;KAAS;IAEbQ,IAAAA,oDAAyB,EAAC,WAAM;QAC9B,IAAIR,aAAarB,SAASL,IAAI,EAAE;YAC9B,OAAOa,UAAI;QACb,CAAC;QACD,IAAMyB,iBAAiB,SAACC,UAAqB;YAC3CA,aAAapB,MAAMS;QACrB;QACAzB,UAAUqC,EAAE,CAAC,UAAUF;QACvB,OAAO;mBAAMnC,UAAUsC,GAAG,CAAC,UAAUH;;IACvC,GAAG;QAACZ,aAAarB,SAASL,IAAI;KAAC;IAE/BkC,IAAAA,oDAAyB,EAAC,WAAM;QAC9B,CAACjB,aAAaW;IAChB,GAAG;QAACX;KAAU;IAEd,IAAMyB,OAAO,SAACC,OAAmB;QAC/B,IAAIA,OAAO;YACThB,YAAYtB,SAASG,OAAO;YAC5B,OAAOyB,YAAYE,GAAG,CAACQ;QACzB,CAAC;QACDf;IACF;IAEA,OAAO;QAACF;QAAU;YAAEI,YAAAA;YAAYD,OAAAA;YAAOa,MAAAA;QAAK;KAAE;AAChD;AAKO,IAAM5C,WAAW,iBAiBH;QAkDV8C,YAPT;;;;;;GAMC,GACD,SAASA,UAAUC,CAAmC,EAAE;QACtD,IAAIC,mBAAmBC,IAAAA,+CAAgC,EAACF,IAAI;gBAE1DG;YADAH,EAAEI,cAAc;YAChBD,CAAAA,wBAAAA,aAAaE,OAAO,cAApBF,mCAAAA,KAAAA,IAAAA,sBAAsBG;QACxB,CAAC;IACH;QAOSC,WAAT,SAASA,SAASC,CAAS,EAAEC,CAAS,EAAE;QACtC,IAAMC,UAAUC,KAAKC,GAAG;QACxB,IAAMC,iBAAiBC,OAAOC,MAAM,CAAC,SAACT;mBAAUA,MAAMhC,EAAE,GAAGjB,YAAYqD;;QAEvEM,UAAU,AAAC,mBAAGH,uBAAJ;YAAoB;gBAAEL,GAAAA;gBAAGC,GAAAA;gBAAGnC,IAAIoC;YAAQ;SAAE;QACpDO,YAAY3B,GAAG;IACjB;QAES4B,UAAT,SAASA,QAAQ,KAA6B,EAAE;YAA/B,AAAEC,gBAAF,MAAEA;QACjB,IAAI/C,WAAW;YACb,IAAI+C,cAAcC,OAAO,IAAID,cAAcC,OAAO,CAACC,MAAM,GAAG,GAAG;gBAC7D,+EAA+E;gBAC/E,OAAOxB;YACT,CAAC;YAED,IAAIyB,WAAW;gBACb,IAAsBC,iBAAAA,IAAAA,qBAAa,EAACpB,aAAaE,OAAO,GAAhDmB,MAAcD,eAAdC,KAAKC,OAASF,eAATE;gBACb,IAAMjB,IAAIkB,IAAAA,aAAM,EAACP,iBAAkBM,CAAAA,iBAAAA,kBAAAA,OAAQ,CAAC,AAAD;gBAC3C,IAAMhB,IAAIkB,IAAAA,aAAM,EAACR,iBAAkBK,CAAAA,gBAAAA,iBAAAA,MAAO,CAAC,AAAD;gBAC1CjB,SAASC,GAAGC;YACd,CAAC;YAEDxB;QACF,CAAC;IACH;QAES2C,SAAT,SAASA,OAAO,KAAuB,EAAE;YAAzB,AAAEC,UAAF,MAAEA;QAChB,IAAIA,SAAS;YACXhC;QACF,CAAC;IACH;QAESiC,QAAT,SAASA,MAAM,KAAwB,EAAE;YAA1B,AAAEC,WAAF,MAAEA;QACf,IAAIlD,aAAarB,SAASL,IAAI,EAAE;YAC9B;QACF,CAAC;QACD,IAAI0B,aAAarB,SAASC,OAAO,EAAE;YACjC,iCAAiC;YACjCuB;QACF,CAAC;QAED,0CAA0C;QAC1C,IAAMgD,iBAAiBD,WAAWhF;QAClC8C,KAAKmC,kBAAkB,MAAM,IAAIC,oBAAoBD,cAAc;IACrE;QA1HAE,kBAAAA,UACAC,mBAAAA,WACAC,iBAAAA,SACArC,AAAWsC,oBAAXtC,6CACAkC,mBAAAA,0DAAoBjF,gFACpBsF,iBAAAA,sDAAkB,KAAK,2BACvBC,oBAAAA,YACUC,aAAVC,UAAUD,YAAAA,iBAAY,IAAI,GAAhBA,+BACVE,WAAAA,0CAAY,iCACDC,cAAXvE,WAAWuE,aAAAA,kBAAa,IAAI,GAAjBA,iCACXC,YAAAA,4CAAa,mEACbC,kBAAAA,wDAAmB,oCACnBC,iBAAAA,SACAC,iBAAAA,SACAC,mBAAAA,WACGC;QAfHf;QACAC;QACAC;QACArC;QACAkC;QACAK;QACAC;QACAE;QACAC;QACAtE;QACAwE;QACAC;QACAC;QACAC;QACAC;;IAGAb,YAAYA,aAAec,CAAAA,MAAMC,IAAI,GAAG,MAAM,KAAK,AAAD;IAElD,IAAM,AAAEnF,gBAAkBF,OAAMsF,UAAU,CAACvF,iBAAnCG;IACR,IAAMqF,kBAAkBvF,OAAMsF,UAAU,CAACE,qBAAgB;IACzD,IAAMC,WAAWC,IAAAA,wBAAW;IAC5B,IAA0CC,oBAAAA,IAAAA,gCAAe,KAAjDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAC9B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,oBAAoBC,IAAAA,gDAAuB;IACjD,IAAMC,kBAAkBC,IAAAA,4CAAqB;IAE7C,IAA4BpG,iCAAAA,OAAMe,QAAQ,CAAS,EAAE,OAA9CkC,SAAqBjD,oBAAbmD,YAAanD;IAC5B,IAAoCA,kCAAAA,OAAMe,QAAQ,CAAC,KAAK,OAAjDsF,aAA6BrG,qBAAjBsG,gBAAiBtG;IACpC,IAIIuG,oBAAAA,IAAAA,gCAAe,EAAC,KAAK,GAHvBC,AAAOC,WAGLF,kBAHFC,OACAE,AAASC,iBAEPJ,kBAFFG,SACAE,AAAUC,kBACRN,kBADFK;IAGF,IAAME,UAAUL,YAAY,CAACrB,MAAM2B,QAAQ;IAC3C,IAAMxG,YAAYuE,cAAc,CAACuB,cAAc,CAACjB,MAAM2B,QAAQ;IAC9D,IAAMnC,WAAWuB,mBAAmBxB,aAAa,CAAC0B;IAClD,IAAMjE,kBACJkC,cAAc,OAAOA,cAAc,YAAYA,cAAc,WAAW,CAACc,MAAM4B,eAAe;IAChG,IAAMC,oBAAoB7G,kBAAkByE;IAC5C,IAAMqC,qBAAqB9G,kBAAkB2E;IAC7C,IAAMoC,2BAA2B;QAAC;QAAU;KAAU,CAACC,QAAQ,CAACpC;IAEhE,IAAgD1E,8BAAAA,YAAYC,WAAW6D,wBAAhEpD,WAAyCV,iCAAAA,iBAA7Ba,sBAAAA,OAAOa,qBAAAA,MAAMZ,2BAAAA;IAChC,IAAMvB,SAASmB,aAAarB,SAASE,MAAM,IAAImB,aAAarB,SAASG,OAAO;IAE5E,IAAMwC,eAAe+E,IAAAA,0BAAY,EAAC3C;IAElC,oBAAoB;IACpB,IAAM4C,eAAetH,OAAMuH,MAAM,CAAC;QAAErH,eAAeoG;IAAc,GAAG9D,OAAO;IAC3EhB,IAAAA,oDAAyB,EAAC,WAAM;QAC9B,IAAI,CAACsF,SAAS;YACZ,OAAO3G,UAAI;QACb,CAAC;QACDD,cAAc,IAAI;QAClB,OAAO;mBAAMA,cAAc,KAAK;;IAClC,GAAG;QAAC4G;KAAQ;IAgBZ,IAAMrD,YACJgC,aAAa+B,kBAAQ,CAACC,OAAO,IAAI,CAACxB,qBAAqB1F,aAAawE,eAAe;IAErF,IAAM3B,cAAc9B,IAAAA,sBAAU,EAAC;eAAM6B,UAAU,EAAE;OAAG3D;IAgDpD,IAAMkI,UAAUC,IAAAA,gBAAU,EACxBxC,2BAEA,wBACAM,aAAa+B,kBAAQ,CAACI,GAAG,yBACzB5B,UAAU6B,oBAAQ,CAACC,OAAO,IAAIzI,eAAe,CAAC2G,MAAM,EACpDpB,sCACArE,wCACAqE,YAAYkC,WAAW,CAACG,qBAAqBpC,WAC7CtE,aAAaV,UAAU,CAACqH,sBAAsBnC,YAC9Ca,gBAAgB,CAACuB,4BAA4BnC,kBAC7CJ,YACEkC,WACAG,qBACA,CAAA;QACEc,UAAU;QACVC,OAAO;IACT,CAAA,CAAC,CAACnD,UAAU,EACdtE,aACEV,UACAqH,sBACA,CAAA;QACEa,UAAU;QACVC,OAAO;IACT,CAAA,CAAC,CAACjD,WAAW,EACfa;IAGF,IAAMqC,WAA+B;QACnC5E,SAAS6E,IAAAA,0BAAY,EAAC7E,SAAS+B,MAAM/B,OAAO;QAC5CU,QAAQmE,IAAAA,0BAAY,EAACnE,QAAQqB,MAAMrB,MAAM;QACzCE,OAAOiE,IAAAA,0BAAY,EAACjE,OAAOmB,MAAMnB,KAAK;QACtCM,SAAAA;QACArC,WAAWgG,IAAAA,0BAAY,EAAChG,WAAWsC;IACrC;IACA,IAAM2D,OAAO/C,MAAMC,IAAI,GAAG,SAAS,QAAQ;IAE3C,qBACE,qBAAC+C,aAAK;QACJnD,SAASiD,IAAAA,0BAAY,EAACvB,gBAAgB1B;QACtCC,SAASgD,IAAAA,0BAAY,EAACrB,iBAAiB3B;QACvCmD,MAAM/D,cAAc,WAAW,WAAWgE,SAAS;QACnDC,UAAUnG,mBAAmB,CAACgD,MAAM2B,QAAQ,GAAG,IAAIuB,SAAS;QAC5DH,MAAM/F,kBAAkB+F,OAAOG,SAAS;QACxCE,iBAAepG,kBAAkBgD,MAAM2B,QAAQ,GAAGuB,SAAS;QAC3D7D,iBAAiBA,mBAAmB,CAACc,mBAAmB,CAACH,MAAM2B,QAAQ;OACnE3B;QACJqD,gBAAgB;QAChBC,iBAAAA,IAAe;QACfvD,WAAWuC;QACXpD,WAAWA;QACXI,YAAYpC;QACZuD,QAAQqC,IAAAA,0BAAY,EAACrC,QAAQT,MAAMS,MAAM;QACzCC,SAASoC,IAAAA,0BAAY,EAACpC,SAASV,MAAMU,OAAO;QACvCV,MAAM2B,QAAQ,GAAG,CAAC,IAAIkB,QAAQ,iBAEnC,qBAAClI,gBAAgB4I,QAAQ;QAACnC,OAAOc;OAAejD,WAC/CZ,2BACC,qBAACmF;QAAKC,eAAAA,IAAW;QAAC1D,SAAS;OACxBlC,OAAO6F,GAAG,CAAC,SAACC;6BACX,qBAACH;YACCI,KAAKD,KAAKtI,EAAE;YACZ0E,SAAS;YACT8D,OAAO;gBAAEtF,KAAKoF,KAAKnG,CAAC;gBAAEgB,MAAMmF,KAAKpG,CAAC;YAAC;;SAK1C,AAAC,CAAA,AAACiC,YAAYC,cAAc,gBAAkBtE,aAAawE,eAAe,YAAY,mBACrF,qBAAC6D;QAAKC,eAAAA,IAAW;QAAC1D,SAAS;QAE5B,CAACC,MAAM2B,QAAQ,IAAII,0CAClB,qBAAC+B,0BAAY;QAACC,SAASvD;QAAcwD,MAAMpE;;AAInD"}

package/dist/cjs/components/Typography/Caption/Caption.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { HasCaps, TypographyProps } from '../types';
+import { HasCaps, TypographyProps } from '../Typography';
 export interface CaptionProps extends TypographyProps, HasCaps {
     level?: '1' | '2' | '3';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Caption
  */
-export declare const Caption: ({ className, children, weight, level, caps, Component, ...restProps }: CaptionProps) => JSX.Element;
+export declare const Caption: ({ className, level, caps, Component, normalize, ...restProps }: CaptionProps) => JSX.Element;

package/dist/cjs/components/Typography/Caption/Caption.js

@@ -10,30 +10,27 @@ Object.defineProperty(exports, "Caption", {
 });
 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 _vkjs = require("@vkontakte/vkjs");
+var _typography = require("../Typography");
 var Caption = function(_param) {
-    var className = _param.className, children = _param.children, weight = _param.weight, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, caps = _param.caps, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, restProps = _objectWithoutProperties(_param, [
+    var className = _param.className, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, caps = _param.caps, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _objectWithoutProperties(_param, [
         "className",
-        "children",
-        "weight",
         "level",
         "caps",
-        "Component"
+        "Component",
+        "normalize"
     ]);
-    return /*#__PURE__*/ _react.createElement(Component, _objectSpreadProps(_objectSpread({}, restProps), {
-        className: (0, _vkjs.classNames)(className, "vkuiCaption", caps && "vkuiCaption--caps", {
+    return /*#__PURE__*/ _react.createElement(_typography.Typography, _objectSpread({
+        Component: Component,
+        normalize: normalize,
+        className: (0, _vkjs.classNames)(className, caps && "vkuiCaption--caps", {
             "1": "vkuiCaption--level-1",
             "2": "vkuiCaption--level-2",
             "3": "vkuiCaption--level-3"
-        }[level], weight && ({
-            "1": "vkuiCaption--weight-1",
-            "2": "vkuiCaption--weight-2",
-            "3": "vkuiCaption--weight-3"
-        })[weight])
-    }), children);
+        }[level])
+    }, restProps));
 };
 
 //# sourceMappingURL=Caption.js.map

package/dist/cjs/components/Typography/Caption/Caption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, TypographyProps } from '../types';\nimport styles from './Caption.module.css';\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  children,\n  weight,\n  level = '1',\n  caps,\n  Component = 'span',\n  ...restProps\n}: CaptionProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        className,\n        styles['Caption'],\n        caps && styles['Caption--caps'],\n        {\n          '1': styles['Caption--level-1'],\n          '2': styles['Caption--level-2'],\n          '3': styles['Caption--level-3'],\n        }[level],\n        weight &&\n          {\n            '1': styles['Caption--weight-1'],\n            '2': styles['Caption--weight-2'],\n            '3': styles['Caption--weight-3'],\n          }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["Caption","className","children","weight","level","caps","Component","restProps","classNames"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;2DAZU;oBACI;AAWpB,IAAMA,UAAU,iBAQH;QAPlBC,mBAAAA,WACAC,kBAAAA,UACAC,gBAAAA,8BACAC,OAAAA,kCAAQ,oBACRC,cAAAA,gCACAC,WAAAA,0CAAY,2BACTC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACA,gDACKC;QACJN,WAAWO,IAAAA,gBAAU,EACnBP,0BAEAI,6BACA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACD,MAAM,EACRD,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;QAGZD;AAGP"}
+{"version":3,"sources":["../../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, Typography, TypographyProps } from '../Typography';\nimport styles from './Caption.module.css';\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  level = '1',\n  caps,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: CaptionProps) => {\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        caps && styles['Caption--caps'],\n        {\n          '1': styles['Caption--level-1'],\n          '2': styles['Caption--level-2'],\n          '3': styles['Caption--level-3'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Caption","className","level","caps","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;2DAZU;oBACI;0BAC0B;AAU9C,IAAMA,UAAU,iBAOH;QANlBC,mBAAAA,iCACAC,OAAAA,kCAAQ,oBACRC,cAAAA,gCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,IAAI,qBACbC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,sBAAU;QACTH,WAAWA;QACXC,WAAWA;QACXJ,WAAWO,IAAAA,gBAAU,EACnBP,WACAE,6BACA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACD,MAAM;OAENI;AAGV"}

package/dist/cjs/components/Typography/Footnote/Footnote.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { HasCaps, TypographyProps } from '../types';
+import { HasCaps, TypographyProps } from '../Typography';
 export interface FootnoteProps extends TypographyProps, HasCaps {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Footnote
  */
-export declare const Footnote: ({ className, children, weight, caps, Component, ...restProps }: FootnoteProps) => JSX.Element;
+export declare const Footnote: ({ className, caps, Component, normalize, ...restProps }: FootnoteProps) => JSX.Element;

package/dist/cjs/components/Typography/Footnote/Footnote.js

@@ -10,25 +10,22 @@ Object.defineProperty(exports, "Footnote", {
 });
 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 _vkjs = require("@vkontakte/vkjs");
-var Footnote = function(_param) {
-    var className = _param.className, children = _param.children, weight = _param.weight, caps = _param.caps, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, restProps = _objectWithoutProperties(_param, [
+var _typography = require("../Typography");
+var Footnote = function(_param) /*#__PURE__*/ {
+    var className = _param.className, caps = _param.caps, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _objectWithoutProperties(_param, [
         "className",
-        "children",
-        "weight",
         "caps",
-        "Component"
+        "Component",
+        "normalize"
     ]);
-    return /*#__PURE__*/ _react.createElement(Component, _objectSpreadProps(_objectSpread({}, restProps), {
-        className: (0, _vkjs.classNames)(className, "vkuiFootnote", caps && "vkuiFootnote--caps", weight && ({
-            "1": "vkuiFootnote--weight-1",
-            "2": "vkuiFootnote--weight-2",
-            "3": "vkuiFootnote--weight-3"
-        })[weight])
-    }), children);
+    return _react.createElement(_typography.Typography, _objectSpread({
+        Component: Component,
+        normalize: normalize,
+        className: (0, _vkjs.classNames)(className, "vkuiFootnote", caps && "vkuiFootnote--caps")
+    }, restProps));
 };
 
 //# sourceMappingURL=Footnote.js.map

package/dist/cjs/components/Typography/Footnote/Footnote.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Footnote/Footnote.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, TypographyProps } from '../types';\nimport styles from './Footnote.module.css';\n\nexport interface FootnoteProps extends TypographyProps, HasCaps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footnote\n */\nexport const Footnote = ({\n  className,\n  children,\n  weight,\n  caps,\n  Component = 'span',\n  ...restProps\n}: FootnoteProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        className,\n        styles['Footnote'],\n        caps && styles['Footnote--caps'],\n        weight &&\n          {\n            '1': styles['Footnote--weight-1'],\n            '2': styles['Footnote--weight-2'],\n            '3': styles['Footnote--weight-3'],\n          }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["Footnote","className","children","weight","caps","Component","restProps","classNames"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;;2DAVU;oBACI;AASpB,IAAMA,WAAW,iBAOH;QANnBC,mBAAAA,WACAC,kBAAAA,UACAC,gBAAAA,QACAC,cAAAA,gCACAC,WAAAA,0CAAY,2BACTC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACA,gDACKC;QACJL,WAAWM,IAAAA,gBAAU,EACnBN,2BAEAG,8BACAD,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;QAGZD;AAGP"}
+{"version":3,"sources":["../../../../../src/components/Typography/Footnote/Footnote.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, Typography, TypographyProps } from '../Typography';\nimport styles from './Footnote.module.css';\n\nexport interface FootnoteProps extends TypographyProps, HasCaps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footnote\n */\nexport const Footnote = ({\n  className,\n  caps,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: FootnoteProps) => (\n  <Typography\n    Component={Component}\n    normalize={normalize}\n    className={classNames(className, styles['Footnote'], caps && styles['Footnote--caps'])}\n    {...restProps}\n  />\n);\n"],"names":["Footnote","className","caps","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;2DAVU;oBACI;0BAC0B;AAQ9C,IAAMA,WAAW,+BAOtB;QANAC,mBAAAA,WACAC,cAAAA,gCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,IAAI,qBACbC;QAJHJ;QACAC;QACAC;QACAC;;WAGA,qBAACE,sBAAU;QACTH,WAAWA;QACXC,WAAWA;QACXH,WAAWM,IAAAA,gBAAU,EAACN,2BAA+BC;OACjDG;AACL"}

package/dist/cjs/components/Typography/Headline/Headline.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { HasRootRef } from '../../../types';
-import { TypographyProps } from '../types';
-export interface HeadlineProps extends TypographyProps, HasRootRef<HTMLElement> {
+import { TypographyProps } from '../Typography';
+export interface HeadlineProps extends TypographyProps {
     level?: '1' | '2';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
-export declare const Headline: ({ className, children, weight, level, Component, getRootRef, ...restProps }: HeadlineProps) => JSX.Element;
+export declare const Headline: ({ className, weight, level, Component, normalize, ...restProps }: HeadlineProps) => JSX.Element;

package/dist/cjs/components/Typography/Headline/Headline.js

@@ -11,36 +11,33 @@ Object.defineProperty(exports, "Headline", {
 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 _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../../hooks/useAdaptivity");
 var _adaptivity = require("../../../lib/adaptivity");
+var _typography = require("../Typography");
 var sizeYClassNames = _defineProperty({
     none: "vkuiHeadline--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiHeadline--sizeY-compact");
 var Headline = function(_param) {
-    var className = _param.className, children = _param.children, _param_weight = _param.weight, weight = _param_weight === void 0 ? "3" : _param_weight, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, _param_Component = _param.Component, Component = _param_Component === void 0 ? "h4" : _param_Component, getRootRef = _param.getRootRef, restProps = _objectWithoutProperties(_param, [
+    var className = _param.className, _param_weight = _param.weight, weight = _param_weight === void 0 ? "3" : _param_weight, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, _param_Component = _param.Component, Component = _param_Component === void 0 ? "h4" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _objectWithoutProperties(_param, [
         "className",
-        "children",
         "weight",
         "level",
         "Component",
-        "getRootRef"
+        "normalize"
     ]);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
-    return /*#__PURE__*/ _react.createElement(Component, _objectSpreadProps(_objectSpread({}, restProps), {
-        ref: getRootRef,
+    return /*#__PURE__*/ _react.createElement(_typography.Typography, _objectSpread({
+        Component: Component,
+        normalize: normalize,
+        weight: weight,
         className: (0, _vkjs.classNames)(className, "vkuiHeadline", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], {
             "1": "vkuiHeadline--level-1",
             "2": "vkuiHeadline--level-2"
-        }[level], {
-            "1": "vkuiHeadline--weight-1",
-            "2": "vkuiHeadline--weight-2",
-            "3": "vkuiHeadline--weight-3"
-        }[weight])
-    }), children);
+        }[level])
+    }, restProps));
 };
 
 //# sourceMappingURL=Headline.js.map

package/dist/cjs/components/Typography/Headline/Headline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Headline/Headline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { HasRootRef } from '../../../types';\nimport { TypographyProps } from '../types';\nimport styles from './Headline.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Headline--sizeY-none'],\n  [SizeType.COMPACT]: styles['Headline--sizeY-compact'],\n};\n\nexport interface HeadlineProps extends TypographyProps, HasRootRef<HTMLElement> {\n  level?: '1' | '2';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  className,\n  children,\n  weight = '3',\n  level = '1',\n  Component = 'h4',\n  getRootRef,\n  ...restProps\n}: HeadlineProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        className,\n        styles['Headline'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        {\n          '1': styles['Headline--level-1'],\n          '2': styles['Headline--level-2'],\n        }[level],\n        {\n          '1': styles['Headline--weight-1'],\n          '2': styles['Headline--weight-2'],\n          '3': styles['Headline--weight-3'],\n        }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["Headline","sizeYClassNames","none","SizeType","COMPACT","className","children","weight","level","Component","getRootRef","restProps","useAdaptivity","sizeY","ref","classNames","REGULAR"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;2DApBU;oBACI;6BACG;0BACL;AAKzB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAUZ,IAAMJ,WAAW,iBAQH;QAPnBK,mBAAAA,WACAC,kBAAAA,iCACAC,QAAAA,oCAAS,2CACTC,OAAAA,kCAAQ,8CACRC,WAAAA,0CAAY,yBACZC,oBAAAA,YACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACJ,gDACKE;QACJG,KAAKJ;QACLL,WAAWU,IAAAA,gBAAU,EACnBV,2BAEAQ,UAAUV,oBAAQ,CAACa,OAAO,IAAIf,eAAe,CAACY,MAAM,EACpD;YACE,GAAG;YACH,GAAG;QACL,CAAC,CAACL,MAAM,EACR;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACD,OAAO;QAGVD;AAGP"}
+{"version":3,"sources":["../../../../../src/components/Typography/Headline/Headline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Headline.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Headline--sizeY-none'],\n  [SizeType.COMPACT]: styles['Headline--sizeY-compact'],\n};\n\nexport interface HeadlineProps extends TypographyProps {\n  level?: '1' | '2';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  className,\n  weight = '3',\n  level = '1',\n  Component = 'h4',\n  normalize = true,\n  ...restProps\n}: HeadlineProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      weight={weight}\n      className={classNames(\n        className,\n        styles['Headline'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        {\n          '1': styles['Headline--level-1'],\n          '2': styles['Headline--level-2'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Headline","sizeYClassNames","none","SizeType","COMPACT","className","weight","level","Component","normalize","restProps","useAdaptivity","sizeY","Typography","classNames","REGULAR"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;;;;2DAnBU;oBACI;6BACG;0BACL;0BACmB;AAG5C,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAUZ,IAAMJ,WAAW,iBAOH;QANnBK,mBAAAA,kCACAC,QAAAA,oCAAS,2CACTC,OAAAA,kCAAQ,8CACRC,WAAAA,0CAAY,mDACZC,WAAAA,0CAAY,IAAI,qBACbC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,sBAAU;QACTL,WAAWA;QACXC,WAAWA;QACXH,QAAQA;QACRD,WAAWS,IAAAA,gBAAU,EACnBT,2BAEAO,UAAUT,oBAAQ,CAACY,OAAO,IAAId,eAAe,CAACW,MAAM,EACpD;YACE,GAAG;YACH,GAAG;QACL,CAAC,CAACL,MAAM;OAENG;AAGV"}

package/dist/cjs/components/Typography/Paragraph/Paragraph.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-import { HasRootRef } from '../../../types';
-import { TypographyProps } from '../types';
-export interface ParagraphProps extends TypographyProps, HasRootRef<HTMLElement> {
-}
+import { TypographyProps } from '../Typography';
+export type ParagraphProps = TypographyProps;
 /**
  * @see https://vkcom.github.io/VKUI/#/Paragraph
  */
-export declare const Paragraph: ({ className, Component, getRootRef, weight, children, ...restProps }: ParagraphProps) => JSX.Element;
+export declare const Paragraph: ({ className, Component, normalize, ...restProps }: ParagraphProps) => JSX.Element;

package/dist/cjs/components/Typography/Paragraph/Paragraph.js

@@ -10,26 +10,21 @@ Object.defineProperty(exports, "Paragraph", {
 });
 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 _vkjs = require("@vkontakte/vkjs");
+var _typography = require("../Typography");
 var Paragraph = function(_param) {
-    var className = _param.className, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, getRootRef = _param.getRootRef, weight = _param.weight, children = _param.children, restProps = _objectWithoutProperties(_param, [
+    var className = _param.className, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? false : _param_normalize, restProps = _objectWithoutProperties(_param, [
         "className",
         "Component",
-        "getRootRef",
-        "weight",
-        "children"
+        "normalize"
     ]);
-    return /*#__PURE__*/ _react.createElement(Component, _objectSpreadProps(_objectSpread({}, restProps), {
-        ref: getRootRef,
-        className: (0, _vkjs.classNames)(className, "vkuiParagraph", weight && ({
-            "1": "vkuiParagraph--weight-1",
-            "2": "vkuiParagraph--weight-2",
-            "3": "vkuiParagraph--weight-3"
-        })[weight])
-    }), children);
+    return /*#__PURE__*/ _react.createElement(_typography.Typography, _objectSpread({
+        Component: Component,
+        normalize: normalize,
+        className: (0, _vkjs.classNames)(className, "vkuiParagraph")
+    }, restProps));
 };
 
 //# sourceMappingURL=Paragraph.js.map

package/dist/cjs/components/Typography/Paragraph/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../../types';\nimport { TypographyProps } from '../types';\nimport styles from './Paragraph.module.css';\n\nexport interface ParagraphProps extends TypographyProps, HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Paragraph\n */\nexport const Paragraph = ({\n  className,\n  Component = 'span',\n  getRootRef,\n  weight,\n  children,\n  ...restProps\n}: ParagraphProps) => {\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        className,\n        styles['Paragraph'],\n        weight &&\n          {\n            '1': styles['Paragraph--weight-1'],\n            '2': styles['Paragraph--weight-2'],\n            '3': styles['Paragraph--weight-3'],\n          }[weight],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["Paragraph","className","Component","getRootRef","weight","children","restProps","ref","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;2DAXU;oBACI;AAUpB,IAAMA,YAAY,iBAOH;QANpBC,mBAAAA,qCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACH,gDACKI;QACJC,KAAKJ;QACLF,WAAWO,IAAAA,gBAAU,EACnBP,4BAEAG,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;QAGZC;AAGP"}
+{"version":3,"sources":["../../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Paragraph.module.css';\n\nexport type ParagraphProps = TypographyProps;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Paragraph\n */\nexport const Paragraph = ({\n  className,\n  Component = 'span',\n  normalize = false,\n  ...restProps\n}: ParagraphProps) => {\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(className, styles['Paragraph'])}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Paragraph","className","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;2DAVU;oBACI;0BACiB;AAQrC,IAAMA,YAAY,iBAKH;QAJpBC,mBAAAA,qCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,KAAK,qBACdC;QAHHH;QACAC;QACAC;;IAGA,qBACE,qBAACE,sBAAU;QACTH,WAAWA;QACXC,WAAWA;QACXF,WAAWK,IAAAA,gBAAU,EAACL;OAClBG;AAGV"}

package/dist/cjs/components/Typography/Subhead/Subhead.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { TypographyProps } from '../types';
+import { TypographyProps } from '../Typography';
 export type SubheadProps = TypographyProps;
 /**
  * @see https://vkcom.github.io/VKUI/#/Subhead
  */
-export declare const Subhead: ({ className, children, weight, Component, ...restProps }: SubheadProps) => JSX.Element;
+export declare const Subhead: ({ className, Component, normalize, ...restProps }: SubheadProps) => JSX.Element;