@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

package/dist/components/Spacing/Spacing.js

@@ -2,21 +2,20 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */ export var Spacing = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? 8 : _param_size, styleProp = _param.style, className = _param.className, restProps = _object_without_properties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? 8 : _param_size, styleProp = _param.style, restProps = _object_without_properties(_param, [
         "size",
-        "style",
-        "className"
+        "style"
     ]);
     var style = _object_spread({
         height: size,
         padding: "".concat(size / 2, "px 0")
     }, styleProp);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames(className, "vkuiSpacing"),
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: "vkuiSpacing",
         style: style
     }));
 };

package/dist/components/Spacing/Spacing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAW7C;;CAEC,GACD,OAAO,IAAMC,UAAU;6BAAGC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,oBAACK,+CAAQH;QAAWD,WAAWL,WAAWK;QAA+BF,OAAOA;;AACzF,EAAE"}
+{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <RootComponent {...restProps} baseClassName={styles['Spacing']} style={style} />;\n};\n"],"names":["React","RootComponent","Spacing","size","style","styleProp","restProps","height","padding","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,iCAAiC;AAU/D;;CAEC,GACD,OAAO,IAAMC,UAAU;6BAAGC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAqBE;QAA/BH;QAAUC;;IAClC,IAAMA,QAA6B;QACjCG,QAAQJ;QACRK,SAAS,AAAC,GAAW,OAATL,OAAO,GAAE;OAClBE;IAGL,qBAAO,oBAACJ,uDAAkBK;QAAWG,aAAa;QAAqBL,OAAOA;;AAChF,EAAE"}

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

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

package/dist/components/Spinner/Spinner.js

@@ -3,20 +3,19 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from "@vkontakte/icons";
-import { classNames } from "@vkontakte/vkjs";
 import { warnOnce } from "../../lib/warnOnce";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
 var warn = warnOnce("Spinner");
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */ export var Spinner = /*#__PURE__*/ React.memo(function(_param) {
     var _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, _param_children = _param.children, children = _param_children === void 0 ? "Загружается..." : _param_children, tmp = _param[// TODO [>=6]: Удалить автоматическое приведение aria-label
-    "aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, disableAnimation = _param.disableAnimation, className = _param.className, restProps = _object_without_properties(_param, [
+    "aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, disableAnimation = _param.disableAnimation, restProps = _object_without_properties(_param, [
         "size",
         "children",
         "aria-label",
-        "disableAnimation",
-        "className"
+        "disableAnimation"
     ]);
     var SpinnerIcon = {
         small: Icon16Spinner,
@@ -36,10 +35,11 @@ var warn = warnOnce("Spinner");
             warn("a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.");
         }
     }
-    return /*#__PURE__*/ React.createElement("span", _object_spread_props(_object_spread({
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({
+        Component: "span",
         role: "status"
     }, restProps), {
-        className: classNames("vkuiSpinner", className)
+        baseClassName: "vkuiSpinner"
     }), /*#__PURE__*/ React.createElement(SpinnerIcon, null, !disableAnimation && // TODO [a11y]: use reduced motion hook?
     //              https://github.com/VKCOM/VKUI/pull/4673
     /*#__PURE__*/ React.createElement("animateTransform", {

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

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

package/dist/components/SplitCol/SplitCol.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     width?: number | string;
     maxWidth?: number | string;
     minWidth?: number | string;

package/dist/components/SplitCol/SplitCol.js

@@ -5,11 +5,13 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useExternRef } from "../../hooks/useExternRef";
 import { useMediaQueries } from "../../hooks/useMediaQueries";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
 import { ViewWidth, viewWidthToClassName } from "../../lib/adaptivity";
 import { matchMediaListAddListener, matchMediaListRemoveListener } from "../../lib/matchMedia";
 import { warnOnce } from "../../lib/warnOnce";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { SplitColContext } from "./SplitColContext";
 var breakpointClassNames = {
     none: classNames("vkuiSplitCol--viewWidth-none", "vkuiInternalSplitCol--viewWidth-none"),
@@ -50,7 +52,7 @@ var warn = warnOnce("SplitCol");
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */ export var SplitCol = function(props) {
-    var children = props.children, width = props.width, maxWidth = props.maxWidth, minWidth = props.minWidth, spaced = props.spaced, animateProp = props.animate, fixed = props.fixed, style = props.style, autoSpaced = props.autoSpaced, stretchedOnMobile = props.stretchedOnMobile, className = props.className, restProps = _object_without_properties(props, [
+    var children = props.children, width = props.width, maxWidth = props.maxWidth, minWidth = props.minWidth, spaced = props.spaced, animateProp = props.animate, fixed = props.fixed, style = props.style, autoSpaced = props.autoSpaced, stretchedOnMobile = props.stretchedOnMobile, getRootRef = props.getRootRef, restProps = _object_without_properties(props, [
         "children",
         "width",
         "maxWidth",
@@ -61,9 +63,9 @@ var warn = warnOnce("SplitCol");
         "style",
         "autoSpaced",
         "stretchedOnMobile",
-        "className"
+        "getRootRef"
     ]);
-    var baseRef = React.useRef(null);
+    var baseRef = useExternRef(getRootRef);
     var viewWidth = useAdaptivity().viewWidth;
     var animate = useTransitionAnimate(animateProp);
     var contextValue = useObjectMemo({
@@ -74,14 +76,14 @@ var warn = warnOnce("SplitCol");
         // TODO [>=6]: Удалить spaced
         warn("Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced");
     }
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
         style: _object_spread_props(_object_spread({}, style), {
             width: width,
             maxWidth: maxWidth,
             minWidth: minWidth
         }),
-        ref: baseRef,
-        className: classNames("vkuiSplitCol", viewWidthToClassName(breakpointClassNames, viewWidth), spaced && classNames("vkuiSplitCol--spaced", "vkuiInternalSplitCol--spaced"), spaced === undefined && classNames("vkuiSplitCol--spaced-none", "vkuiInternalSplitCol--spaced-none"), autoSpaced && classNames("vkuiSplitCol--spaced-auto", "vkuiInternalSplitCol--spaced-auto"), fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
+        getRootRef: baseRef,
+        baseClassName: classNames("vkuiSplitCol", viewWidthToClassName(breakpointClassNames, viewWidth), spaced && classNames("vkuiSplitCol--spaced", "vkuiInternalSplitCol--spaced"), spaced === undefined && classNames("vkuiSplitCol--spaced-none", "vkuiInternalSplitCol--spaced-none"), autoSpaced && classNames("vkuiSplitCol--spaced-auto", "vkuiInternalSplitCol--spaced-auto"), fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile")
     }), /*#__PURE__*/ React.createElement(SplitColContext.Provider, {
         value: contextValue
     }, fixed ? /*#__PURE__*/ React.createElement("div", {

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

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

package/dist/components/SplitLayout/SplitLayout.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
-export interface SplitLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
+import { HasRef, HTMLAttributesWithRootRef } from '../../types';
+export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
      */

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

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

package/dist/components/SubnavigationBar/SubnavigationBar.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
-export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement>, Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
+export interface SubnavigationBarProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
     mode?: 'fixed' | 'overflow';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
  */
-export declare const SubnavigationBar: ({ mode, children, showArrows, getScrollToLeft, getScrollToRight, scrollAnimationDuration, className, ...restProps }: SubnavigationBarProps) => React.JSX.Element;
+export declare const SubnavigationBar: ({ mode, children, showArrows, getScrollToLeft, getScrollToRight, scrollAnimationDuration, ...restProps }: SubnavigationBarProps) => React.JSX.Element;

package/dist/components/SubnavigationBar/SubnavigationBar.js

@@ -1,9 +1,8 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
 import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll";
+import { RootComponent } from "../RootComponent/RootComponent";
 var defaultScrollToLeft = function(x) {
     return x - 240;
 };
@@ -13,14 +12,13 @@ var defaultScrollToRight = function(x) {
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
  */ export var SubnavigationBar = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "overflow" : _param_mode, children = _param.children, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_getScrollToLeft = _param.getScrollToLeft, getScrollToLeft = _param_getScrollToLeft === void 0 ? defaultScrollToLeft : _param_getScrollToLeft, _param_getScrollToRight = _param.getScrollToRight, getScrollToRight = _param_getScrollToRight === void 0 ? defaultScrollToRight : _param_getScrollToRight, scrollAnimationDuration = _param.scrollAnimationDuration, className = _param.className, restProps = _object_without_properties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "overflow" : _param_mode, children = _param.children, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_getScrollToLeft = _param.getScrollToLeft, getScrollToLeft = _param_getScrollToLeft === void 0 ? defaultScrollToLeft : _param_getScrollToLeft, _param_getScrollToRight = _param.getScrollToRight, getScrollToRight = _param_getScrollToRight === void 0 ? defaultScrollToRight : _param_getScrollToRight, scrollAnimationDuration = _param.scrollAnimationDuration, restProps = _object_without_properties(_param, [
         "mode",
         "children",
         "showArrows",
         "getScrollToLeft",
         "getScrollToRight",
-        "scrollAnimationDuration",
-        "className"
+        "scrollAnimationDuration"
     ]);
     var ScrollWrapper;
     var scrollWrapperProps = {};
@@ -35,14 +33,14 @@ var defaultScrollToRight = function(x) {
             scrollAnimationDuration: scrollAnimationDuration
         };
     }
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames(// TODO: [>=6]
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        // TODO: [>=6]
         // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`
         // и удалить применение селектора в `SubnavigationButton.module.css`.
         // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`
         // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')
-        mode === "fixed" && classNames("vkuiInternalSubnavigationBar--mode-fixed"), className)
-    }), /*#__PURE__*/ React.createElement(ScrollWrapper, _object_spread({
+        baseClassName: mode === "fixed" ? "vkuiInternalSubnavigationBar--mode-fixed" : undefined
+    }, restProps), /*#__PURE__*/ React.createElement(ScrollWrapper, _object_spread({
         className: "vkuiSubnavigationBar__in"
     }, scrollWrapperProps), /*#__PURE__*/ React.createElement("ul", {
         className: "vkuiSubnavigationBar__scrollIn"

package/dist/components/SubnavigationBar/SubnavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        // TODO: [>=6]\n        // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`\n        // и удалить применение селектора в `SubnavigationButton.module.css`.\n        // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`\n        // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')\n        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <ul className={styles['SubnavigationBar__scrollIn']}>\n          {React.Children.map(children, (child, idx) => (\n            <li key={idx} className={styles['SubnavigationBar__item']}>\n              {child}\n            </li>\n          ))}\n        </ul>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"names":["React","classNames","HorizontalScroll","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","div","ul","Children","map","child","idx","li","key"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,gBAAgB,QAGX,uCAAuC;AAY9C,IAAMC,sBAA6C,SAACC;WAAMA,IAAI;;AAE9D,IAAMC,uBAA8C,SAACD;WAAMA,IAAI;;AAE/D;;CAEC,GACD,OAAO,IAAME,mBAAmB;6BAC9BC,MAAAA,gCAAO,0BACPC,kBAAAA,qCACAC,YAAAA,4CAAa,0DACbC,iBAAAA,sDAAkBP,+EAClBQ,kBAAAA,wDAAmBN,gDACnBO,iCAAAA,yBACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBb;QAChBc,qBAAqB;YACnBP,YAAAA;YACAC,iBAAAA;YACAC,kBAAAA;YACAC,yBAAAA;QACF;IACF;IAEA,qBACE,oBAACK,+CACKH;QACJD,WAAWZ,WACT,cAAc;QACd,0EAA0E;QAC1E,qEAAqE;QACrE,0FAA0F;QAC1F,6EAA6E;QAC7EM,SAAS,WAAWN,WAAW,6CAC/BY;sBAGF,oBAACE;QAAcF,SAAS;OAAsCG,mCAC5D,oBAACE;QAAGL,SAAS;OACVb,MAAMmB,QAAQ,CAACC,GAAG,CAACZ,UAAU,SAACa,OAAOC;6BACpC,oBAACC;YAAGC,KAAKF;YAAKT,SAAS;WACpBQ;;AAOf,EAAE"}
+{"version":3,"sources":["../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent\n      // TODO: [>=6]\n      // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`\n      // и удалить применение селектора в `SubnavigationButton.module.css`.\n      // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`\n      // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')\n      baseClassName={mode === 'fixed' ? 'vkuiInternalSubnavigationBar--mode-fixed' : undefined}\n      {...restProps}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <ul className={styles['SubnavigationBar__scrollIn']}>\n          {React.Children.map(children, (child, idx) => (\n            <li key={idx} className={styles['SubnavigationBar__item']}>\n              {child}\n            </li>\n          ))}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["React","HorizontalScroll","RootComponent","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","undefined","className","ul","Children","map","child","idx","li","key"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAE/B,SACEC,gBAAgB,QAGX,uCAAuC;AAC9C,SAASC,aAAa,QAAQ,iCAAiC;AAY/D,IAAMC,sBAA6C,SAACC;WAAMA,IAAI;;AAE9D,IAAMC,uBAA8C,SAACD;WAAMA,IAAI;;AAE/D;;CAEC,GACD,OAAO,IAAME,mBAAmB;6BAC9BC,MAAAA,gCAAO,0BACPC,kBAAAA,qCACAC,YAAAA,4CAAa,0DACbC,iBAAAA,sDAAkBP,+EAClBQ,kBAAAA,wDAAmBN,gDACnBO,iCAAAA,yBACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,SAAS,SAAS;QACpBO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBb;QAChBc,qBAAqB;YACnBN,YAAAA;YACAC,iBAAAA;YACAC,kBAAAA;YACAC,yBAAAA;QACF;IACF;IAEA,qBACE,oBAACV;QACC,cAAc;QACd,0EAA0E;QAC1E,qEAAqE;QACrE,0FAA0F;QAC1F,6EAA6E;QAC7Ec,eAAeT,SAAS,UAAU,6CAA6CU;OAC3EJ,0BAEJ,oBAACC;QAAcI,SAAS;OAAsCH,mCAC5D,oBAACI;QAAGD,SAAS;OACVlB,MAAMoB,QAAQ,CAACC,GAAG,CAACb,UAAU,SAACc,OAAOC;6BACpC,oBAACC;YAAGC,KAAKF;YAAKL,SAAS;WACpBI;;AAOf,EAAE"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
      */
@@ -12,4 +13,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) => React.JSX.Element;
+export declare const Tabbar: ({ shadow, mode, ...restProps }: TabbarProps) => React.JSX.Element;

package/dist/components/Tabbar/Tabbar.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Platform } from "../../lib/platform";
+import { RootComponent } from "../RootComponent/RootComponent";
 var getItemsLayoutClassName = function(itemsLayout, children) {
     switch(itemsLayout){
         case "horizontal":
@@ -17,16 +18,14 @@ var getItemsLayoutClassName = function(itemsLayout, children) {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
  */ export 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 = _object_without_properties(_param, [
-        "children",
+    var _param_shadow = _param.shadow, shadow = _param_shadow === void 0 ? true : _param_shadow, mode = _param.mode, restProps = _object_without_properties(_param, [
         "shadow",
-        "mode",
-        "className"
+        "mode"
     ]);
     var platform = usePlatform();
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
-        className: classNames("vkuiInternalTabbar", "vkuiTabbar", platform === Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
-    }, restProps), children);
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: classNames("vkuiInternalTabbar", "vkuiTabbar", platform === Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, restProps.children), shadow && "vkuiTabbar--shadow")
+    }, restProps));
 };
 
 //# sourceMappingURL=Tabbar.js.map

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

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

package/dist/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, getRootRef, ...restProps }: TabbarItemProps) => React.JSX.Element;
+export declare const TabbarItem: ({ children, selected, indicator, text, href, Component, disabled, ...restProps }: TabbarItemProps) => React.JSX.Element;

package/dist/components/TabbarItem/TabbarItem.js

@@ -6,22 +6,21 @@ import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Platform } from "../../lib/platform";
 import { COMMON_WARNINGS, warnOnce } from "../../lib/warnOnce";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Tappable } from "../Tappable/Tappable";
 import { Footnote } from "../Typography/Footnote/Footnote";
 var warn = warnOnce("TabbarItem");
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */ export 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, getRootRef = _param.getRootRef, restProps = _object_without_properties(_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, restProps = _object_without_properties(_param, [
         "children",
         "selected",
         "indicator",
         "text",
         "href",
         "Component",
-        "disabled",
-        "className",
-        "getRootRef"
+        "disabled"
     ]);
     var platform = usePlatform();
     if (process.env.NODE_ENV === "development") {
@@ -30,11 +29,12 @@ var warn = warnOnce("TabbarItem");
             warn(COMMON_WARNINGS.a11y[Component === "a" ? "link-name" : "button-name"], "error");
         }
     }
-    return /*#__PURE__*/ React.createElement(Component, _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({
+        Component: Component
+    }, restProps), {
         disabled: disabled,
         href: href,
-        className: classNames("vkuiTabbarItem", platform === Platform.IOS && "vkuiTabbarItem--ios", platform === Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", className)
+        baseClassName: classNames("vkuiTabbarItem", platform === Platform.IOS && "vkuiTabbarItem--ios", platform === Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected")
     }), /*#__PURE__*/ React.createElement(Tappable, {
         role: "presentation",
         Component: "div",

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     mode?: 'default' | 'accent' | 'secondary';
 }
 export interface TabsContextProps {
@@ -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) => React.JSX.Element;
+export declare const Tabs: ({ children, mode, role, ...restProps }: TabsProps) => React.JSX.Element;

package/dist/components/Tabs/Tabs.js

@@ -8,6 +8,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { pressedKey } from "../../lib/accessibility";
 import { useDOM } from "../../lib/dom";
 import { Platform } from "../../lib/platform";
+import { RootComponent } from "../RootComponent/RootComponent";
 export var TabsModeContext = /*#__PURE__*/ React.createContext({
     mode: "default",
     withGaps: false
@@ -15,11 +16,9 @@ export var TabsModeContext = /*#__PURE__*/ React.createContext({
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */ export 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 = _object_without_properties(_param, [
+    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, _param_role = _param.role, role = _param_role === void 0 ? "tablist" : _param_role, restProps = _object_without_properties(_param, [
         "children",
         "mode",
-        "getRootRef",
-        "className",
         "role"
     ]);
     var platform = usePlatform();
@@ -110,9 +109,8 @@ export var TabsModeContext = /*#__PURE__*/ React.createContext({
     useGlobalEventListener(document, "keydown", handleDocumentKeydown, {
         capture: true
     });
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
-        className: classNames("vkuiTabs", "vkuiInternalTabs", platform === Platform.VKCOM && "vkuiInternalTabs--vkcom", withGaps && classNames("vkuiTabs--withGaps", "vkuiInternalTabs--withGaps"), mode === "default" && "vkuiTabs--mode-default", className),
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiTabs", "vkuiInternalTabs", platform === Platform.VKCOM && "vkuiInternalTabs--vkcom", withGaps && classNames("vkuiTabs--withGaps", "vkuiInternalTabs--withGaps"), mode === "default" && "vkuiTabs--mode-default"),
         role: role
     }), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiTabs__in",

package/dist/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":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","Platform","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","div","ref","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 { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<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 = ({ children, mode = 'default', role = 'tablist', ...restProps }: 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    <RootComponent\n      {...restProps}\n      baseClassName={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      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","Platform","RootComponent","TabsModeContext","createContext","mode","withGaps","Tabs","children","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","baseClassName","VKCOM","div","className","ref","Provider","value"],"mappings":"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"}