@vkontakte/vkui 6.0.2 → 6.1.0

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, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\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 === 'ios' && styles['TabbarItem--ios'],\n        platform === 'android' && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles['TabbarItem__tappable--active'] : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n        onClick={noop}\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","noop","usePlatform","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","role","activeMode","activeEffectDelay","hasHover","className","onClick","div","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,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,WAAWjB;IAEjB,IAAIkB,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,aAAa,SAASX,MAAM,CAAC,kBAAkB,EAC/CW,aAAa,aAAaX,MAAM,CAAC,sBAAsB,EACvDI,YAAYJ,MAAM,CAAC,uBAAuB;qBAG5C,oBAACF;QACCoB,MAAK;QACLT,UAAUA;QACVU,YAAYR,aAAa,QAAQX,MAAM,CAAC,+BAA+B,GAAG;QAC1EoB,mBAAmBT,aAAa,QAAQ,IAAI;QAC5CU,UAAU;QACVC,WAAWtB,MAAM,CAAC,uBAAuB;QACzCuB,SAAS9B;sBAEX,oBAAC+B;QAAIF,WAAWtB,MAAM,CAAC,iBAAiB;qBACtC,oBAACwB;QAAIF,WAAWtB,MAAM,CAAC,mBAAmB;OACvCG,wBACD,oBAACqB;QAAIF,WAAU;OACZ9B,aAAaa,cAAcA,aAG/BC,sBACC,oBAACP;QAASS,WAAU;QAAMc,WAAWtB,MAAM,CAAC,mBAAmB;QAAEyB,QAAO;OACrEnB;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\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 === 'ios' && styles['TabbarItem--ios'],\n        platform === 'android' && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles['TabbarItem__tappable--active'] : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n        onClick={noop}\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","noop","usePlatform","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","role","activeMode","activeEffectDelay","hasHover","className","onClick","div","weight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,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,WAAWjB;IAEjB,IAAIkB,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,MAACX;QACCW,WAAWA;QACV,GAAGE,SAAS;QACbD,UAAUA;QACVF,MAAMA;QACNU,eAAe1B,WACbS,MAAM,CAAC,aAAa,EACpBW,aAAa,SAASX,MAAM,CAAC,kBAAkB,EAC/CW,aAAa,aAAaX,MAAM,CAAC,sBAAsB,EACvDI,YAAYJ,MAAM,CAAC,uBAAuB;;0BAG5C,KAACF;gBACCoB,MAAK;gBACLT,UAAUA;gBACVU,YAAYR,aAAa,QAAQX,MAAM,CAAC,+BAA+B,GAAG;gBAC1EoB,mBAAmBT,aAAa,QAAQ,IAAI;gBAC5CU,UAAU;gBACVC,WAAWtB,MAAM,CAAC,uBAAuB;gBACzCuB,SAAS9B;;0BAEX,MAAC+B;gBAAIF,WAAWtB,MAAM,CAAC,iBAAiB;;kCACtC,MAACwB;wBAAIF,WAAWtB,MAAM,CAAC,mBAAmB;;4BACvCG;0CACD,KAACqB;gCAAIF,WAAU;0CACZ9B,aAAaa,cAAcA;;;;oBAG/BC,sBACC,KAACP;wBAASS,WAAU;wBAAMc,WAAWtB,MAAM,CAAC,mBAAmB;wBAAEyB,QAAO;kCACrEnB;;;;;;AAMb,EAAE"}

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

@@ -33,5 +33,5 @@ export declare const TabsModeContext: React.Context<TabsContextProps>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */
-export declare const Tabs: ({ children, mode, role, withScrollToSelectedTab, scrollBehaviorToSelectedTab, layoutFillMode, ...restProps }: TabsProps) => React.JSX.Element;
+export declare const Tabs: ({ children, mode, role, withScrollToSelectedTab, scrollBehaviorToSelectedTab, layoutFillMode, ...restProps }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1C;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC9D;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;CACpD;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzD,uBAAuB,EAAE,SAAS,CAAC,yBAAyB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,QAAQ,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC,CAAC;CACjF;AAED,eAAO,MAAM,eAAe,iCAM1B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,IAAI,iHAQd,SAAS,sBAiIX,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1C;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC9D;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;CACpD;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzD,uBAAuB,EAAE,SAAS,CAAC,yBAAyB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,QAAQ,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC,CAAC;CACjF;AAED,eAAO,MAAM,eAAe,iCAM1B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,IAAI,iHAQd,SAAS,4CAiIX,CAAC"}

package/dist/cssm/components/Tabs/Tabs.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
@@ -98,22 +99,25 @@ export const TabsModeContext = /*#__PURE__*/ React.createContext({
     useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {
         capture: true
     });
-    return /*#__PURE__*/ React.createElement(RootComponent, {
+    return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         baseClassName: classNames(styles['Tabs'], 'vkuiInternalTabs', 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'],
-        ref: tabsRef
-    }, /*#__PURE__*/ React.createElement(TabsModeContext.Provider, {
-        value: {
-            mode,
-            withGaps,
-            layoutFillMode,
-            withScrollToSelectedTab,
-            scrollBehaviorToSelectedTab
-        }
-    }, children)));
+        role: role,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: styles['Tabs__in'],
+            ref: tabsRef,
+            children: /*#__PURE__*/ _jsx(TabsModeContext.Provider, {
+                value: {
+                    mode,
+                    withGaps,
+                    layoutFillMode,
+                    withScrollToSelectedTab,
+                    scrollBehaviorToSelectedTab
+                },
+                children: children
+            })
+        })
+    });
 };
 
 //# sourceMappingURL=Tabs.js.map

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 { 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   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n  layoutFillMode: 'auto',\n  withScrollToSelectedTab: false,\n  scrollBehaviorToSelectedTab: 'nearest',\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\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    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        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\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","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","div","className","ref","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 { 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   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n  layoutFillMode: 'auto',\n  withScrollToSelectedTab: false,\n  scrollBehaviorToSelectedTab: 'nearest',\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\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    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        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\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","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","div","className","ref","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
-export interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement> {
+import { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';
+import { TappableProps } from '../Tappable/Tappable';
+export interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement>, AnchorHTMLAttributesOnly, Pick<TappableProps, 'activeMode' | 'hoverMode' | 'hovered' | 'activated' | 'hasActive' | 'hasHover' | 'focusVisibleMode'> {
     /**
      * Добавляет иконку слева.
      *
@@ -28,5 +29,5 @@ export interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
-export declare const TabsItem: ({ before, children, status, after, selected, className, role, tabIndex: tabIndexProp, getRootRef, ...restProps }: TabsItemProps) => React.JSX.Element;
+export declare const TabsItem: ({ before, children, status, after, selected, className, role, tabIndex: tabIndexProp, getRootRef, hoverMode, activeMode, hovered, activated, hasHover, hasActive, focusVisibleMode, ...restProps }: TabsItemProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TabsItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAwBxD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,WAAW,CAAC;IAC3E;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,qHAWlB,aAAa,sBA6Hf,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAsB/D,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAC5C,wBAAwB,EACxB,IAAI,CACF,aAAa,EACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,WAAW,GACX,UAAU,GACV,kBAAkB,CACrB;IACH;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,uMAkBlB,aAAa,4CAgIf,CAAC"}

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -27,19 +28,31 @@ const fillModeClassNames = {
 const warn = warnOnce('TabsItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
- */ export const TabsItem = ({ before, children, status, after, selected = false, className, role = 'tab', tabIndex: tabIndexProp, getRootRef, ...restProps })=>{
+ */ export const TabsItem = ({ before, children, status, after, selected = false, className, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = styles['TabsItem--hover'], activeMode = '', hovered, activated, hasHover, hasActive = false, focusVisibleMode = 'inside', ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } = React.useContext(TabsModeContext);
     let statusComponent = null;
     const isTabFlow = role === 'tab';
     if (hasReactNode(status)) {
-        statusComponent = typeof status === 'number' ? /*#__PURE__*/ React.createElement(Subhead, {
+        statusComponent = typeof status === 'number' ? /*#__PURE__*/ _jsxs(Subhead, {
             Component: "span",
             className: classNames(styles['TabsItem__status'], styles['TabsItem__status--count']),
-            weight: "2"
-        }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, " "), status) : /*#__PURE__*/ React.createElement("span", {
-            className: styles['TabsItem__status']
-        }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, " "), status);
+            weight: "2",
+            children: [
+                /*#__PURE__*/ _jsx(VisuallyHidden, {
+                    children: " "
+                }),
+                status
+            ]
+        }) : /*#__PURE__*/ _jsxs("span", {
+            className: styles['TabsItem__status'],
+            children: [
+                /*#__PURE__*/ _jsx(VisuallyHidden, {
+                    children: " "
+                }),
+                status
+            ]
+        });
     }
     if (process.env.NODE_ENV === 'development' && isTabFlow) {
         if (!restProps['aria-controls']) {
@@ -83,31 +96,44 @@ const warn = warnOnce('TabsItem');
         shouldScrollToSelected,
         scrollBehaviorToSelectedTab
     ]);
-    return /*#__PURE__*/ React.createElement(Tappable, {
+    return /*#__PURE__*/ _jsxs(Tappable, {
         ...restProps,
         getRootRef: rootRef,
         className: classNames(styles['TabsItem'], mode && stylesMode[mode], selected && styles['TabsItem--selected'], sizeY !== 'regular' && sizeYClassNames[sizeY], withGaps && styles['TabsItem--withGaps'], layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode], className),
-        hoverMode: styles['TabsItem--hover'],
-        activeMode: "",
-        focusVisibleMode: "inside",
-        hasActive: false,
+        hoverMode: hoverMode,
+        activeMode: activeMode,
+        hasHover: hasHover,
+        hasActive: hasActive,
+        hovered: hovered,
+        activated: activated,
+        focusVisibleMode: focusVisibleMode,
         role: role,
         "aria-selected": selected,
-        tabIndex: tabIndex
-    }, before && /*#__PURE__*/ React.createElement("div", {
-        className: styles['TabsItem__before']
-    }, before), /*#__PURE__*/ React.createElement(Headline, {
-        Component: "span",
-        className: styles['TabsItem__label'],
-        level: mode === 'default' ? '1' : '2',
-        weight: "2"
-    }, children), statusComponent, after && /*#__PURE__*/ React.createElement("div", {
-        className: styles['TabsItem__after']
-    }, after), mode === 'default' && /*#__PURE__*/ React.createElement("div", {
-        className: styles['TabsItem__underline'],
-        "aria-hidden": true,
-        "data-selected": selected
-    }));
+        tabIndex: tabIndex,
+        children: [
+            before && /*#__PURE__*/ _jsx("div", {
+                className: styles['TabsItem__before'],
+                children: before
+            }),
+            /*#__PURE__*/ _jsx(Headline, {
+                Component: "span",
+                className: styles['TabsItem__label'],
+                level: mode === 'default' ? '1' : '2',
+                weight: "2",
+                children: children
+            }),
+            statusComponent,
+            after && /*#__PURE__*/ _jsx("div", {
+                className: styles['TabsItem__after'],
+                children: after
+            }),
+            mode === 'default' && /*#__PURE__*/ _jsx("div", {
+                className: styles['TabsItem__underline'],
+                "aria-hidden": true,
+                "data-selected": selected
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=TabsItem.js.map

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, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\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  ['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\nconst fillModeClassNames = {\n  stretched: styles['TabsItem--stretched'],\n  shrinked: styles['TabsItem--shrinked'],\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  getRootRef,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(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  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      className={classNames(\n        styles['TabsItem'],\n        mode && stylesMode[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\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","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","getRootRef","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","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, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, TappableProps } 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  ['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\nconst fillModeClassNames = {\n  stretched: styles['TabsItem--stretched'],\n  shrinked: styles['TabsItem--shrinked'],\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\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  getRootRef,\n  hoverMode = styles['TabsItem--hover'],\n  activeMode = '',\n  hovered,\n  activated,\n  hasHover,\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(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  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      className={classNames(\n        styles['TabsItem'],\n        mode && stylesMode[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n        className,\n      )}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      hovered={hovered}\n      activated={activated}\n      focusVisibleMode={focusVisibleMode}\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","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hovered","activated","hasHover","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","aria-selected","div","level","aria-hidden","data-selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/cssm/components/TabsItem/TabsItem.module.css

@@ -10,6 +10,7 @@
   min-block-size: 32px;
   border-radius: var(--vkui--size_border_radius--regular);
   transition: background-color 150ms ease-out;
+  text-decoration: none;
 }
 
 .TabsItem--withGaps {
@@ -120,10 +121,6 @@
   color: var(--vkui--color_icon_accent_themed);
 }
 
-.TabsItem--selected.TabsItem--mode-secondary .TabsItem__before {
-  opacity: 0.72;
-}
-
 /* Элемент */
 
 .TabsItem__label {
@@ -144,10 +141,6 @@
   color: var(--vkui--color_text_accent_themed);
 }
 
-.TabsItem--selected.TabsItem--mode-secondary .TabsItem__label {
-  opacity: 0.72;
-}
-
 /* Элемент */
 
 .TabsItem__status {
@@ -164,6 +157,14 @@
 .TabsItem__after {
   -webkit-margin-start: 6px;
           margin-inline-start: 6px;
+  color: var(--vkui--color_icon_medium);
+}
+
+.TabsItem--selected .TabsItem__after {
+  color: var(--vkui--color_icon_primary);
+}
+
+.TabsItem--mode-accent.TabsItem--selected .TabsItem__after {
   color: var(--vkui--color_icon_accent_themed);
 }
 

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

@@ -22,6 +22,6 @@ export interface RippleProps {
     needRipple: boolean;
     clicks: Wave[];
 }
-export declare const Ripple: ({ needRipple, clicks }: RippleProps) => React.JSX.Element;
+export declare const Ripple: ({ needRipple, clicks }: RippleProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Ripple.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eAAgB,MAAM,cAAc,OAAO,GAAG,SAAS,YAIrF,CAAC;AAEF,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,SAAS,eAAgB,OAAO,qBAAqB,OAAO,GAAG,SAAS;;;;CAkDpF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,2BAAmC,WAAW,sBAkBhE,CAAC"}
+{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eAAgB,MAAM,cAAc,OAAO,GAAG,SAAS,YAIrF,CAAC;AAEF,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,SAAS,eAAgB,OAAO,qBAAqB,OAAO,GAAG,SAAS;;;;CAkDpF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,2BAAmC,WAAW,4CAkBhE,CAAC"}

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -58,17 +59,17 @@ const WAVE_LIVE = 225;
     };
 };
 export const Ripple = ({ needRipple = true, clicks })=>{
-    return /*#__PURE__*/ React.createElement("span", {
+    return /*#__PURE__*/ _jsx("span", {
         "aria-hidden": true,
-        className: classNames(styles['Tappable__stateLayer'], needRipple && styles['Tappable__ripple'])
-    }, clicks.map((wave)=>/*#__PURE__*/ React.createElement("span", {
-            key: wave.id,
-            className: styles['Tappable__wave'],
-            style: {
-                top: wave.y,
-                left: wave.x
-            }
-        })));
+        className: classNames(styles['Tappable__stateLayer'], needRipple && styles['Tappable__ripple']),
+        children: clicks.map((wave)=>/*#__PURE__*/ _jsx("span", {
+                className: styles['Tappable__wave'],
+                style: {
+                    top: wave.y,
+                    left: wave.x
+                }
+            }, wave.id))
+    });
 };
 
 //# sourceMappingURL=Ripple.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Ripple.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { getOffsetRect } from '../../lib/offset';\nimport styles from './Tappable.module.css';\n\n/**\n * Возможно нужен Ripple эффект. Данный хук нужен для отказа\n * от двойного ререндера.\n */\nexport const useMaybeNeedRipple = (activeMode: string, hasPointer: boolean | undefined) => {\n  const platform = usePlatform();\n\n  return platform === 'android' && !hasPointer && activeMode === 'background';\n};\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n  pointerId: number;\n}\n\nconst DELAY = 70;\nconst WAVE_LIVE = 225;\n\n/**\n * Хук для создания Ripple эффектов\n */\nexport const useRipple = (needRipple: boolean, hasPointerContext: boolean | undefined) => {\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n\n  /**\n   * Коллекция нажатий и таймеров задержки появления волны\n   */\n  const pointerDelayTimers = React.useMemo(\n    () => new Map<number, ReturnType<typeof setTimeout>>(),\n    [],\n  );\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number, pointerId: 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, pointerId }]);\n    clearClicks.set();\n    pointerDelayTimers.delete(pointerId);\n  }\n\n  /**\n   * Добавляем волну с задержкой. Задержка необходима при отмене волны.\n   */\n  const onPointerDown: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const { top, left } = getOffsetRect(e.currentTarget);\n    const x = e.clientX - (left ?? 0);\n    const y = e.clientY - (top ?? 0);\n\n    pointerDelayTimers.set(\n      e.pointerId,\n      setTimeout(() => addClick(x, y, e.pointerId), DELAY),\n    );\n  };\n\n  const onPointerCancel: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const timer = pointerDelayTimers.get(e.pointerId);\n    clearTimeout(timer);\n    pointerDelayTimers.delete(e.pointerId);\n  };\n\n  // WARNING: не использовать для рендеринга\n  const reallyNeedRipple = (!hasPointerLib || hasPointerContext === false) && needRipple;\n\n  return {\n    clicks,\n    onPointerDown: reallyNeedRipple ? onPointerDown : noop,\n    onPointerCancel: reallyNeedRipple ? onPointerCancel : noop,\n  };\n};\n\nexport interface RippleProps {\n  needRipple: boolean;\n  clicks: Wave[];\n}\n\nexport const Ripple = ({ needRipple = true, clicks }: RippleProps) => {\n  return (\n    <span\n      aria-hidden\n      className={classNames(\n        styles['Tappable__stateLayer'],\n        needRipple && styles['Tappable__ripple'],\n      )}\n    >\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};\n"],"names":["React","classNames","hasMouse","hasPointerLib","noop","usePlatform","useTimeout","getOffsetRect","styles","useMaybeNeedRipple","activeMode","hasPointer","platform","DELAY","WAVE_LIVE","useRipple","needRipple","hasPointerContext","clicks","setClicks","useState","pointerDelayTimers","useMemo","Map","clearClicks","addClick","x","y","pointerId","dateNow","Date","now","filteredClicks","filter","click","id","set","delete","onPointerDown","e","top","left","currentTarget","clientX","clientY","setTimeout","onPointerCancel","timer","get","clearTimeout","reallyNeedRipple","Ripple","span","aria-hidden","className","map","wave","key","style"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAYC,aAAa,EAAEC,IAAI,QAAQ,kBAAkB;AAC9E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,OAAOC,YAAY,wBAAwB;AAE3C;;;CAGC,GACD,OAAO,MAAMC,qBAAqB,CAACC,YAAoBC;IACrD,MAAMC,WAAWP;IAEjB,OAAOO,aAAa,aAAa,CAACD,cAAcD,eAAe;AACjE,EAAE;AASF,MAAMG,QAAQ;AACd,MAAMC,YAAY;AAElB;;CAEC,GACD,OAAO,MAAMC,YAAY,CAACC,YAAqBC;IAC7C,MAAM,CAACC,QAAQC,UAAU,GAAGnB,MAAMoB,QAAQ,CAAS,EAAE;IAErD;;GAEC,GACD,MAAMC,qBAAqBrB,MAAMsB,OAAO,CACtC,IAAM,IAAIC,OACV,EAAE;IAGJ,MAAMC,cAAclB,WAAW,IAAMa,UAAU,EAAE,GAAGL;IAEpD,SAASW,SAASC,CAAS,EAAEC,CAAS,EAAEC,SAAiB;QACvD,MAAMC,UAAUC,KAAKC,GAAG;QACxB,MAAMC,iBAAiBd,OAAOe,MAAM,CAAC,CAACC,QAAUA,MAAMC,EAAE,GAAGrB,YAAYe;QAEvEV,UAAU;eAAIa;YAAgB;gBAAEN;gBAAGC;gBAAGQ,IAAIN;gBAASD;YAAU;SAAE;QAC/DJ,YAAYY,GAAG;QACff,mBAAmBgB,MAAM,CAACT;IAC5B;IAEA;;GAEC,GACD,MAAMU,gBAA4D,CAACC;QACjE,MAAM,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGlC,cAAcgC,EAAEG,aAAa;QACnD,MAAMhB,IAAIa,EAAEI,OAAO,GAAIF,CAAAA,QAAQ,CAAA;QAC/B,MAAMd,IAAIY,EAAEK,OAAO,GAAIJ,CAAAA,OAAO,CAAA;QAE9BnB,mBAAmBe,GAAG,CACpBG,EAAEX,SAAS,EACXiB,WAAW,IAAMpB,SAASC,GAAGC,GAAGY,EAAEX,SAAS,GAAGf;IAElD;IAEA,MAAMiC,kBAA8D,CAACP;QACnE,MAAMQ,QAAQ1B,mBAAmB2B,GAAG,CAACT,EAAEX,SAAS;QAChDqB,aAAaF;QACb1B,mBAAmBgB,MAAM,CAACE,EAAEX,SAAS;IACvC;IAEA,0CAA0C;IAC1C,MAAMsB,mBAAmB,AAAC,CAAA,CAAC/C,iBAAiBc,sBAAsB,KAAI,KAAMD;IAE5E,OAAO;QACLE;QACAoB,eAAeY,mBAAmBZ,gBAAgBlC;QAClD0C,iBAAiBI,mBAAmBJ,kBAAkB1C;IACxD;AACF,EAAE;AAOF,OAAO,MAAM+C,SAAS,CAAC,EAAEnC,aAAa,IAAI,EAAEE,MAAM,EAAe;IAC/D,qBACE,oBAACkC;QACCC,eAAAA;QACAC,WAAWrD,WACTO,MAAM,CAAC,uBAAuB,EAC9BQ,cAAcR,MAAM,CAAC,mBAAmB;OAGzCU,OAAOqC,GAAG,CAAC,CAACC,qBACX,oBAACJ;YACCK,KAAKD,KAAKrB,EAAE;YACZmB,WAAW9C,MAAM,CAAC,iBAAiB;YACnCkD,OAAO;gBAAElB,KAAKgB,KAAK7B,CAAC;gBAAEc,MAAMe,KAAK9B,CAAC;YAAC;;AAK7C,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tappable/Ripple.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { getOffsetRect } from '../../lib/offset';\nimport styles from './Tappable.module.css';\n\n/**\n * Возможно нужен Ripple эффект. Данный хук нужен для отказа\n * от двойного ререндера.\n */\nexport const useMaybeNeedRipple = (activeMode: string, hasPointer: boolean | undefined) => {\n  const platform = usePlatform();\n\n  return platform === 'android' && !hasPointer && activeMode === 'background';\n};\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n  pointerId: number;\n}\n\nconst DELAY = 70;\nconst WAVE_LIVE = 225;\n\n/**\n * Хук для создания Ripple эффектов\n */\nexport const useRipple = (needRipple: boolean, hasPointerContext: boolean | undefined) => {\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n\n  /**\n   * Коллекция нажатий и таймеров задержки появления волны\n   */\n  const pointerDelayTimers = React.useMemo(\n    () => new Map<number, ReturnType<typeof setTimeout>>(),\n    [],\n  );\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number, pointerId: 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, pointerId }]);\n    clearClicks.set();\n    pointerDelayTimers.delete(pointerId);\n  }\n\n  /**\n   * Добавляем волну с задержкой. Задержка необходима при отмене волны.\n   */\n  const onPointerDown: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const { top, left } = getOffsetRect(e.currentTarget);\n    const x = e.clientX - (left ?? 0);\n    const y = e.clientY - (top ?? 0);\n\n    pointerDelayTimers.set(\n      e.pointerId,\n      setTimeout(() => addClick(x, y, e.pointerId), DELAY),\n    );\n  };\n\n  const onPointerCancel: React.PointerEventHandler<HTMLSpanElement> = (e) => {\n    const timer = pointerDelayTimers.get(e.pointerId);\n    clearTimeout(timer);\n    pointerDelayTimers.delete(e.pointerId);\n  };\n\n  // WARNING: не использовать для рендеринга\n  const reallyNeedRipple = (!hasPointerLib || hasPointerContext === false) && needRipple;\n\n  return {\n    clicks,\n    onPointerDown: reallyNeedRipple ? onPointerDown : noop,\n    onPointerCancel: reallyNeedRipple ? onPointerCancel : noop,\n  };\n};\n\nexport interface RippleProps {\n  needRipple: boolean;\n  clicks: Wave[];\n}\n\nexport const Ripple = ({ needRipple = true, clicks }: RippleProps) => {\n  return (\n    <span\n      aria-hidden\n      className={classNames(\n        styles['Tappable__stateLayer'],\n        needRipple && styles['Tappable__ripple'],\n      )}\n    >\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};\n"],"names":["React","classNames","hasMouse","hasPointerLib","noop","usePlatform","useTimeout","getOffsetRect","styles","useMaybeNeedRipple","activeMode","hasPointer","platform","DELAY","WAVE_LIVE","useRipple","needRipple","hasPointerContext","clicks","setClicks","useState","pointerDelayTimers","useMemo","Map","clearClicks","addClick","x","y","pointerId","dateNow","Date","now","filteredClicks","filter","click","id","set","delete","onPointerDown","e","top","left","currentTarget","clientX","clientY","setTimeout","onPointerCancel","timer","get","clearTimeout","reallyNeedRipple","Ripple","span","aria-hidden","className","map","wave","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAYC,aAAa,EAAEC,IAAI,QAAQ,kBAAkB;AAC9E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,OAAOC,YAAY,wBAAwB;AAE3C;;;CAGC,GACD,OAAO,MAAMC,qBAAqB,CAACC,YAAoBC;IACrD,MAAMC,WAAWP;IAEjB,OAAOO,aAAa,aAAa,CAACD,cAAcD,eAAe;AACjE,EAAE;AASF,MAAMG,QAAQ;AACd,MAAMC,YAAY;AAElB;;CAEC,GACD,OAAO,MAAMC,YAAY,CAACC,YAAqBC;IAC7C,MAAM,CAACC,QAAQC,UAAU,GAAGnB,MAAMoB,QAAQ,CAAS,EAAE;IAErD;;GAEC,GACD,MAAMC,qBAAqBrB,MAAMsB,OAAO,CACtC,IAAM,IAAIC,OACV,EAAE;IAGJ,MAAMC,cAAclB,WAAW,IAAMa,UAAU,EAAE,GAAGL;IAEpD,SAASW,SAASC,CAAS,EAAEC,CAAS,EAAEC,SAAiB;QACvD,MAAMC,UAAUC,KAAKC,GAAG;QACxB,MAAMC,iBAAiBd,OAAOe,MAAM,CAAC,CAACC,QAAUA,MAAMC,EAAE,GAAGrB,YAAYe;QAEvEV,UAAU;eAAIa;YAAgB;gBAAEN;gBAAGC;gBAAGQ,IAAIN;gBAASD;YAAU;SAAE;QAC/DJ,YAAYY,GAAG;QACff,mBAAmBgB,MAAM,CAACT;IAC5B;IAEA;;GAEC,GACD,MAAMU,gBAA4D,CAACC;QACjE,MAAM,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGlC,cAAcgC,EAAEG,aAAa;QACnD,MAAMhB,IAAIa,EAAEI,OAAO,GAAIF,CAAAA,QAAQ,CAAA;QAC/B,MAAMd,IAAIY,EAAEK,OAAO,GAAIJ,CAAAA,OAAO,CAAA;QAE9BnB,mBAAmBe,GAAG,CACpBG,EAAEX,SAAS,EACXiB,WAAW,IAAMpB,SAASC,GAAGC,GAAGY,EAAEX,SAAS,GAAGf;IAElD;IAEA,MAAMiC,kBAA8D,CAACP;QACnE,MAAMQ,QAAQ1B,mBAAmB2B,GAAG,CAACT,EAAEX,SAAS;QAChDqB,aAAaF;QACb1B,mBAAmBgB,MAAM,CAACE,EAAEX,SAAS;IACvC;IAEA,0CAA0C;IAC1C,MAAMsB,mBAAmB,AAAC,CAAA,CAAC/C,iBAAiBc,sBAAsB,KAAI,KAAMD;IAE5E,OAAO;QACLE;QACAoB,eAAeY,mBAAmBZ,gBAAgBlC;QAClD0C,iBAAiBI,mBAAmBJ,kBAAkB1C;IACxD;AACF,EAAE;AAOF,OAAO,MAAM+C,SAAS,CAAC,EAAEnC,aAAa,IAAI,EAAEE,MAAM,EAAe;IAC/D,qBACE,KAACkC;QACCC,aAAW;QACXC,WAAWrD,WACTO,MAAM,CAAC,uBAAuB,EAC9BQ,cAAcR,MAAM,CAAC,mBAAmB;kBAGzCU,OAAOqC,GAAG,CAAC,CAACC,qBACX,KAACJ;gBAECE,WAAW9C,MAAM,CAAC,iBAAiB;gBACnCiD,OAAO;oBAAEjB,KAAKgB,KAAK7B,CAAC;oBAAEc,MAAMe,KAAK9B,CAAC;gBAAC;eAF9B8B,KAAKrB,EAAE;;AAOtB,EAAE"}

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ClickableProps } from '../Clickable/Clickable';
 import { StateProps } from './state';
 export interface TappableProps extends ClickableProps, StateProps {
@@ -8,5 +7,5 @@ export interface TappableProps extends ClickableProps, StateProps {
      */
     borderRadiusMode?: 'auto' | 'inherit';
 }
-export declare const Tappable: ({ baseClassName, borderRadiusMode, children, hoverMode, activeMode, onPointerDown, onPointerCancel, ...restProps }: TappableProps) => React.JSX.Element;
+export declare const Tappable: ({ baseClassName, borderRadiusMode, children, hoverMode, activeMode, onPointerDown, onPointerCancel, ...restProps }: TappableProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tappable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tappable.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Tappable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAA6B,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEnF,OAAO,EAA+C,UAAU,EAAE,MAAM,SAAS,CAAC;AAmBlF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,UAAU;IAC/D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,uHASlB,aAAa,sBAoCf,CAAC"}
+{"version":3,"file":"Tappable.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Tappable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA6B,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEnF,OAAO,EAA+C,UAAU,EAAE,MAAM,SAAS,CAAC;AAmBlF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,UAAU;IAC/D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,QAAQ,uHASlB,aAAa,4CAoCf,CAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { SizeType } from '../../lib/adaptivity';
@@ -32,17 +32,21 @@ export const Tappable = ({ baseClassName, borderRadiusMode = 'auto', children, h
     const typeProps = restProps.Component === 'button' ? {
         type: 'button'
     } : {};
-    return /*#__PURE__*/ React.createElement(Clickable, {
+    return /*#__PURE__*/ _jsxs(Clickable, {
         baseClassName: classNames(baseClassName, styles['Tappable'], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'], hasPointerClassName(hasPointer)),
         hoverClassName: hoverClass(hoverMode),
         activeClassName: activeClass(activeMode),
         ...typeProps,
         ...handlers,
-        ...restProps
-    }, children, isClickable && (hoverMode === 'background' || activeMode === 'background') && /*#__PURE__*/ React.createElement(Ripple, {
-        needRipple: needRipple,
-        clicks: clicks
-    }));
+        ...restProps,
+        children: [
+            children,
+            isClickable && (hoverMode === 'background' || activeMode === 'background') && /*#__PURE__*/ _jsx(Ripple, {
+                needRipple: needRipple,
+                clicks: clicks
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=Tappable.js.map

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 } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles['Tappable--hasPointer-none'];\n    case false:\n      return styles['Tappable--hasPointer-false'];\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps) => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        baseClassName,\n        styles['Tappable'],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'],\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","styles","sizeXClassNames","none","compact","hasPointerClassName","hasPointer","undefined","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","REGULAR","hoverClassName","activeClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAAwB,yBAAyB;AACnF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,WAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAoB,UAAU;AAClF,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpCG,SAASH,MAAM,CAAC,0BAA0B;AAC5C;AAEA,SAASI,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH,OAAON,MAAM,CAAC,4BAA4B;QAC5C,KAAK;YACH,OAAOA,MAAM,CAAC,6BAA6B;IAC/C;IAEA,OAAOM;AACT;AAUA,OAAO,MAAMC,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYb,kBAAkB,EAC9Bc,aAAad,kBAAkB,EAC/Be,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAcxB,eAAeuB;IAEnC,MAAM,EAAEE,QAAQ,MAAM,EAAEZ,UAAU,EAAE,GAAGhB;IAEvC,MAAM6B,aAAavB,mBAAmBiB,YAAYP;IAClD,MAAM,EAAEc,MAAM,EAAE,GAAGC,cAAc,GAAGxB,UAAUsB,YAAYb;IAE1D,MAAMgB,WAAW9B,WAAW6B,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,oBAAC/B;QACCe,eAAepB,WACboB,eACAR,MAAM,CAAC,WAAW,EAClBiB,UAAU3B,SAASmC,OAAO,IAAIxB,eAAe,CAACgB,MAAM,EACpDR,qBAAqB,aAAaT,MAAM,CAAC,gCAAgC,EACzEI,oBAAoBC;QAEtBqB,gBAAgB3B,WAAWY;QAC3BgB,iBAAiB9B,YAAYe;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;OAEZL,UACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,oBAAClB;QAAOwB,YAAYA;QAAYC,QAAQA;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles['Tappable--hasPointer-none'];\n    case false:\n      return styles['Tappable--hasPointer-false'];\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps) => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        baseClassName,\n        styles['Tappable'],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'],\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","SizeType","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","styles","sizeXClassNames","none","compact","hasPointerClassName","hasPointer","undefined","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","REGULAR","hoverClassName","activeClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAAwB,yBAAyB;AACnF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,WAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAoB,UAAU;AAClF,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpCG,SAASH,MAAM,CAAC,0BAA0B;AAC5C;AAEA,SAASI,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH,OAAON,MAAM,CAAC,4BAA4B;QAC5C,KAAK;YACH,OAAOA,MAAM,CAAC,6BAA6B;IAC/C;IAEA,OAAOM;AACT;AAUA,OAAO,MAAMC,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYb,kBAAkB,EAC9Bc,aAAad,kBAAkB,EAC/Be,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAcxB,eAAeuB;IAEnC,MAAM,EAAEE,QAAQ,MAAM,EAAEZ,UAAU,EAAE,GAAGhB;IAEvC,MAAM6B,aAAavB,mBAAmBiB,YAAYP;IAClD,MAAM,EAAEc,MAAM,EAAE,GAAGC,cAAc,GAAGxB,UAAUsB,YAAYb;IAE1D,MAAMgB,WAAW9B,WAAW6B,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAAC/B;QACCe,eAAepB,WACboB,eACAR,MAAM,CAAC,WAAW,EAClBiB,UAAU3B,SAASmC,OAAO,IAAIxB,eAAe,CAACgB,MAAM,EACpDR,qBAAqB,aAAaT,MAAM,CAAC,gCAAgC,EACzEI,oBAAoBC;QAEtBqB,gBAAgB3B,WAAWY;QAC3BgB,iBAAiB9B,YAAYe;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAAClB;gBAAOwB,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/state.tsx"],"sourcesContent":["import { LiteralUnion } from '../../types';\nimport styles from './Tappable.module.css';\n\ntype StateMode = 'opacity' | 'background' | 'none';\nexport type StateModeLiteral = LiteralUnion<StateMode, string>;\n\nexport interface StateProps {\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateModeLiteral;\n\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateModeLiteral;\n}\n\n/**\n * Состояние по умолчанию\n */\nexport const DEFAULT_STATE_MODE: StateMode = 'background';\n\nconst stylesHovered: Record<string, string> = {\n  background: styles['Tappable--hovered-background'],\n  opacity: styles['Tappable--hovered-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE) {\n  const presetClass = stylesHovered[hoverMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : hoverMode;\n}\n\nconst stylesActivated: Record<string, string> = {\n  background: styles['Tappable--activated-background'],\n  opacity: styles['Tappable--activated-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE) {\n  const presetClass = stylesActivated[activeMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : activeMode;\n}\n"],"names":["styles","DEFAULT_STATE_MODE","stylesHovered","background","opacity","none","hoverClass","hoverMode","presetClass","undefined","stylesActivated","activeClass","activeMode"],"mappings":"AACA,OAAOA,YAAY,wBAAwB;AAiB3C;;CAEC,GACD,OAAO,MAAMC,qBAAgC,aAAa;AAE1D,MAAMC,gBAAwC;IAC5CC,YAAYH,MAAM,CAAC,+BAA+B;IAClDI,SAASJ,MAAM,CAAC,4BAA4B;IAC5CK,MAAM;AACR;AAEA;;CAEC,GACD,OAAO,SAASC,WAAWC,YAA8BN,kBAAkB;IACzE,MAAMO,cAAcN,aAAa,CAACK,UAAU;IAE5C,OAAOC,gBAAgBC,YAAYD,cAAcD;AACnD;AAEA,MAAMG,kBAA0C;IAC9CP,YAAYH,MAAM,CAAC,iCAAiC;IACpDI,SAASJ,MAAM,CAAC,8BAA8B;IAC9CK,MAAM;AACR;AAEA;;CAEC,GACD,OAAO,SAASM,YAAYC,aAA+BX,kBAAkB;IAC3E,MAAMO,cAAcE,eAAe,CAACE,WAAW;IAE/C,OAAOJ,gBAAgBC,YAAYD,cAAcI;AACnD"}
+{"version":3,"sources":["../../../../src/components/Tappable/state.tsx"],"sourcesContent":["import { LiteralUnion } from '../../types';\nimport styles from './Tappable.module.css';\n\ntype StateMode = 'opacity' | 'background' | 'none';\nexport type StateModeLiteral = LiteralUnion<StateMode, string>;\n\nexport interface StateProps {\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateModeLiteral;\n\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateModeLiteral;\n}\n\n/**\n * Состояние по умолчанию\n */\nexport const DEFAULT_STATE_MODE: StateMode = 'background';\n\nconst stylesHovered: Record<string, string> = {\n  background: styles['Tappable--hovered-background'],\n  opacity: styles['Tappable--hovered-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE) {\n  const presetClass = stylesHovered[hoverMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : hoverMode;\n}\n\nconst stylesActivated: Record<string, string> = {\n  background: styles['Tappable--activated-background'],\n  opacity: styles['Tappable--activated-opacity'],\n  none: '',\n};\n\n/**\n * Определяем класс наведения\n */\nexport function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE) {\n  const presetClass = stylesActivated[activeMode] as string | undefined;\n\n  return presetClass !== undefined ? presetClass : activeMode;\n}\n"],"names":["styles","DEFAULT_STATE_MODE","stylesHovered","background","opacity","none","hoverClass","hoverMode","presetClass","undefined","stylesActivated","activeClass","activeMode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,OAAOA,YAAY,wBAAwB;AAiB3C;;CAEC,GACD,OAAO,MAAMC,qBAAgC,aAAa;AAE1D,MAAMC,gBAAwC;IAC5CC,YAAYH,MAAM,CAAC,+BAA+B;IAClDI,SAASJ,MAAM,CAAC,4BAA4B;IAC5CK,MAAM;AACR;AAEA;;CAEC,GACD,OAAO,SAASC,WAAWC,YAA8BN,kBAAkB;IACzE,MAAMO,cAAcN,aAAa,CAACK,UAAU;IAE5C,OAAOC,gBAAgBC,YAAYD,cAAcD;AACnD;AAEA,MAAMG,kBAA0C;IAC9CP,YAAYH,MAAM,CAAC,iCAAiC;IACpDI,SAASJ,MAAM,CAAC,8BAA8B;IAC9CK,MAAM;AACR;AAEA;;CAEC,GACD,OAAO,SAASM,YAAYC,aAA+BX,kBAAkB;IAC3E,MAAMO,cAAcE,eAAe,CAACE,WAAW;IAE/C,OAAOJ,gBAAgBC,YAAYD,cAAcI;AACnD"}

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
+import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
-export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, Pick<React.CSSProperties, 'maxHeight'>, Pick<FormFieldProps, 'status'> {
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, Pick<React.CSSProperties, 'maxHeight'>, HasAlign, Pick<FormFieldProps, 'status' | 'mode'> {
     grow?: boolean;
-    onResize?(el: HTMLTextAreaElement): void;
+    onResize?: (el: HTMLTextAreaElement) => void;
     defaultValue?: string;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */
-export declare const Textarea: ({ grow, style, onResize, className, getRootRef, getRef, rows, maxHeight, status, onChange, ...restProps }: TextareaProps) => React.JSX.Element;
+export declare const Textarea: ({ grow, style, onResize, className, getRootRef, getRef, rows, maxHeight, status, onChange, align, mode, ...restProps }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Textarea.d.ts.map

package/dist/cssm/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,MAAM,CAAC,mBAAmB,CAAC,EAC3B,UAAU,CAAC,WAAW,CAAC,EACvB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,EACtC,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,CAAC,EAAE,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,8GAYlB,aAAa,sBA6Cf,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACzE,MAAM,CAAC,mBAAmB,CAAC,EAC3B,UAAU,CAAC,WAAW,CAAC,EACvB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,EACtC,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,2HAclB,aAAa,4CA+Cf,CAAC"}