@vkontakte/vkui 8.1.3 → 8.2.0

package/dist/components/Spinner/icons.js

@@ -1,13 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-function iconClassName(size) {
-    return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
-}
+import * as React from "react";
+import { SvgIcon } from "./SvgIcon.js";
 export function Icon16Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(16),
-        "aria-hidden": "true",
-        width: "16",
-        height: "16",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 16,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z",
@@ -16,11 +12,8 @@ export function Icon16Spinner({ children }) {
     });
 }
 export function Icon24Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(24),
-        "aria-hidden": "true",
-        width: "24",
-        height: "24",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 24,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123",
@@ -29,11 +22,8 @@ export function Icon24Spinner({ children }) {
     });
 }
 export function Icon32Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(32),
-        "aria-hidden": "true",
-        width: "32",
-        height: "32",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 32,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16",
@@ -42,11 +32,8 @@ export function Icon32Spinner({ children }) {
     });
 }
 export function Icon44Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(44),
-        "aria-hidden": "true",
-        width: "44",
-        height: "44",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 44,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spinner/icons.tsx"],"sourcesContent":["import type * as React from 'react';\n\nfunction iconClassName(size: number) {\n  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;\n}\n\nexport function Icon16Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(16)} aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\n        d=\"M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon24Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(24)} aria-hidden=\"true\" width=\"24\" height=\"24\">\n      <path\n        fill=\"currentColor\"\n        d=\"M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon32Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(32)} aria-hidden=\"true\" width=\"32\" height=\"32\">\n      <path\n        fill=\"currentColor\"\n        d=\"M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon44Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(44)} aria-hidden=\"true\" width=\"44\" height=\"44\">\n      <path\n        fill=\"currentColor\"\n        d=\"M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n"],"names":["iconClassName","size","Icon16Spinner","children","svg","className","aria-hidden","width","height","path","fill","d","Icon24Spinner","Icon32Spinner","Icon44Spinner"],"mappings":";AAEA,SAASA,cAAcC,IAAY;IACjC,OAAO,CAAC,mBAAmB,EAAEA,KAAK,aAAa,EAAEA,KAAK,aAAa,EAAEA,MAAM;AAC7E;AAEA,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT;AAEA,OAAO,SAASS,cAAc,EAAET,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT;AAEA,OAAO,SAASU,cAAc,EAAEV,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT;AAEA,OAAO,SAASW,cAAc,EAAEX,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT"}
+{"version":3,"sources":["../../../src/components/Spinner/icons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SvgIcon } from './SvgIcon';\n\nexport function Icon16Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={16}>\n      <path\n        fill=\"currentColor\"\n        d=\"M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n\nexport function Icon24Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={24}>\n      <path\n        fill=\"currentColor\"\n        d=\"M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n\nexport function Icon32Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={32}>\n      <path\n        fill=\"currentColor\"\n        d=\"M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n\nexport function Icon44Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={44}>\n      <path\n        fill=\"currentColor\"\n        d=\"M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n"],"names":["React","SvgIcon","Icon16Spinner","children","size","path","fill","d","Icon24Spinner","Icon32Spinner","Icon44Spinner"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,eAAY;AAEpC,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT;AAEA,OAAO,SAASK,cAAc,EAAEL,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT;AAEA,OAAO,SAASM,cAAc,EAAEN,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT;AAEA,OAAO,SAASO,cAAc,EAAEP,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT"}

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

@@ -2,7 +2,7 @@ import type * as React from 'react';
 import type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';
 export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
-     * @deprecated Since 7.9.0. Будет удалeно в **VKUI v9**.
+     * @deprecated Since 7.9.0. Будет удалено в **VKUI v9**.
      * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.
      */
     getRef?: React.Ref<HTMLDivElement> | undefined;
@@ -18,7 +18,7 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
     /**
      * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
      *
-     * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.
+     * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.
      * Начиная с **VKUI v7** компоненты можно располагать в любом
      * месте приложения в пределах `AppRoot`.
      */
@@ -26,7 +26,7 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
     /**
      * Свойство для отрисовки `ModalRoot`.
      *
-     * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.
+     * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.
      * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом
      * месте приложения в пределах `AppRoot`.
      */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SplitLayout.module.css';\n\nconst warn = warnOnce('SplitLayout');\n\nexport interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * @deprecated Since 7.9.0. Будет удалeно в **VKUI v9**.\n   * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLDivElement> | undefined;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `content`: свойства для прокидывания в контент;.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n        content?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode | undefined;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  modal?: React.ReactNode | undefined;\n  /**\n   * Компонент для отрисовки заголовка.\n   */\n  header?: React.ReactNode | undefined;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean | undefined;\n}\n\n/**\n * @see https://vkui.io/components/split-layout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  center,\n  getRef,\n  children,\n\n  slotProps,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development') {\n    if (getRef) {\n      warn(\n        'Свойство `getRef` устаревшее, используйте `slotProps={ content: { getRootRef: ... } }`',\n      );\n    }\n    if (popout) {\n      warn(\n        'Свойство `popout` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n    if (modal) {\n      warn(\n        'Свойство `modal` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n  }\n\n  const rootRest = useMergeProps(restProps, slotProps?.root);\n  const contentRest = useMergeProps({ getRootRef: getRef }, slotProps?.content);\n\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, platform === 'ios' && styles.ios)}\n      {...rootRest}\n    >\n      {header}\n      <RootComponent\n        baseClassName={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n        )}\n        {...contentRest}\n      >\n        {children}\n        {modal}\n        {popout}\n      </RootComponent>\n    </RootComponent>\n  );\n};\n"],"names":["classNames","useMergeProps","usePlatform","warnOnce","RootComponent","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,OAAOF,SAAS;AAiDtB;;CAEC,GACD,OAAO,MAAMG,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,QAAQ,EAERC,SAAS,EACT,GAAGC,WACc;IACjB,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIN,QAAQ;YACVN,KACE;QAEJ;QACA,IAAIE,QAAQ;YACVF,KACE;QAEJ;QACA,IAAIG,OAAO;YACTH,KACE;QAEJ;IACF;IAEA,MAAMa,WAAWjB,cAAca,WAAWD,WAAWM;IACrD,MAAMC,cAAcnB,cAAc;QAAEoB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWrB;IAEjB,qBACE,MAACE;QACCoB,eAAexB,oCAAwBuB,aAAa;QACnD,GAAGL,QAAQ;;YAEXT;0BACD,MAACL;gBACCoB,eAAexB,qCAEb,CAAC,CAACS,0CACFC;gBAED,GAAGU,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SplitLayout.module.css';\n\nconst warn = warnOnce('SplitLayout');\n\nexport interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * @deprecated Since 7.9.0. Будет удалено в **VKUI v9**.\n   * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLDivElement> | undefined;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `content`: свойства для прокидывания в контент;.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n        content?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode | undefined;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  modal?: React.ReactNode | undefined;\n  /**\n   * Компонент для отрисовки заголовка.\n   */\n  header?: React.ReactNode | undefined;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean | undefined;\n}\n\n/**\n * @see https://vkui.io/components/split-layout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  center,\n  getRef,\n  children,\n\n  slotProps,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development') {\n    if (getRef) {\n      warn(\n        'Свойство `getRef` устаревшее, используйте `slotProps={ content: { getRootRef: ... } }`',\n      );\n    }\n    if (popout) {\n      warn(\n        'Свойство `popout` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n    if (modal) {\n      warn(\n        'Свойство `modal` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n  }\n\n  const rootRest = useMergeProps(restProps, slotProps?.root);\n  const contentRest = useMergeProps({ getRootRef: getRef }, slotProps?.content);\n\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, platform === 'ios' && styles.ios)}\n      {...rootRest}\n    >\n      {header}\n      <RootComponent\n        baseClassName={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n        )}\n        {...contentRest}\n      >\n        {children}\n        {modal}\n        {popout}\n      </RootComponent>\n    </RootComponent>\n  );\n};\n"],"names":["classNames","useMergeProps","usePlatform","warnOnce","RootComponent","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,OAAOF,SAAS;AAiDtB;;CAEC,GACD,OAAO,MAAMG,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,QAAQ,EAERC,SAAS,EACT,GAAGC,WACc;IACjB,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIN,QAAQ;YACVN,KACE;QAEJ;QACA,IAAIE,QAAQ;YACVF,KACE;QAEJ;QACA,IAAIG,OAAO;YACTH,KACE;QAEJ;IACF;IAEA,MAAMa,WAAWjB,cAAca,WAAWD,WAAWM;IACrD,MAAMC,cAAcnB,cAAc;QAAEoB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWrB;IAEjB,qBACE,MAACE;QACCoB,eAAexB,oCAAwBuB,aAAa;QACnD,GAAGL,QAAQ;;YAEXT;0BACD,MAACL;gBACCoB,eAAexB,qCAEb,CAAC,CAACS,0CACFC;gBAED,GAAGU,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabsItem/TabsItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAsBxE,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAC5C,wBAAwB,EACxB,IAAI,CACF,iBAAiB,EACf,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,WAAW,GACX,UAAU,GACV,kBAAkB,CACrB;IACH;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,sLAgBtB,aAAa,KAAG,KAAK,CAAC,SA4IxB,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabsItem/TabsItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAsBxE,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAC5C,wBAAwB,EACxB,IAAI,CACF,iBAAiB,EACf,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,WAAW,GACX,UAAU,GACV,kBAAkB,CACrB;IACH;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,sLAgBtB,aAAa,KAAG,KAAK,CAAC,SA4IxB,CAAC"}

package/dist/components/TabsItem/TabsItem.js

@@ -4,7 +4,6 @@ import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
-import { useDOM } from "../../lib/dom.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { TabsControllerContext } from "../Tabs/TabsControllerContext.js";
 import { TabsModeContext } from "../Tabs/TabsModeContext.js";
@@ -69,16 +68,15 @@ const warn = warnOnce('TabsItem');
     }
     const rootRef = useExternRef(getRootRef);
     const prevSelectedRef = React.useRef(undefined);
-    const { document } = useDOM();
     React.useEffect(function scrollToSelectedItem() {
         const isInitialRender = prevSelectedRef.current === undefined;
         const shouldScrollToSelected = withScrollToSelectedTab && !isInitialRender && prevSelectedRef.current !== selected && selected;
         prevSelectedRef.current = selected;
-        if (!shouldScrollToSelected || !rootRef.current || !document) {
+        if (!shouldScrollToSelected || !rootRef.current) {
             return;
         }
         const tabDOMRect = rootRef.current.getBoundingClientRect();
-        const isTabVerticallyOutsideOfViewport = tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;
+        const isTabVerticallyOutsideOfViewport = tabDOMRect.top < 0 || tabDOMRect.bottom > rootRef.current.ownerDocument.documentElement.clientHeight;
         /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если
        * элемент вертикально вне зоны видимости */ if (isTabVerticallyOutsideOfViewport) {
             return;
@@ -95,7 +93,6 @@ const warn = warnOnce('TabsItem');
          **/ }
     }, [
         rootRef,
-        document,
         scrollBehaviorToSelectedTab,
         withScrollToSelectedTab,
         selected

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsControllerContext } from '../Tabs/TabsControllerContext';\nimport { TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } 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 densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableOmitProps,\n      | 'Component'\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 | undefined;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkui.io/components/badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkui.io/components/counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number | undefined;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode | undefined;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean | undefined;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean | undefined;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkui.io/components/tabs#tabs-item\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected: selectedProp = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  id,\n  onClick,\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { density = 'none' } = useAdaptivity();\n  const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } =\n    React.useContext(TabsModeContext);\n  const controller = React.useContext(TabsControllerContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  const selected = selectedProp || (!!id && controller?.selectedTab === id);\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.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 (!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 prevSelectedRef = React.useRef<boolean | undefined>(undefined);\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      const isInitialRender = prevSelectedRef.current === undefined;\n      const shouldScrollToSelected =\n        withScrollToSelectedTab &&\n        !isInitialRender &&\n        prevSelectedRef.current !== selected &&\n        selected;\n\n      prevSelectedRef.current = selected;\n\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, scrollBehaviorToSelectedTab, withScrollToSelectedTab, selected],\n  );\n\n  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      onClick?.(e);\n      if (id) {\n        controller?.onChange(id);\n      }\n    },\n    [id, onClick, controller],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        density !== 'regular' && densityClassNames[density],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      onClick={controller ? _onClick : onClick}\n      id={id}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","useDOM","warnOnce","TabsControllerContext","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","densityClassNames","none","compact","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","density","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","controller","statusComponent","isTabFlow","selectedTab","Component","className","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelectedRef","useRef","document","useEffect","scrollToSelectedItem","isInitialRender","current","shouldScrollToSelected","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","div","level","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsControllerContext } from '../Tabs/TabsControllerContext';\nimport { TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } 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 densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableOmitProps,\n      | 'Component'\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 | undefined;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkui.io/components/badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkui.io/components/counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number | undefined;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode | undefined;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean | undefined;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean | undefined;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkui.io/components/tabs#tabs-item\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected: selectedProp = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  id,\n  onClick,\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { density = 'none' } = useAdaptivity();\n  const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } =\n    React.useContext(TabsModeContext);\n  const controller = React.useContext(TabsControllerContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  const selected = selectedProp || (!!id && controller?.selectedTab === id);\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.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 (!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 prevSelectedRef = React.useRef<boolean | undefined>(undefined);\n\n  React.useEffect(\n    function scrollToSelectedItem() {\n      const isInitialRender = prevSelectedRef.current === undefined;\n      const shouldScrollToSelected =\n        withScrollToSelectedTab &&\n        !isInitialRender &&\n        prevSelectedRef.current !== selected &&\n        selected;\n\n      prevSelectedRef.current = selected;\n\n      if (!shouldScrollToSelected || !rootRef.current) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 ||\n        tabDOMRect.bottom > rootRef.current.ownerDocument.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, scrollBehaviorToSelectedTab, withScrollToSelectedTab, selected],\n  );\n\n  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      onClick?.(e);\n      if (id) {\n        controller?.onChange(id);\n      }\n    },\n    [id, onClick, controller],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        density !== 'regular' && densityClassNames[density],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      onClick={controller ? _onClick : onClick}\n      id={id}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","warnOnce","TabsControllerContext","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","densityClassNames","none","compact","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","density","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","controller","statusComponent","isTabFlow","selectedTab","Component","className","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelectedRef","useRef","useEffect","scrollToSelectedItem","isInitialRender","current","shouldScrollToSelected","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","ownerDocument","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","div","level","aria-hidden","data-selected"],"mappings":"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"}

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

@@ -7,13 +7,13 @@ export interface TappableProps extends ClickableProps, StateProps {
      */
     borderRadiusMode?: 'auto' | 'inherit' | undefined;
     /**
-     * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.
+     * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.
      *
      * Используйте свойство `activeMode`.
      */
     activeClassName?: string | undefined;
     /**
-     * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.
+     * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.
      *
      * Используйте свойство `hoverMode`.
      */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nfunction getViewWidthClassName(\n  viewWidth: ViewWidthType | 'none',\n  legacySizeX: SizeTypeValues | undefined,\n) {\n  // TODO [>=10]: #9015 Удалить это условие\n  if (legacySizeX !== undefined && legacySizeX === 'compact') {\n    return styles.withBorder;\n  }\n  if (viewWidth === 'none') {\n    return styles.withBorderOnSmallTabletMinus;\n  }\n  if (viewWidth < ViewWidth.SMALL_TABLET) {\n    return styles.withBorder;\n  }\n  return;\n}\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\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' | undefined;\n  /**\n   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.\n   *\n   * Используйте свойство `activeMode`.\n   */\n  activeClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n  /**\n   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.\n   *\n   * Используйте свойство `hoverMode`.\n   */\n  hoverClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n}\n\n/**\n * @deprecated Не наследуйтесь от этого типа и от TappableProps.\n *\n * Компонентам не нужны лишние свойства Tappable компонента.\n */\nexport type TappableOmitProps = Omit<\n  TappableProps,\n  'DefaultComponent' | 'baseClassName' | 'baseStyle'\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): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX: legacySizeX, viewWidth = '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        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        getViewWidthClassName(viewWidth, legacySizeX),\n        borderRadiusMode === 'inherit' && styles.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","ViewWidth","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","getViewWidthClassName","viewWidth","legacySizeX","undefined","SMALL_TABLET","hasPointerClassName","hasPointer","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAA8BC,SAAS,QAA4B,gCAAuB;AAC1F,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AAGvF,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,aAAaD,gBAAgB,WAAW;QAC1D;IACF;IACA,IAAID,cAAc,QAAQ;QACxB;IACF;IACA,IAAIA,YAAYX,UAAUc,YAAY,EAAE;QACtC;IACF;IACA;AACF;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKH;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAgCA,OAAO,MAAMI,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,OAAOf,WAAW,EAAED,YAAY,MAAM,EAAEK,UAAU,EAAE,GAAGjB;IAE/D,MAAM6B,aAAavB,mBAAmBiB,YAAYN;IAClD,MAAM,EAAEa,MAAM,EAAE,GAAGC,cAAc,GAAGxB,UAAUsB,YAAYZ;IAE1D,MAAMe,WAAW9B,WAAW6B,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAAC/B;QACCe,eAAepB,WACb,wBACAoB,qCAEAR,sBAAsBC,WAAWC,cACjCO,qBAAqB,kDACrBJ,oBAAoBC;QAEtBmB,gBAAgB1B,WAAWY;QAC3Be,iBAAiB7B,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"}
+{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nfunction getViewWidthClassName(\n  viewWidth: ViewWidthType | 'none',\n  legacySizeX: SizeTypeValues | undefined,\n) {\n  // TODO [>=10]: #9015 Удалить это условие\n  if (legacySizeX !== undefined && legacySizeX === 'compact') {\n    return styles.withBorder;\n  }\n  if (viewWidth === 'none') {\n    return styles.withBorderOnSmallTabletMinus;\n  }\n  if (viewWidth < ViewWidth.SMALL_TABLET) {\n    return styles.withBorder;\n  }\n  return;\n}\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\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' | undefined;\n  /**\n   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.\n   *\n   * Используйте свойство `activeMode`.\n   */\n  activeClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n  /**\n   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.\n   *\n   * Используйте свойство `hoverMode`.\n   */\n  hoverClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n}\n\n/**\n * @deprecated Не наследуйтесь от этого типа и от TappableProps.\n *\n * Компонентам не нужны лишние свойства Tappable компонента.\n */\nexport type TappableOmitProps = Omit<\n  TappableProps,\n  'DefaultComponent' | 'baseClassName' | 'baseStyle'\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): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX: legacySizeX, viewWidth = '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        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        getViewWidthClassName(viewWidth, legacySizeX),\n        borderRadiusMode === 'inherit' && styles.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","ViewWidth","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","getViewWidthClassName","viewWidth","legacySizeX","undefined","SMALL_TABLET","hasPointerClassName","hasPointer","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAA8BC,SAAS,QAA4B,gCAAuB;AAC1F,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AAGvF,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,aAAaD,gBAAgB,WAAW;QAC1D;IACF;IACA,IAAID,cAAc,QAAQ;QACxB;IACF;IACA,IAAIA,YAAYX,UAAUc,YAAY,EAAE;QACtC;IACF;IACA;AACF;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKH;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAgCA,OAAO,MAAMI,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,OAAOf,WAAW,EAAED,YAAY,MAAM,EAAEK,UAAU,EAAE,GAAGjB;IAE/D,MAAM6B,aAAavB,mBAAmBiB,YAAYN;IAClD,MAAM,EAAEa,MAAM,EAAE,GAAGC,cAAc,GAAGxB,UAAUsB,YAAYZ;IAE1D,MAAMe,WAAW9B,WAAW6B,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAAC/B;QACCe,eAAepB,WACb,wBACAoB,qCAEAR,sBAAsBC,WAAWC,cACjCO,qBAAqB,kDACrBJ,oBAAoBC;QAEtBmB,gBAAgB1B,WAAWY;QAC3Be,iBAAiB7B,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/components/WriteBar/WriteBar.d.ts

@@ -42,5 +42,19 @@ export interface WriteBarProps extends Pick<React.TextareaHTMLAttributes<HTMLTex
 /**
  * @see https://vkui.io/components/write-bar
  */
-export declare const WriteBar: ({ before, inlineAfter, after, onHeightChange, shadow, getRef, autoComplete, autoCapitalize, autoCorrect, cols, dirName, disabled, maxLength, minLength, name, placeholder, readOnly, required, value: valueProp, wrap, rows, form, onChange: onChangeProp, onFocus, onBlur, id, inputMode, defaultValue, autoFocus, tabIndex, spellCheck, slotProps, ...restProps }: WriteBarProps) => React.ReactNode;
+export declare const WriteBar: {
+    ({ before, inlineAfter, after, onHeightChange, shadow, getRef, autoComplete, autoCapitalize, autoCorrect, cols, dirName, disabled, maxLength, minLength, name, placeholder, readOnly, required, value: valueProp, wrap, rows, form, onChange, onFocus, onBlur, id, inputMode, defaultValue, autoFocus, tabIndex, spellCheck, slotProps, ...restProps }: WriteBarProps): React.ReactNode;
+    FormField: {
+        ({ className, ...restProps }: import("../..").FlexProps): import("react/jsx-runtime").JSX.Element;
+        InlineAfter: ({ className, ...restProps }: import("../..").FlexProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    Textarea: ({ className, getRootRef, onHeightChange, onChange, ...restProps }: import("../RootComponent/RootComponent").RootComponentProps<HTMLTextAreaElement> & {
+        onHeightChange?: VoidFunction | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ shadow, className, ...restProps }: import("../..").FlexProps & {
+        shadow?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Before: ({ className, ...restProps }: import("../..").FlexProps) => import("react/jsx-runtime").JSX.Element;
+    After: ({ className, ...restProps }: import("../..").FlexProps) => import("react/jsx-runtime").JSX.Element;
+};
 //# sourceMappingURL=WriteBar.d.ts.map

package/dist/components/WriteBar/WriteBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WriteBar.d.ts","sourceRoot":"","sources":["../../../src/components/WriteBar/WriteBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAUhE,MAAM,WAAW,aACf,SAAQ,IAAI,CACR,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAC/C,cAAc,GACd,gBAAgB,GAChB,aAAa,GACb,MAAM,GACN,SAAS,GACT,UAAU,GACV,WAAW,GACX,WAAW,GACX,MAAM,GACN,aAAa,GACb,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,UAAU,GACV,SAAS,GACT,QAAQ,CACX,EACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC,EAC7E,UAAU,CAAC,cAAc,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAAC;IACpD;;;;OAIG;IACH,SAAS,CAAC,EACN;QACE,IAAI,CAAC,EACD,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GACrD,UAAU,CAAC,cAAc,CAAC,GAC1B,gBAAgB,CAAC,GACnB,SAAS,CAAC;QACd,QAAQ,CAAC,EACL,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,GAChD,UAAU,CAAC,mBAAmB,CAAC,GAC/B,gBAAgB,CAAC,GACnB,SAAS,CAAC;KACf,GACD,SAAS,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAC1C;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;CAC9B;AAYD;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,qWAsCtB,aAAa,KAAG,KAAK,CAAC,SA8ExB,CAAC"}
+{"version":3,"file":"WriteBar.d.ts","sourceRoot":"","sources":["../../../src/components/WriteBar/WriteBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAShE,MAAM,WAAW,aACf,SAAQ,IAAI,CACR,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAC/C,cAAc,GACd,gBAAgB,GAChB,aAAa,GACb,MAAM,GACN,SAAS,GACT,UAAU,GACV,WAAW,GACX,WAAW,GACX,MAAM,GACN,aAAa,GACb,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,UAAU,GACV,SAAS,GACT,QAAQ,CACX,EACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC,EAC7E,UAAU,CAAC,cAAc,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAAC;IACpD;;;;OAIG;IACH,SAAS,CAAC,EACN;QACE,IAAI,CAAC,EACD,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GACrD,UAAU,CAAC,cAAc,CAAC,GAC1B,gBAAgB,CAAC,GACnB,SAAS,CAAC;QACd,QAAQ,CAAC,EACL,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,GAChD,UAAU,CAAC,mBAAmB,CAAC,GAC/B,gBAAgB,CAAC,GACnB,SAAS,CAAC;KACf,GACD,SAAS,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAC1C;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;4VAsClB,aAAa,GAAG,KAAK,CAAC,SAAS;;;;;;;;;;;;;CAoDjC,CAAC"}

package/dist/components/WriteBar/WriteBar.js

@@ -1,43 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { classNames, hasReactNode } from "@vkontakte/vkjs";
-import { useExternRef } from "../../hooks/useExternRef.js";
+import { hasReactNode } from "@vkontakte/vkjs";
 import { useMergeProps } from "../../hooks/useMergeProps.js";
-import { usePlatform } from "../../hooks/usePlatform.js";
-import { callMultiple } from "../../lib/callMultiple.js";
 import { warnOnce } from "../../lib/warnOnce.js";
-import { RootComponent } from "../RootComponent/RootComponent.js";
-import { useResizeTextarea } from "../Textarea/useResizeTextarea.js";
-import { Headline } from "../Typography/Headline/Headline.js";
-import { Title } from "../Typography/Title/Title.js";
+import { WriteBarBeforeOrAfter } from "./WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.js";
+import { WriteBarFormField } from "./WriteBarFormField/WriteBarFormField.js";
+import { WriteBarFormFieldInlineAfter } from "./WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter.js";
+import { WriteBarRoot } from "./WriteBarRoot/WriteBarRoot.js";
+import { WriteBarTextarea } from "./WriteBarTextarea/WriteBarTextarea.js";
 const warn = warnOnce('WriteBar');
-const WriteBarTypography = (props)=>{
-    const platform = usePlatform();
-    if (platform === 'ios') {
-        return /*#__PURE__*/ _jsx(Title, {
-            ...props,
-            level: "3",
-            weight: "3"
-        });
-    }
-    return /*#__PURE__*/ _jsx(Headline, {
-        weight: "3",
-        ...props
-    });
-};
 /**
  * @see https://vkui.io/components/write-bar
  */ export const WriteBar = ({ // WriteBarProps
 before, inlineAfter, after, onHeightChange, shadow = false, getRef, // textarea props
-autoComplete, autoCapitalize, autoCorrect, cols, dirName, disabled, maxLength, minLength, name, placeholder, readOnly, required, value: valueProp, wrap, rows, form, onChange: onChangeProp, onFocus, onBlur, id, inputMode, defaultValue, autoFocus, tabIndex, spellCheck, slotProps, ...restProps })=>{
+autoComplete, autoCapitalize, autoCorrect, cols, dirName, disabled, maxLength, minLength, name, placeholder, readOnly, required, value: valueProp, wrap, rows, form, onChange, onFocus, onBlur, id, inputMode, defaultValue, autoFocus, tabIndex, spellCheck, slotProps, ...restProps })=>{
     /* istanbul ignore if: не проверяем в тестах */ if (process.env.NODE_ENV === 'development' && getRef) {
         warn('Свойство `getRef` устаревшее, используйте `slotProps={ textArea: { getRootRef: ... } }`');
     }
-    const platform = usePlatform();
     const rootProps = useMergeProps(restProps, slotProps?.root);
-    const { onChange, getRootRef: getTextAreaRef, ...textAreaRest } = useMergeProps({
-        className: "vkuiWriteBar__textarea",
+    const textAreaRest = useMergeProps({
         getRootRef: getRef,
         autoComplete,
         autoCapitalize,
@@ -55,7 +37,7 @@ autoComplete, autoCapitalize, autoCorrect, cols, dirName, disabled, maxLength, m
         wrap,
         rows,
         form,
-        onChange: onChangeProp,
+        onChange,
         onFocus,
         onBlur,
         id,
@@ -65,44 +47,34 @@ autoComplete, autoCapitalize, autoCorrect, cols, dirName, disabled, maxLength, m
         tabIndex,
         spellCheck
     }, slotProps?.textArea);
-    const [refResizeTextarea, resize] = useResizeTextarea(onHeightChange, true);
-    const textareaRef = useExternRef(getTextAreaRef, refResizeTextarea);
-    React.useEffect(resize, [
-        resize,
-        platform
-    ]);
-    return /*#__PURE__*/ _jsx(RootComponent, {
-        baseClassName: classNames("vkuiWriteBar__host", platform === 'ios' && "vkuiWriteBar__ios", shadow && "vkuiWriteBar__shadow"),
+    return /*#__PURE__*/ _jsxs(WriteBarRoot, {
+        shadow: shadow,
         ...rootProps,
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: "vkuiWriteBar__form",
-            children: [
-                hasReactNode(before) && /*#__PURE__*/ _jsx("div", {
-                    className: "vkuiWriteBar__before",
-                    children: before
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: "vkuiWriteBar__formIn",
-                    children: [
-                        /*#__PURE__*/ _jsx(WriteBarTypography, {
-                            Component: "textarea",
-                            onChange: callMultiple(onChange, resize),
-                            getRootRef: textareaRef,
-                            ...textAreaRest
-                        }),
-                        hasReactNode(inlineAfter) && /*#__PURE__*/ _jsx("div", {
-                            className: "vkuiWriteBar__inlineAfter",
-                            children: inlineAfter
-                        })
-                    ]
-                }),
-                hasReactNode(after) && /*#__PURE__*/ _jsx("div", {
-                    className: "vkuiWriteBar__after",
-                    children: after
-                })
-            ]
-        })
+        children: [
+            hasReactNode(before) && /*#__PURE__*/ _jsx(WriteBarBeforeOrAfter, {
+                children: before
+            }),
+            /*#__PURE__*/ _jsxs(WriteBarFormField, {
+                children: [
+                    /*#__PURE__*/ _jsx(WriteBarTextarea, {
+                        onHeightChange: onHeightChange,
+                        ...textAreaRest
+                    }),
+                    hasReactNode(inlineAfter) && /*#__PURE__*/ _jsx(WriteBarFormFieldInlineAfter, {
+                        children: inlineAfter
+                    })
+                ]
+            }),
+            hasReactNode(after) && /*#__PURE__*/ _jsx(WriteBarBeforeOrAfter, {
+                children: after
+            })
+        ]
     });
 };
+WriteBar.FormField = WriteBarFormField;
+WriteBar.Textarea = WriteBarTextarea;
+WriteBar.Root = WriteBarRoot;
+WriteBar.Before = WriteBarBeforeOrAfter;
+WriteBar.After = WriteBarBeforeOrAfter;
 
 //# sourceMappingURL=WriteBar.js.map

package/dist/components/WriteBar/WriteBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/WriteBar/WriteBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { useResizeTextarea } from '../Textarea/useResizeTextarea';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport type { TypographyProps } from '../Typography/Typography';\nimport styles from './WriteBar.module.css';\n\nconst warn = warnOnce('WriteBar');\n\nexport interface WriteBarProps\n  extends Pick<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      | 'autoComplete'\n      | 'autoCapitalize'\n      | 'autoCorrect'\n      | 'cols'\n      | 'dirName'\n      | 'disabled'\n      | 'maxLength'\n      | 'minLength'\n      | 'name'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'rows'\n      | 'value'\n      | 'wrap'\n      | 'form'\n      | 'onChange'\n      | 'onFocus'\n      | 'onBlur'\n    >,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur'>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ textArea: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLTextAreaElement> | undefined;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `textArea`: свойства для прокидывания в поле ввода.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &\n              HasRootRef<HTMLDivElement> &\n              HasDataAttribute)\n          | undefined;\n        textArea?:\n          | (React.TextareaHTMLAttributes<HTMLTextAreaElement> &\n              HasRootRef<HTMLTextAreaElement> &\n              HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * Содержимое, отображаемое слева от поля ввода.\n   */\n  before?: React.ReactNode | undefined;\n  /**\n   * Содержимое, отображаемое поверх поля ввода (актуально для iOS).\n   */\n  inlineAfter?: React.ReactNode | undefined;\n  /**\n   * Содержимое, отображаемое справа от поля ввода.\n   */\n  after?: React.ReactNode | undefined;\n  /**\n   * Вызывается при смене высоты поля ввода.\n   */\n  onHeightChange?: VoidFunction | undefined;\n  /**\n   * Добавляет тень вокруг поля ввода.\n   */\n  shadow?: boolean | undefined;\n  /**\n   * @deprecated Неиспользуемое свойство.\n   */\n  children?: never | undefined;\n}\n\nconst WriteBarTypography = (props: TypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return <Title {...props} level=\"3\" weight=\"3\" />;\n  }\n\n  return <Headline weight=\"3\" {...props} />;\n};\n\n/**\n * @see https://vkui.io/components/write-bar\n */\nexport const WriteBar = ({\n  // WriteBarProps\n  before,\n  inlineAfter,\n  after,\n  onHeightChange,\n  shadow = false,\n  getRef,\n\n  // textarea props\n  autoComplete,\n  autoCapitalize,\n  autoCorrect,\n  cols,\n  dirName,\n  disabled,\n  maxLength,\n  minLength,\n  name,\n  placeholder,\n  readOnly,\n  required,\n  value: valueProp,\n  wrap,\n  rows,\n  form,\n  onChange: onChangeProp,\n  onFocus,\n  onBlur,\n  id,\n  inputMode,\n  defaultValue,\n  autoFocus,\n  tabIndex,\n  spellCheck,\n\n  slotProps,\n  ...restProps\n}: WriteBarProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && getRef) {\n    warn('Свойство `getRef` устаревшее, используйте `slotProps={ textArea: { getRootRef: ... } }`');\n  }\n\n  const platform = usePlatform();\n\n  const rootProps = useMergeProps(restProps, slotProps?.root);\n\n  const {\n    onChange,\n    getRootRef: getTextAreaRef,\n    ...textAreaRest\n  } = useMergeProps(\n    {\n      className: styles.textarea,\n      getRootRef: getRef,\n      autoComplete,\n      autoCapitalize,\n      autoCorrect,\n      cols,\n      dirName,\n      disabled,\n      maxLength,\n      minLength,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      value: valueProp,\n      wrap,\n      rows,\n      form,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      id,\n      inputMode,\n      defaultValue,\n      autoFocus,\n      tabIndex,\n      spellCheck,\n    },\n    slotProps?.textArea,\n  );\n\n  const [refResizeTextarea, resize] = useResizeTextarea(onHeightChange, true);\n  const textareaRef = useExternRef(getTextAreaRef, refResizeTextarea);\n\n  React.useEffect(resize, [resize, platform]);\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        shadow && styles.shadow,\n      )}\n      {...rootProps}\n    >\n      <div className={styles.form}>\n        {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n\n        <div className={styles.formIn}>\n          <WriteBarTypography\n            Component=\"textarea\"\n            onChange={callMultiple(onChange, resize)}\n            getRootRef={textareaRef}\n            {...textAreaRest}\n          />\n          {hasReactNode(inlineAfter) && <div className={styles.inlineAfter}>{inlineAfter}</div>}\n        </div>\n\n        {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useExternRef","useMergeProps","usePlatform","callMultiple","warnOnce","RootComponent","useResizeTextarea","Headline","Title","warn","WriteBarTypography","props","platform","level","weight","WriteBar","before","inlineAfter","after","onHeightChange","shadow","getRef","autoComplete","autoCapitalize","autoCorrect","cols","dirName","disabled","maxLength","minLength","name","placeholder","readOnly","required","value","valueProp","wrap","rows","form","onChange","onChangeProp","onFocus","onBlur","id","inputMode","defaultValue","autoFocus","tabIndex","spellCheck","slotProps","restProps","process","env","NODE_ENV","rootProps","root","getRootRef","getTextAreaRef","textAreaRest","className","textArea","refResizeTextarea","resize","textareaRef","useEffect","baseClassName","div","Component"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,KAAK,QAAQ,+BAA4B;AAIlD,MAAMC,OAAOL,SAAS;AA4EtB,MAAMM,qBAAqB,CAACC;IAC1B,MAAMC,WAAWV;IAEjB,IAAIU,aAAa,OAAO;QACtB,qBAAO,KAACJ;YAAO,GAAGG,KAAK;YAAEE,OAAM;YAAIC,QAAO;;IAC5C;IAEA,qBAAO,KAACP;QAASO,QAAO;QAAK,GAAGH,KAAK;;AACvC;AAEA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvB,gBAAgB;AAChBC,MAAM,EACNC,WAAW,EACXC,KAAK,EACLC,cAAc,EACdC,SAAS,KAAK,EACdC,MAAM,EAEN,iBAAiB;AACjBC,YAAY,EACZC,cAAc,EACdC,WAAW,EACXC,IAAI,EACJC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,IAAI,EACJC,IAAI,EACJC,IAAI,EACJC,UAAUC,YAAY,EACtBC,OAAO,EACPC,MAAM,EACNC,EAAE,EACFC,SAAS,EACTC,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,UAAU,EAEVC,SAAS,EACT,GAAGC,WACW;IACd,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBhC,QAAQ;QACpDZ,KAAK;IACP;IAEA,MAAMG,WAAWV;IAEjB,MAAMoD,YAAYrD,cAAciD,WAAWD,WAAWM;IAEtD,MAAM,EACJhB,QAAQ,EACRiB,YAAYC,cAAc,EAC1B,GAAGC,cACJ,GAAGzD,cACF;QACE0D,SAAS;QACTH,YAAYnC;QACZC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC,OAAOC;QACPC;QACAC;QACAC;QACAC,UAAUC;QACVC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,GACAC,WAAWW;IAGb,MAAM,CAACC,mBAAmBC,OAAO,GAAGxD,kBAAkBa,gBAAgB;IACtE,MAAM4C,cAAc/D,aAAayD,gBAAgBI;IAEjDhE,MAAMmE,SAAS,CAACF,QAAQ;QAACA;QAAQlD;KAAS;IAE1C,qBACE,KAACP;QACC4D,eAAenE,iCAEbc,aAAa,8BACbQ;QAED,GAAGkC,SAAS;kBAEb,cAAA,MAACY;YAAIP,SAAS;;gBACX5D,aAAaiB,yBAAW,KAACkD;oBAAIP,SAAS;8BAAkB3C;;8BAEzD,MAACkD;oBAAIP,SAAS;;sCACZ,KAACjD;4BACCyD,WAAU;4BACV5B,UAAUpC,aAAaoC,UAAUuB;4BACjCN,YAAYO;4BACX,GAAGL,YAAY;;wBAEjB3D,aAAakB,8BAAgB,KAACiD;4BAAIP,SAAS;sCAAuB1C;;;;gBAGpElB,aAAamB,wBAAU,KAACgD;oBAAIP,SAAS;8BAAiBzC;;;;;AAI/D,EAAE"}
+{"version":3,"sources":["../../../src/components/WriteBar/WriteBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef } from '../../types';\nimport { WriteBarBeforeOrAfter } from './WriteBarBeforeOrAfter/WriteBarBeforeOrAfter';\nimport { WriteBarFormField } from './WriteBarFormField/WriteBarFormField';\nimport { WriteBarFormFieldInlineAfter } from './WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter';\nimport { WriteBarRoot } from './WriteBarRoot/WriteBarRoot';\nimport { WriteBarTextarea } from './WriteBarTextarea/WriteBarTextarea';\n\nconst warn = warnOnce('WriteBar');\n\nexport interface WriteBarProps\n  extends Pick<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      | 'autoComplete'\n      | 'autoCapitalize'\n      | 'autoCorrect'\n      | 'cols'\n      | 'dirName'\n      | 'disabled'\n      | 'maxLength'\n      | 'minLength'\n      | 'name'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'rows'\n      | 'value'\n      | 'wrap'\n      | 'form'\n      | 'onChange'\n      | 'onFocus'\n      | 'onBlur'\n    >,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur'>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ textArea: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLTextAreaElement> | undefined;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `textArea`: свойства для прокидывания в поле ввода.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &\n              HasRootRef<HTMLDivElement> &\n              HasDataAttribute)\n          | undefined;\n        textArea?:\n          | (React.TextareaHTMLAttributes<HTMLTextAreaElement> &\n              HasRootRef<HTMLTextAreaElement> &\n              HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * Содержимое, отображаемое слева от поля ввода.\n   */\n  before?: React.ReactNode | undefined;\n  /**\n   * Содержимое, отображаемое поверх поля ввода (актуально для iOS).\n   */\n  inlineAfter?: React.ReactNode | undefined;\n  /**\n   * Содержимое, отображаемое справа от поля ввода.\n   */\n  after?: React.ReactNode | undefined;\n  /**\n   * Вызывается при смене высоты поля ввода.\n   */\n  onHeightChange?: VoidFunction | undefined;\n  /**\n   * Добавляет тень вокруг поля ввода.\n   */\n  shadow?: boolean | undefined;\n  /**\n   * @deprecated Неиспользуемое свойство.\n   */\n  children?: never | undefined;\n}\n\n/**\n * @see https://vkui.io/components/write-bar\n */\nexport const WriteBar = ({\n  // WriteBarProps\n  before,\n  inlineAfter,\n  after,\n  onHeightChange,\n  shadow = false,\n  getRef,\n\n  // textarea props\n  autoComplete,\n  autoCapitalize,\n  autoCorrect,\n  cols,\n  dirName,\n  disabled,\n  maxLength,\n  minLength,\n  name,\n  placeholder,\n  readOnly,\n  required,\n  value: valueProp,\n  wrap,\n  rows,\n  form,\n  onChange,\n  onFocus,\n  onBlur,\n  id,\n  inputMode,\n  defaultValue,\n  autoFocus,\n  tabIndex,\n  spellCheck,\n\n  slotProps,\n  ...restProps\n}: WriteBarProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && getRef) {\n    warn('Свойство `getRef` устаревшее, используйте `slotProps={ textArea: { getRootRef: ... } }`');\n  }\n\n  const rootProps = useMergeProps(restProps, slotProps?.root);\n\n  const textAreaRest = useMergeProps(\n    {\n      getRootRef: getRef,\n      autoComplete,\n      autoCapitalize,\n      autoCorrect,\n      cols,\n      dirName,\n      disabled,\n      maxLength,\n      minLength,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      value: valueProp,\n      wrap,\n      rows,\n      form,\n      onChange,\n      onFocus,\n      onBlur,\n      id,\n      inputMode,\n      defaultValue,\n      autoFocus,\n      tabIndex,\n      spellCheck,\n    },\n    slotProps?.textArea,\n  );\n\n  return (\n    <WriteBarRoot shadow={shadow} {...rootProps}>\n      {hasReactNode(before) && <WriteBarBeforeOrAfter>{before}</WriteBarBeforeOrAfter>}\n      <WriteBarFormField>\n        <WriteBarTextarea onHeightChange={onHeightChange} {...textAreaRest} />\n        {hasReactNode(inlineAfter) && (\n          <WriteBarFormFieldInlineAfter>{inlineAfter}</WriteBarFormFieldInlineAfter>\n        )}\n      </WriteBarFormField>\n      {hasReactNode(after) && <WriteBarBeforeOrAfter>{after}</WriteBarBeforeOrAfter>}\n    </WriteBarRoot>\n  );\n};\n\nWriteBar.FormField = WriteBarFormField;\nWriteBar.Textarea = WriteBarTextarea;\nWriteBar.Root = WriteBarRoot;\nWriteBar.Before = WriteBarBeforeOrAfter;\nWriteBar.After = WriteBarBeforeOrAfter;\n"],"names":["React","hasReactNode","useMergeProps","warnOnce","WriteBarBeforeOrAfter","WriteBarFormField","WriteBarFormFieldInlineAfter","WriteBarRoot","WriteBarTextarea","warn","WriteBar","before","inlineAfter","after","onHeightChange","shadow","getRef","autoComplete","autoCapitalize","autoCorrect","cols","dirName","disabled","maxLength","minLength","name","placeholder","readOnly","required","value","valueProp","wrap","rows","form","onChange","onFocus","onBlur","id","inputMode","defaultValue","autoFocus","tabIndex","spellCheck","slotProps","restProps","process","env","NODE_ENV","rootProps","root","textAreaRest","getRootRef","textArea","FormField","Textarea","Root","Before","After"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,qBAAqB,QAAQ,mDAAgD;AACtF,SAASC,iBAAiB,QAAQ,2CAAwC;AAC1E,SAASC,4BAA4B,QAAQ,mFAAgF;AAC7H,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,gBAAgB,QAAQ,yCAAsC;AAEvE,MAAMC,OAAON,SAAS;AA4EtB;;CAEC,GACD,OAAO,MAAMO,WAAW,CAAC,EACvB,gBAAgB;AAChBC,MAAM,EACNC,WAAW,EACXC,KAAK,EACLC,cAAc,EACdC,SAAS,KAAK,EACdC,MAAM,EAEN,iBAAiB;AACjBC,YAAY,EACZC,cAAc,EACdC,WAAW,EACXC,IAAI,EACJC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,IAAI,EACJC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,EAAE,EACFC,SAAS,EACTC,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,UAAU,EAEVC,SAAS,EACT,GAAGC,WACW;IACd,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiB/B,QAAQ;QACpDP,KAAK;IACP;IAEA,MAAMuC,YAAY9C,cAAc0C,WAAWD,WAAWM;IAEtD,MAAMC,eAAehD,cACnB;QACEiD,YAAYnC;QACZC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC,OAAOC;QACPC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,GACAC,WAAWS;IAGb,qBACE,MAAC7C;QAAaQ,QAAQA;QAAS,GAAGiC,SAAS;;YACxC/C,aAAaU,yBAAW,KAACP;0BAAuBO;;0BACjD,MAACN;;kCACC,KAACG;wBAAiBM,gBAAgBA;wBAAiB,GAAGoC,YAAY;;oBACjEjD,aAAaW,8BACZ,KAACN;kCAA8BM;;;;YAGlCX,aAAaY,wBAAU,KAACT;0BAAuBS;;;;AAGtD,EAAE;AAEFH,SAAS2C,SAAS,GAAGhD;AACrBK,SAAS4C,QAAQ,GAAG9C;AACpBE,SAAS6C,IAAI,GAAGhD;AAChBG,SAAS8C,MAAM,GAAGpD;AAClBM,SAAS+C,KAAK,GAAGrD"}

package/dist/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.d.ts

@@ -0,0 +1,5 @@
+import { type FlexProps } from '../../../components/Flex/Flex';
+type WriteBarBeforeOrAfterProps = FlexProps;
+export declare const WriteBarBeforeOrAfter: ({ className, ...restProps }: WriteBarBeforeOrAfterProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=WriteBarBeforeOrAfter.d.ts.map

package/dist/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WriteBarBeforeOrAfter.d.ts","sourceRoot":"","sources":["../../../../src/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAIrE,KAAK,0BAA0B,GAAG,SAAS,CAAC;AAE5C,eAAO,MAAM,qBAAqB,GAAI,6BAA6B,0BAA0B,4CAU5F,CAAC"}

package/dist/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@vkontakte/vkjs";
+import { Flex } from "../../Flex/Flex.js";
+import { usePlatform } from "../../../hooks/usePlatform.js";
+export const WriteBarBeforeOrAfter = ({ className, ...restProps })=>{
+    const platform = usePlatform();
+    return /*#__PURE__*/ _jsx(Flex, {
+        align: "end",
+        className: classNames("vkuiWriteBarBeforeOrAfter__host", platform === 'ios' && "vkuiWriteBarBeforeOrAfter__ios", className),
+        ...restProps
+    });
+};
+
+//# sourceMappingURL=WriteBarBeforeOrAfter.js.map

package/dist/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { Flex, type FlexProps } from '../../../components/Flex/Flex';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport styles from './WriteBarBeforeOrAfter.module.css';\n\ntype WriteBarBeforeOrAfterProps = FlexProps;\n\nexport const WriteBarBeforeOrAfter = ({ className, ...restProps }: WriteBarBeforeOrAfterProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Flex\n      align=\"end\"\n      className={classNames(styles.host, platform === 'ios' && styles.ios, className)}\n      {...restProps}\n    />\n  );\n};\n"],"names":["classNames","Flex","usePlatform","WriteBarBeforeOrAfter","className","restProps","platform","align"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAwB,qBAAgC;AACrE,SAASC,WAAW,QAAQ,gCAA6B;AAKzD,OAAO,MAAMC,wBAAwB,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAuC;IAC3F,MAAMC,WAAWJ;IAEjB,qBACE,KAACD;QACCM,OAAM;QACNH,WAAWJ,8CAAwBM,aAAa,2CAAqBF;QACpE,GAAGC,SAAS;;AAGnB,EAAE"}

package/dist/components/WriteBar/WriteBarFormField/WriteBarFormField.d.ts

@@ -0,0 +1,8 @@
+import { type FlexProps } from '../../Flex/Flex';
+type WriteBarFormFieldProps = FlexProps;
+export declare const WriteBarFormField: {
+    ({ className, ...restProps }: WriteBarFormFieldProps): import("react/jsx-runtime").JSX.Element;
+    InlineAfter: ({ className, ...restProps }: FlexProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=WriteBarFormField.d.ts.map

package/dist/components/WriteBar/WriteBarFormField/WriteBarFormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WriteBarFormField.d.ts","sourceRoot":"","sources":["../../../../src/components/WriteBar/WriteBarFormField/WriteBarFormField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAIvD,KAAK,sBAAsB,GAAG,SAAS,CAAC;AAExC,eAAO,MAAM,iBAAiB;kCAAiC,sBAAsB;;CASpF,CAAC"}

package/dist/components/WriteBar/WriteBarFormField/WriteBarFormField.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@vkontakte/vkjs";
+import { usePlatform } from "../../../hooks/usePlatform.js";
+import { Flex } from "../../Flex/Flex.js";
+import { WriteBarFormFieldInlineAfter } from "./WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter.js";
+export const WriteBarFormField = ({ className, ...restProps })=>{
+    const platform = usePlatform();
+    return /*#__PURE__*/ _jsx(Flex, {
+        className: classNames("vkuiWriteBarFormField__host", platform === 'ios' && "vkuiWriteBarFormField__ios", className),
+        ...restProps
+    });
+};
+WriteBarFormField.InlineAfter = WriteBarFormFieldInlineAfter;
+
+//# sourceMappingURL=WriteBarFormField.js.map

package/dist/components/WriteBar/WriteBarFormField/WriteBarFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/WriteBar/WriteBarFormField/WriteBarFormField.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Flex, type FlexProps } from '../../Flex/Flex';\nimport { WriteBarFormFieldInlineAfter } from './WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter';\nimport styles from './WriteBarFormField.module.css';\n\ntype WriteBarFormFieldProps = FlexProps;\n\nexport const WriteBarFormField = ({ className, ...restProps }: WriteBarFormFieldProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Flex\n      className={classNames(styles.host, platform === 'ios' && styles.ios, className)}\n      {...restProps}\n    />\n  );\n};\n\nWriteBarFormField.InlineAfter = WriteBarFormFieldInlineAfter;\n"],"names":["classNames","usePlatform","Flex","WriteBarFormFieldInlineAfter","WriteBarFormField","className","restProps","platform","InlineAfter"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAASC,IAAI,QAAwB,qBAAkB;AACvD,SAASC,4BAA4B,QAAQ,iEAA8D;AAK3G,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAmC;IACnF,MAAMC,WAAWN;IAEjB,qBACE,KAACC;QACCG,WAAWL,0CAAwBO,aAAa,uCAAqBF;QACpE,GAAGC,SAAS;;AAGnB,EAAE;AAEFF,kBAAkBI,WAAW,GAAGL"}

package/dist/components/WriteBar/WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter.d.ts

@@ -0,0 +1,5 @@
+import { type FlexProps } from '../../../../components/Flex/Flex';
+type WriteBarFormFieldInlineAfterProps = FlexProps;
+export declare const WriteBarFormFieldInlineAfter: ({ className, ...restProps }: WriteBarFormFieldInlineAfterProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=WriteBarFormFieldInlineAfter.d.ts.map

package/dist/components/WriteBar/WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WriteBarFormFieldInlineAfter.d.ts","sourceRoot":"","sources":["../../../../../src/components/WriteBar/WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAIxE,KAAK,iCAAiC,GAAG,SAAS,CAAC;AAEnD,eAAO,MAAM,4BAA4B,GAAI,6BAG1C,iCAAiC,4CAUnC,CAAC"}