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

package/dist/cssm/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","styles","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;AACtD,OAAOC,YAAY,2BAA2B;AAiB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACT,GAAGC,WACc;IACjB,MAAMC,WAAWb;IAEjB,qBACE,oBAACE;QACCS,WAAWZ,WACTI,MAAM,CAAC,cAAc,EACrBU,aAAaZ,SAASa,GAAG,IAAIX,MAAM,CAAC,mBAAmB;QAEzDE,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,oBAACQ;QACE,GAAGH,SAAS;QACbI,KAAKN;QACLC,WAAWZ,WACTI,MAAM,CAAC,qBAAqB,EAC5B,CAAC,CAACI,UAAUJ,MAAM,CAAC,6BAA6B,EAChDQ;OAGDH;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","styles","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;AACtD,OAAOC,YAAY,2BAA2B;AAgB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACT,GAAGC,WACc;IACjB,MAAMC,WAAWb;IAEjB,qBACE,oBAACE;QACCS,WAAWZ,WACTI,MAAM,CAAC,cAAc,EACrBU,aAAaZ,SAASa,GAAG,IAAIX,MAAM,CAAC,mBAAmB;QAEzDE,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,oBAACQ;QACE,GAAGH,SAAS;QACbI,KAAKN;QACLC,WAAWZ,WACTI,MAAM,CAAC,qBAAqB,EAC5B,CAAC,CAACI,UAAUJ,MAAM,CAAC,6BAA6B,EAChDQ;OAGDH;AAIT,EAAE"}

package/dist/cssm/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/cssm/components/SubnavigationBar/SubnavigationBar.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
 import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './SubnavigationBar.module.css';
 const defaultScrollToLeft = (x)=>x - 240;
 const defaultScrollToRight = (x)=>x + 240;
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
- */ export const SubnavigationBar = ({ mode = 'overflow', children, showArrows = true, getScrollToLeft = defaultScrollToLeft, getScrollToRight = defaultScrollToRight, scrollAnimationDuration, className, ...restProps })=>{
+ */ export const SubnavigationBar = ({ mode = 'overflow', children, showArrows = true, getScrollToLeft = defaultScrollToLeft, getScrollToRight = defaultScrollToRight, scrollAnimationDuration, ...restProps })=>{
     let ScrollWrapper;
     let scrollWrapperProps = {};
     if (mode === 'fixed') {
@@ -20,14 +20,14 @@ const defaultScrollToRight = (x)=>x + 240;
             scrollAnimationDuration
         };
     }
-    return /*#__PURE__*/ React.createElement("div", {
-        ...restProps,
-        className: classNames(// TODO: [>=6]
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        // 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)
+        baseClassName: mode === 'fixed' ? 'vkuiInternalSubnavigationBar--mode-fixed' : undefined,
+        ...restProps
     }, /*#__PURE__*/ React.createElement(ScrollWrapper, {
         className: styles['SubnavigationBar__in'],
         ...scrollWrapperProps

package/dist/cssm/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","styles","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;AAC9C,OAAOC,YAAY,gCAAgC;AAWnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,OAAO,UAAU,EACjBC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EACvBC,SAAS,EACT,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBP;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,oBAACK;QACE,GAAGH,SAAS;QACbD,WAAWb,WACT,cAAc;QACd,0EAA0E;QAC1E,qEAAqE;QACrE,0FAA0F;QAC1F,6EAA6E;QAC7EO,SAAS,WAAWP,WAAW,6CAC/Ba;qBAGF,oBAACE;QAAcF,WAAWX,MAAM,CAAC,uBAAuB;QAAG,GAAGc,kBAAkB;qBAC9E,oBAACE;QAAGL,WAAWX,MAAM,CAAC,6BAA6B;OAChDH,MAAMoB,QAAQ,CAACC,GAAG,CAACZ,UAAU,CAACa,OAAOC,oBACpC,oBAACC;YAAGC,KAAKF;YAAKT,WAAWX,MAAM,CAAC,yBAAyB;WACtDmB;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","styles","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;AAC/D,OAAOC,YAAY,gCAAgC;AAWnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,OAAO,UAAU,EACjBC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EACvB,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,SAAS,SAAS;QACpBO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBN;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,oBAACX;QACC,cAAc;QACd,0EAA0E;QAC1E,qEAAqE;QACrE,0FAA0F;QAC1F,6EAA6E;QAC7Ee,eAAeT,SAAS,UAAU,6CAA6CU;QAC9E,GAAGJ,SAAS;qBAEb,oBAACC;QAAcI,WAAWhB,MAAM,CAAC,uBAAuB;QAAG,GAAGa,kBAAkB;qBAC9E,oBAACI;QAAGD,WAAWhB,MAAM,CAAC,6BAA6B;OAChDH,MAAMqB,QAAQ,CAACC,GAAG,CAACb,UAAU,CAACc,OAAOC,oBACpC,oBAACC;YAAGC,KAAKF;YAAKL,WAAWhB,MAAM,CAAC,yBAAyB;WACtDoB;AAOf,EAAE"}

package/dist/cssm/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/cssm/components/Tabbar/Tabbar.js

@@ -2,6 +2,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';
 import styles from './Tabbar.module.css';
 const getItemsLayoutClassName = (itemsLayout, children)=>{
     switch(itemsLayout){
@@ -15,12 +16,12 @@ const getItemsLayoutClassName = (itemsLayout, children)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
- */ export const Tabbar = ({ children, shadow = true, mode, className, ...restProps })=>{
+ */ export const Tabbar = ({ shadow = true, mode, ...restProps })=>{
     const platform = usePlatform();
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames('vkuiInternalTabbar', styles['Tabbar'], platform === Platform.IOS && styles['Tabbar--ios'], getItemsLayoutClassName(mode, children), shadow && styles['Tabbar--shadow'], className),
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: classNames('vkuiInternalTabbar', styles['Tabbar'], platform === Platform.IOS && styles['Tabbar--ios'], getItemsLayoutClassName(mode, restProps.children), shadow && styles['Tabbar--shadow']),
         ...restProps
-    }, children);
+    });
 };
 
 //# sourceMappingURL=Tabbar.js.map

package/dist/cssm/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","styles","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,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,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,MAAMK,SAAS,CAAC,EAAEH,QAAQ,EAAEI,SAAS,IAAI,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,WAAwB;IAC5F,MAAMC,WAAWb;IAEjB,qBACE,oBAACc;QACCH,WAAWZ,WACT,sBACAG,MAAM,CAAC,SAAS,EAChBW,aAAaZ,SAASc,GAAG,IAAIb,MAAM,CAAC,cAAc,EAClDC,wBAAwBO,MAAML,WAC9BI,UAAUP,MAAM,CAAC,iBAAiB,EAClCS;QAED,GAAGC,SAAS;OAEZP;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","styles","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,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOP,MAAMS,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEC,SAAS,IAAI,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWb;IAEjB,qBACE,oBAACE;QACCY,eAAef,WACb,sBACAI,MAAM,CAAC,SAAS,EAChBU,aAAaZ,SAASc,GAAG,IAAIZ,MAAM,CAAC,cAAc,EAClDC,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChDI,UAAUP,MAAM,CAAC,iBAAiB;QAEnC,GAAGS,SAAS;;AAGnB,EAAE"}

package/dist/cssm/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/cssm/components/TabbarItem/TabbarItem.js

@@ -3,13 +3,14 @@ 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';
 import styles from './TabbarItem.module.css';
 const warn = warnOnce('TabbarItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
- */ export const TabbarItem = ({ children, selected, indicator, text, href, Component = href ? 'a' : 'button', disabled, className, getRootRef, ...restProps })=>{
+ */ export const TabbarItem = ({ children, selected, indicator, text, href, Component = href ? 'a' : 'button', disabled, ...restProps })=>{
     const platform = usePlatform();
     if (process.env.NODE_ENV === 'development') {
         const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];
@@ -17,12 +18,12 @@ const warn = warnOnce('TabbarItem');
             warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');
         }
     }
-    return /*#__PURE__*/ React.createElement(Component, {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        Component: Component,
         ...restProps,
-        ref: getRootRef,
         disabled: disabled,
         href: href,
-        className: classNames(styles['TabbarItem'], platform === Platform.IOS && styles['TabbarItem--ios'], platform === Platform.ANDROID && styles['TabbarItem--android'], selected && styles['TabbarItem--selected'], className)
+        baseClassName: classNames(styles['TabbarItem'], platform === Platform.IOS && styles['TabbarItem--ios'], platform === Platform.ANDROID && styles['TabbarItem--android'], selected && styles['TabbarItem--selected'])
     }, /*#__PURE__*/ React.createElement(Tappable, {
         role: "presentation",
         Component: "div",

package/dist/cssm/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","styles","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;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAAS,EACTC,UAAU,EACV,GAAGC,WACa;IAChB,MAAMC,WAAWnB;IAEjB,IAAIoB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBX,QAAQM,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBhB,KAAKL,gBAAgBsB,IAAI,CAACV,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,oBAACA;QACE,GAAGI,SAAS;QACbO,KAAKR;QACLF,UAAUA;QACVF,MAAMA;QACNG,WAAWlB,WACTQ,MAAM,CAAC,aAAa,EACpBa,aAAalB,SAASyB,GAAG,IAAIpB,MAAM,CAAC,kBAAkB,EACtDa,aAAalB,SAAS0B,OAAO,IAAIrB,MAAM,CAAC,sBAAsB,EAC9DI,YAAYJ,MAAM,CAAC,uBAAuB,EAC1CU;qBAGF,oBAACZ;QACCwB,MAAK;QACLd,WAAU;QACVC,UAAUA;QACVc,YACEV,aAAalB,SAASyB,GAAG,GAAGpB,MAAM,CAAC,+BAA+B,GAAG;QAEvEwB,mBAAmBX,aAAalB,SAASyB,GAAG,GAAG,IAAI;QACnDK,UAAU;QACVf,WAAWV,MAAM,CAAC,uBAAuB;sBAE3C,oBAAC0B;QAAIhB,WAAWV,MAAM,CAAC,iBAAiB;qBACtC,oBAAC0B;QAAIhB,WAAWV,MAAM,CAAC,mBAAmB;OACvCG,wBACD,oBAACuB;QAAIhB,WAAU;OACZjB,aAAaY,cAAcA,aAG/BC,sBACC,oBAACP;QAASS,WAAU;QAAME,WAAWV,MAAM,CAAC,mBAAmB;QAAE2B,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","styles","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;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACR,GAAGC,WACa;IAChB,MAAMC,WAAWlB;IAEjB,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBT,QAAQI,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBd,KAAKN,gBAAgBqB,IAAI,CAACR,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,oBAACX;QACCW,WAAWA;QACV,GAAGE,SAAS;QACbD,UAAUA;QACVF,MAAMA;QACNU,eAAe1B,WACbS,MAAM,CAAC,aAAa,EACpBW,aAAajB,SAASwB,GAAG,IAAIlB,MAAM,CAAC,kBAAkB,EACtDW,aAAajB,SAASyB,OAAO,IAAInB,MAAM,CAAC,sBAAsB,EAC9DI,YAAYJ,MAAM,CAAC,uBAAuB;qBAG5C,oBAACF;QACCsB,MAAK;QACLZ,WAAU;QACVC,UAAUA;QACVY,YACEV,aAAajB,SAASwB,GAAG,GAAGlB,MAAM,CAAC,+BAA+B,GAAG;QAEvEsB,mBAAmBX,aAAajB,SAASwB,GAAG,GAAG,IAAI;QACnDK,UAAU;QACVC,WAAWxB,MAAM,CAAC,uBAAuB;sBAE3C,oBAACyB;QAAID,WAAWxB,MAAM,CAAC,iBAAiB;qBACtC,oBAACyB;QAAID,WAAWxB,MAAM,CAAC,mBAAmB;OACvCG,wBACD,oBAACsB;QAAID,WAAU;OACZhC,aAAaa,cAAcA,aAG/BC,sBACC,oBAACP;QAASS,WAAU;QAAMgB,WAAWxB,MAAM,CAAC,mBAAmB;QAAE0B,QAAO;OACrEpB;AAMb,EAAE"}

package/dist/cssm/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/cssm/components/Tabs/Tabs.js

@@ -5,6 +5,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';
 import styles from './Tabs.module.css';
 export const TabsModeContext = /*#__PURE__*/ React.createContext({
     mode: 'default',
@@ -12,7 +13,7 @@ export const TabsModeContext = /*#__PURE__*/ React.createContext({
 });
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
- */ export const Tabs = ({ children, mode = 'default', getRootRef, className, role = 'tablist', ...restProps })=>{
+ */ export const Tabs = ({ children, mode = 'default', role = 'tablist', ...restProps })=>{
     const platform = usePlatform();
     const { document } = useDOM();
     const isTabFlow = role === 'tablist';
@@ -95,10 +96,9 @@ export const TabsModeContext = /*#__PURE__*/ React.createContext({
     useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {
         capture: true
     });
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        ref: getRootRef,
-        className: classNames(styles['Tabs'], 'vkuiInternalTabs', platform === Platform.VKCOM && 'vkuiInternalTabs--vkcom', withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'), mode === 'default' && styles['Tabs--mode-default'], className),
+        baseClassName: classNames(styles['Tabs'], 'vkuiInternalTabs', platform === Platform.VKCOM && 'vkuiInternalTabs--vkcom', withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'), mode === 'default' && styles['Tabs--mode-default']),
         role: role
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Tabs__in'],

package/dist/cssm/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","styles","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","styles","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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAWvC,OAAO,MAAMC,gCAAkBT,MAAMU,aAAa,CAAmB;IACnEC,MAAM;IACNC,UAAU;AACZ,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,QAAQ,EAAEH,OAAO,SAAS,EAAEI,OAAO,SAAS,EAAE,GAAGC,WAAsB;IAC5F,MAAMC,WAAWd;IACjB,MAAM,EAAEe,QAAQ,EAAE,GAAGb;IAErB,MAAMc,YAAYJ,SAAS;IAE3B,MAAMK,UAAUpB,MAAMqB,MAAM,CAAiB;IAE7C,MAAMT,WAAWD,SAAS,YAAYA,SAAS;IAE/C,MAAMW,YAAY;QAChB,IAAI,CAACF,QAAQG,OAAO,EAAE;YACpB,OAAO,EAAE;QACX;QAEA,OAAOC,MAAMC,IAAI,CACf,oDAAoD;QACpDL,QAAQG,OAAO,CAACG,gBAAgB,CAAiB;IAErD;IAEA,MAAMC,wBAAwB,CAACC;QAC7B,IAAI,CAACV,YAAY,CAACE,QAAQG,OAAO,IAAI,CAACJ,WAAW;YAC/C;QACF;QAEA,MAAMU,MAAMzB,WAAWwB;QAEvB,OAAQC;YACN,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;gBAAQ;oBACX,MAAMC,SAASR;oBACf,MAAMS,wBAAwBD,OAAOE,SAAS,CAAC,CAACC,KAAOf,SAASgB,aAAa,KAAKD;oBAClF,IAAIF,0BAA0B,CAAC,GAAG;wBAChC;oBACF;oBAEA,IAAII,YAAY;oBAChB,IAAIN,QAAQ,QAAQ;wBAClBM,YAAY;oBACd,OAAO,IAAIN,QAAQ,OAAO;wBACxBM,YAAYL,OAAOM,MAAM,GAAG;oBAC9B,OAAO;wBACL,MAAMC,SAASR,QAAQ,eAAe,IAAI,CAAC;wBAC3CM,YAAYJ,wBAAwBM;oBACtC;oBAEA,MAAMC,YAAYR,MAAM,CAACK,UAAU;oBAEnC,IAAIG,WAAW;wBACbV,MAAMW,cAAc;wBACpBD,UAAUE,KAAK;oBACjB;oBAEA;gBACF;YACA;;;;MAIA,GACA,KAAK;gBAAa;oBAChB,MAAMV,SAASR;oBACf,MAAMmB,mBAAmBX,OAAOY,IAAI,CAAC,CAACT,KAAOf,SAASgB,aAAa,KAAKD;oBAExE,IAAI,CAACQ,oBAAoBA,iBAAiBE,YAAY,CAAC,qBAAqB,QAAQ;wBAClF;oBACF;oBAEA,MAAMC,qBAAqBH,iBAAiBE,YAAY,CAAC;oBACzD,IAAI,CAACC,oBAAoB;wBACvB;oBACF;oBAEA,oDAAoD;oBACpD,MAAMC,mBAAmB3B,SAAS4B,cAAc,CAACF;oBACjD,IAAI,CAACC,kBAAkB;wBACrB;oBACF;oBAEAjB,MAAMW,cAAc;oBACpBM,iBAAiBL,KAAK;oBAEtB;gBACF;YACA,KAAK;YACL,KAAK;gBAAS;oBACZ,MAAMV,SAASR;oBACf,MAAMmB,mBAAmBX,OAAOY,IAAI,CAAC,CAACT,KAAOf,SAASgB,aAAa,KAAKD;oBACxE,IAAIQ,kBAAkB;wBACpBA,iBAAiBM,KAAK;oBACxB;gBACF;QACF;IACF;IAEA7C,uBAAuBgB,UAAU,WAAWS,uBAAuB;QACjEqB,SAAS;IACX;IAEA,qBACE,oBAACzC;QACE,GAAGS,SAAS;QACbiC,eAAehD,WACbO,MAAM,CAAC,OAAO,EACd,oBACAS,aAAaX,SAAS4C,KAAK,IAAI,2BAC/BtC,YAAYX,WAAWO,MAAM,CAAC,iBAAiB,EAAE,+BACjDG,SAAS,aAAaH,MAAM,CAAC,qBAAqB;QAEpDO,MAAMA;qBAEN,oBAACoC;QAAIC,WAAW5C,MAAM,CAAC,WAAW;QAAE6C,KAAKjC;qBACvC,oBAACX,gBAAgB6C,QAAQ;QAACC,OAAO;YAAE5C;YAAMC;QAAS;OAAIE;AAI9D,EAAE"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement> {
     /**
      * Добавляет иконку слева.
      *

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

@@ -13,6 +13,11 @@ const sizeYClassNames = {
     none: styles['TabsItem--sizeY-none'],
     [SizeType.COMPACT]: styles['TabsItem--sizeY-compact']
 };
+const stylesMode = {
+    default: styles['TabsItem--mode-default'],
+    accent: styles['TabsItem--mode-accent'],
+    secondary: styles['TabsItem--mode-secondary']
+};
 const warn = warnOnce('TabsItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
@@ -43,11 +48,7 @@ const warn = warnOnce('TabsItem');
     }
     return /*#__PURE__*/ React.createElement(Tappable, {
         ...restProps,
-        className: classNames(styles['TabsItem'], mode && ({
-            default: styles['TabsItem--mode-default'],
-            accent: styles['TabsItem--mode-accent'],
-            secondary: styles['TabsItem--mode-secondary']
-        })[mode], selected && styles['TabsItem--selected'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], withGaps && styles['TabsItem--withGaps'], className),
+        className: classNames(styles['TabsItem'], mode && stylesMode[mode], selected && styles['TabsItem--selected'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], withGaps && styles['TabsItem--withGaps'], className),
         hoverMode: styles['TabsItem--hover'],
         activeMode: "",
         focusVisibleMode: "inside",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","sizeY","mode","withGaps","useContext","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","level","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nconst stylesMode = {\n  default: styles['TabsItem--mode-default'],\n  accent: styles['TabsItem--mode-accent'],\n  secondary: styles['TabsItem--mode-secondary'],\n};\n\nexport interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode && stylesMode[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","stylesMode","default","accent","secondary","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","sizeY","mode","withGaps","useContext","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","level","aria-hidden","data-selected"],"mappings":"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"}

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

@@ -36,6 +36,11 @@ export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElem
     focusVisibleMode?: LiteralUnion<FocusVisibleMode, string>;
     onEnter?(outputEvent: MouseEvent): void;
     onLeave?(outputEvent: MouseEvent): void;
+    /**
+     * Задает border-radius элементу
+     * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`
+     */
+    borderRadiusMode?: 'auto' | 'inherit';
 }
 export interface RootComponentProps extends TouchProps {
     ref?: React.Ref<HTMLElement>;
@@ -45,5 +50,5 @@ export declare const ACTIVE_EFFECT_DELAY = 600;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tappable
  */
-export declare const Tappable: ({ children, Component, onClick, onKeyDown: _onKeyDown, activeEffectDelay, stopPropagation, getRootRef, hasHover: _hasHover, hoverMode, hasActive: _hasActive, activeMode, focusVisibleMode, onEnter, onLeave, className, hovered: hoveredProp, ...props }: TappableProps) => React.JSX.Element;
+export declare const Tappable: ({ children, Component, onClick, onKeyDown: _onKeyDown, activeEffectDelay, stopPropagation, getRootRef, hasHover: _hasHover, hoverMode, hasActive: _hasActive, activeMode, focusVisibleMode, onEnter, onLeave, className, hovered: hoveredProp, borderRadiusMode, ...props }: TappableProps) => React.JSX.Element;
 export {};

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

@@ -24,6 +24,14 @@ const sizeXClassNames = {
     none: styles['Tappable--sizeX-none'],
     compact: styles['Tappable--sizeX-compact']
 };
+const stylesHoverMode = {
+    background: styles['Tappable--hover-background'],
+    opacity: styles['Tappable--hover-opacity']
+};
+const stylesActiveMode = {
+    background: styles['Tappable--active-background'],
+    opacity: styles['Tappable--active-opacity']
+};
 const WAVE_LIVE = 225;
 export const ACTIVE_DELAY = 70;
 export const ACTIVE_EFFECT_DELAY = 600;
@@ -106,7 +114,7 @@ function useActivity(hasActive, stopDelay) {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tappable
- */ export const Tappable = ({ children, Component, onClick, onKeyDown: _onKeyDown, activeEffectDelay = ACTIVE_EFFECT_DELAY, stopPropagation = false, getRootRef, hasHover: _hasHover = true, hoverMode = 'background', hasActive: _hasActive = true, activeMode = 'background', focusVisibleMode = 'inside', onEnter, onLeave, className, hovered: hoveredProp, ...props })=>{
+ */ export const Tappable = ({ children, Component, onClick, onKeyDown: _onKeyDown, activeEffectDelay = ACTIVE_EFFECT_DELAY, stopPropagation = false, getRootRef, hasHover: _hasHover = true, hoverMode = 'background', hasActive: _hasActive = true, activeMode = 'background', focusVisibleMode = 'inside', onEnter, onLeave, className, hovered: hoveredProp, borderRadiusMode = 'auto', ...props })=>{
     Component = Component || (props.href ? 'a' : 'div');
     const { onHoverChange } = React.useContext(TappableContext);
     const insideTouchRoot = React.useContext(TouchRootContext);
@@ -203,13 +211,7 @@ function useActivity(hasActive, stopDelay) {
         const activeDuration = duration - ACTIVE_DELAY;
         stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
     }
-    const classes = classNames(className, styles['Tappable'], 'vkuiInternalTappable', platform === Platform.IOS && styles['Tappable--ios'], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], hasHover && styles['Tappable--hasHover'], hasActive && styles['Tappable--hasActive'], hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasHover && hovered && isPresetHoverMode && ({
-        background: styles['Tappable--hover-background'],
-        opacity: styles['Tappable--hover-opacity']
-    })[hoverMode], hasActive && active && isPresetActiveMode && ({
-        background: styles['Tappable--active-background'],
-        opacity: styles['Tappable--active-opacity']
-    })[activeMode], focusVisible && styles['Tappable--focus-visible']);
+    const classes = classNames(className, styles['Tappable'], 'vkuiInternalTappable', platform === Platform.IOS && styles['Tappable--ios'], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], hasHover && styles['Tappable--hasHover'], hasActive && styles['Tappable--hasActive'], hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasHover && hovered && isPresetHoverMode && stylesHoverMode[hoverMode], hasActive && active && isPresetActiveMode && stylesActiveMode[activeMode], focusVisible && styles['Tappable--focus-visible'], borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit']);
     const handlers = {
         onStart: callMultiple(onStart, props.onStart),
         onMove: callMultiple(onMove, props.onMove),

package/dist/cssm/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 {\n  AnchorHTMLAttributesOnly,\n  HasChildren,\n  HasComponent,\n  HasRootRef,\n  LiteralUnion,\n} 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   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: LiteralUnion<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: LiteralUnion<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  hovered: hoveredProp,\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 || hoveredProp) && !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":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","styles","sizeXClassNames","none","compact","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","activity","setActivity","useState","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","onKeyDown","_onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","hovered","hoveredProp","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","clicks","setClicks","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","childContext","useRef","current","e","preventDefault","click","needWaves","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","top","left","onMove","isSlide","onEnd","duration","activeDuration","classes","IOS","REGULAR","background","opacity","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","Tappable__waves","map","wave","key","Tappable__wave","style","Tappable__stateLayer","visible","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 {\n  AnchorHTMLAttributesOnly,\n  HasChildren,\n  HasComponent,\n  HasRootRef,\n  LiteralUnion,\n} 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\nconst stylesHoverMode = {\n  background: styles['Tappable--hover-background'],\n  opacity: styles['Tappable--hover-opacity'],\n};\n\nconst stylesActiveMode = {\n  background: styles['Tappable--active-background'],\n  opacity: styles['Tappable--active-opacity'],\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   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: LiteralUnion<FocusVisibleMode, string>;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\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: LiteralUnion<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  hovered: hoveredProp,\n  borderRadiusMode = 'auto',\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 || hoveredProp) && !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 && hovered && isPresetHoverMode && stylesHoverMode[hoverMode],\n    hasActive && active && isPresetActiveMode && stylesActiveMode[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n    borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'],\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":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","styles","sizeXClassNames","none","compact","stylesHoverMode","background","opacity","stylesActiveMode","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","activity","setActivity","useState","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","onKeyDown","_onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","hovered","hoveredProp","borderRadiusMode","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","clicks","setClicks","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","childContext","useRef","current","e","preventDefault","click","needWaves","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","top","left","onMove","isSlide","onEnd","duration","activeDuration","classes","IOS","REGULAR","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","Tappable__waves","map","wave","key","Tappable__wave","style","Tappable__stateLayer","visible","mode"],"mappings":"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"}