@vkontakte/vkui 8.1.3 → 8.2.0

package/dist/cssm/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","styles","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName","host","ios","inner","innerHeader","innerCenter"],"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;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOH,SAAS;AAiDtB;;CAEC,GACD,OAAO,MAAMI,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,WAAWlB,cAAcc,WAAWD,WAAWM;IACrD,MAAMC,cAAcpB,cAAc;QAAEqB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWtB;IAEjB,qBACE,MAACE;QACCqB,eAAezB,WAAWK,OAAOqB,IAAI,EAAEF,aAAa,SAASnB,OAAOsB,GAAG;QACtE,GAAGR,QAAQ;;YAEXT;0BACD,MAACN;gBACCqB,eAAezB,WACbK,OAAOuB,KAAK,EACZ,CAAC,CAAClB,UAAUL,OAAOwB,WAAW,EAC9BlB,UAAUN,OAAOyB,WAAW;gBAE7B,GAAGT,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","styles","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName","host","ios","inner","innerHeader","innerCenter"],"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;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOH,SAAS;AAiDtB;;CAEC,GACD,OAAO,MAAMI,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,WAAWlB,cAAcc,WAAWD,WAAWM;IACrD,MAAMC,cAAcpB,cAAc;QAAEqB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWtB;IAEjB,qBACE,MAACE;QACCqB,eAAezB,WAAWK,OAAOqB,IAAI,EAAEF,aAAa,SAASnB,OAAOsB,GAAG;QACtE,GAAGR,QAAQ;;YAEXT;0BACD,MAACN;gBACCqB,eAAezB,WACbK,OAAOuB,KAAK,EACZ,CAAC,CAAClB,UAAUL,OAAOwB,WAAW,EAC9BlB,UAAUN,OAAOyB,WAAW;gBAE7B,GAAGT,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}

package/dist/cssm/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";
@@ -70,16 +69,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;
@@ -96,7 +94,6 @@ const warn = warnOnce('TabsItem');
          **/ }
     }, [
         rootRef,
-        document,
         scrollBehaviorToSelectedTab,
         withScrollToSelectedTab,
         selected

package/dist/cssm/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","styles","densityClassNames","none","densityNone","compact","densityCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","density","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","controller","statusComponent","isTabFlow","selectedTab","Component","className","statusCount","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","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,qBAAqB,QAAQ,mCAAgC;AACtE,SAASC,eAAe,QAAQ,6BAA0B;AAC1D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,oBAAoB;IACxBC,MAAMF,OAAOG,WAAW;IACxBC,SAASJ,OAAOK,cAAc;AAChC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,QAAQT,OAAOU,UAAU;IACzBC,WAAWX,OAAOY,aAAa;AACjC;AAEA,MAAMC,qBAAqB;IACzBC,WAAWd,OAAOc,SAAS;IAC3BC,UAAUf,OAAOe,QAAQ;AAC3B;AA+CA,MAAMC,OAAOvB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMwB,WAAW,CAAC,EACvBC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,UAAUC,eAAe,KAAK,EAC9BC,OAAO,KAAK,EACZC,UAAUC,YAAY,EACtBC,UAAU,EACVC,YAAY5B,OAAO6B,KAAK,EACxBC,aAAa,EAAE,EACfC,YAAY,KAAK,EACjBC,mBAAmB,QAAQ,EAC3BC,EAAE,EACFC,OAAO,EACP,GAAGC,WACW;IACd,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAG9C;IAC7B,MAAM,EAAE+C,IAAI,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,2BAA2B,EAAEC,uBAAuB,EAAE,GAC5FtD,MAAMuD,UAAU,CAAC/C;IACnB,MAAMgD,aAAaxD,MAAMuD,UAAU,CAAChD;IACpC,IAAIkD,kBAAkB;IAEtB,MAAMC,YAAYrB,SAAS;IAE3B,MAAMF,WAAWC,gBAAiB,CAAC,CAACU,MAAMU,YAAYG,gBAAgBb;IAEtE,IAAI5C,aAAa+B,SAAS;QACxBwB,kBACE,OAAOxB,WAAW,yBAChB,MAACtB;YACCiD,WAAU;YACVC,WAAW5D,WAAWY,OAAOoB,MAAM,EAAEpB,OAAOiD,WAAW;YACvDC,QAAO;;8BAEP,KAACnD;8BAAe;;gBACfqB;;2BAGH,MAAC+B;YAAKH,WAAWhD,OAAOoB,MAAM;;8BAC5B,KAACrB;8BAAe;;gBACfqB;;;IAGT;IAEA,IAAIgC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBT,WAAW;QACvD,IAAI,CAACV,SAAS,CAAC,gBAAgB,EAAE;YAC/BnB,KAAK,CAAC,oDAAoD,CAAC,EAAE;QAC/D,OAAO,IAAI,CAACiB,IAAI;YACdjB,KACE,CAAC,qFAAqF,CAAC,EACvF;QAEJ;IACF;IAEA,IAAIS,WAAWC;IACf,IAAImB,aAAapB,aAAa8B,WAAW;QACvC9B,WAAWH,WAAW,IAAI,CAAC;IAC7B;IAEA,MAAMkC,UAAUjE,aAAaoC;IAE7B,MAAM8B,kBAAkBtE,MAAMuE,MAAM,CAAsBH;IAE1D,MAAM,EAAEI,QAAQ,EAAE,GAAGnE;IACrBL,MAAMyE,SAAS,CACb,SAASC;QACP,MAAMC,kBAAkBL,gBAAgBM,OAAO,KAAKR;QACpD,MAAMS,yBACJvB,2BACA,CAACqB,mBACDL,gBAAgBM,OAAO,KAAKzC,YAC5BA;QAEFmC,gBAAgBM,OAAO,GAAGzC;QAE1B,IAAI,CAAC0C,0BAA0B,CAACR,QAAQO,OAAO,IAAI,CAACJ,UAAU;YAC5D;QACF;QAEA,MAAMM,aAAaT,QAAQO,OAAO,CAACG,qBAAqB;QACxD,MAAMC,mCACJF,WAAWG,GAAG,GAAG,KAAKH,WAAWI,MAAM,GAAGV,SAASW,eAAe,CAACC,YAAY;QAEjF;gDAC0C,GAC1C,IAAIJ,kCAAkC;YACpC;QACF;QAEA,yDAAyD,GACzD,IAAI;YACFX,QAAQO,OAAO,CAACS,cAAc,CAAC;gBAC7BC,QAAQjC;gBACRkC,OAAO;gBACPC,UAAU;YACZ;QACF,EAAE,OAAM;QACN;;UAEE,GACJ;IACF,GACA;QAACnB;QAASG;QAAUnB;QAA6BC;QAAyBnB;KAAS;IAGrF,MAAMsD,WAAiDzF,MAAM0F,WAAW,CACtE,CAACC;QACC5C,UAAU4C;QACV,IAAI7C,IAAI;YACNU,YAAYoC,SAAS9C;QACvB;IACF,GACA;QAACA;QAAIC;QAASS;KAAW;IAG3B,qBACE,MAAC/C;QACC+B,YAAY6B;QACZ5B,WAAWA;QACXE,YAAYA;QACZC,WAAWA;QACXC,kBAAkBA;QAClBR,MAAMA;QACNwD,iBAAe1D;QACfG,UAAUA;QACVwD,eAAe7F,WACbY,OAAOkF,IAAI,EACX7C,QAAQ/B,UAAU,CAAC+B,KAAK,EACxBf,YAAYtB,OAAOsB,QAAQ,EAC3Bc,YAAY,aAAanC,iBAAiB,CAACmC,QAAQ,EACnDE,YAAYtC,OAAOsC,QAAQ,EAC3BC,mBAAmB,UAAU1B,kBAAkB,CAAC0B,eAAe;QAEjEL,SAASS,aAAaiC,WAAW1C;QACjCD,IAAIA;QACH,GAAGE,SAAS;;YAEZjB,wBAAU,KAACiE;gBAAInC,WAAWhD,OAAOkB,MAAM;0BAAGA;;0BAC3C,KAACrB;gBACCkD,WAAU;gBACVC,WAAWhD,OAAOoF,KAAK;gBACvBC,OAAOhD,SAAS,YAAY,MAAM;gBAClCa,QAAO;0BAEN/B;;YAEFyB;YACAvB,uBAAS,KAAC8D;gBAAInC,WAAWhD,OAAOqB,KAAK;0BAAGA;;YACxCgB,SAAS,2BACR,KAAC8C;gBAAInC,WAAWhD,OAAOsF,SAAS;gBAAEC,aAAW;gBAACC,iBAAelE;;;;AAIrE,EAAE"}
+{"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","styles","densityClassNames","none","densityNone","compact","densityCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","density","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","controller","statusComponent","isTabFlow","selectedTab","Component","className","statusCount","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","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,qBAAqB,QAAQ,mCAAgC;AACtE,SAASC,eAAe,QAAQ,6BAA0B;AAC1D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,oBAAoB;IACxBC,MAAMF,OAAOG,WAAW;IACxBC,SAASJ,OAAOK,cAAc;AAChC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,QAAQT,OAAOU,UAAU;IACzBC,WAAWX,OAAOY,aAAa;AACjC;AAEA,MAAMC,qBAAqB;IACzBC,WAAWd,OAAOc,SAAS;IAC3BC,UAAUf,OAAOe,QAAQ;AAC3B;AA+CA,MAAMC,OAAOvB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMwB,WAAW,CAAC,EACvBC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,UAAUC,eAAe,KAAK,EAC9BC,OAAO,KAAK,EACZC,UAAUC,YAAY,EACtBC,UAAU,EACVC,YAAY5B,OAAO6B,KAAK,EACxBC,aAAa,EAAE,EACfC,YAAY,KAAK,EACjBC,mBAAmB,QAAQ,EAC3BC,EAAE,EACFC,OAAO,EACP,GAAGC,WACW;IACd,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAG7C;IAC7B,MAAM,EAAE8C,IAAI,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,2BAA2B,EAAEC,uBAAuB,EAAE,GAC5FrD,MAAMsD,UAAU,CAAC/C;IACnB,MAAMgD,aAAavD,MAAMsD,UAAU,CAAChD;IACpC,IAAIkD,kBAAkB;IAEtB,MAAMC,YAAYrB,SAAS;IAE3B,MAAMF,WAAWC,gBAAiB,CAAC,CAACU,MAAMU,YAAYG,gBAAgBb;IAEtE,IAAI3C,aAAa8B,SAAS;QACxBwB,kBACE,OAAOxB,WAAW,yBAChB,MAACtB;YACCiD,WAAU;YACVC,WAAW3D,WAAWW,OAAOoB,MAAM,EAAEpB,OAAOiD,WAAW;YACvDC,QAAO;;8BAEP,KAACnD;8BAAe;;gBACfqB;;2BAGH,MAAC+B;YAAKH,WAAWhD,OAAOoB,MAAM;;8BAC5B,KAACrB;8BAAe;;gBACfqB;;;IAGT;IAEA,IAAIgC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBT,WAAW;QACvD,IAAI,CAACV,SAAS,CAAC,gBAAgB,EAAE;YAC/BnB,KAAK,CAAC,oDAAoD,CAAC,EAAE;QAC/D,OAAO,IAAI,CAACiB,IAAI;YACdjB,KACE,CAAC,qFAAqF,CAAC,EACvF;QAEJ;IACF;IAEA,IAAIS,WAAWC;IACf,IAAImB,aAAapB,aAAa8B,WAAW;QACvC9B,WAAWH,WAAW,IAAI,CAAC;IAC7B;IAEA,MAAMkC,UAAUhE,aAAamC;IAE7B,MAAM8B,kBAAkBrE,MAAMsE,MAAM,CAAsBH;IAE1DnE,MAAMuE,SAAS,CACb,SAASC;QACP,MAAMC,kBAAkBJ,gBAAgBK,OAAO,KAAKP;QACpD,MAAMQ,yBACJtB,2BACA,CAACoB,mBACDJ,gBAAgBK,OAAO,KAAKxC,YAC5BA;QAEFmC,gBAAgBK,OAAO,GAAGxC;QAE1B,IAAI,CAACyC,0BAA0B,CAACP,QAAQM,OAAO,EAAE;YAC/C;QACF;QAEA,MAAME,aAAaR,QAAQM,OAAO,CAACG,qBAAqB;QACxD,MAAMC,mCACJF,WAAWG,GAAG,GAAG,KACjBH,WAAWI,MAAM,GAAGZ,QAAQM,OAAO,CAACO,aAAa,CAACC,eAAe,CAACC,YAAY;QAEhF;gDAC0C,GAC1C,IAAIL,kCAAkC;YACpC;QACF;QAEA,yDAAyD,GACzD,IAAI;YACFV,QAAQM,OAAO,CAACU,cAAc,CAAC;gBAC7BC,QAAQjC;gBACRkC,OAAO;gBACPC,UAAU;YACZ;QACF,EAAE,OAAM;QACN;;UAEE,GACJ;IACF,GACA;QAACnB;QAAShB;QAA6BC;QAAyBnB;KAAS;IAG3E,MAAMsD,WAAiDxF,MAAMyF,WAAW,CACtE,CAACC;QACC5C,UAAU4C;QACV,IAAI7C,IAAI;YACNU,YAAYoC,SAAS9C;QACvB;IACF,GACA;QAACA;QAAIC;QAASS;KAAW;IAG3B,qBACE,MAAC/C;QACC+B,YAAY6B;QACZ5B,WAAWA;QACXE,YAAYA;QACZC,WAAWA;QACXC,kBAAkBA;QAClBR,MAAMA;QACNwD,iBAAe1D;QACfG,UAAUA;QACVwD,eAAe5F,WACbW,OAAOkF,IAAI,EACX7C,QAAQ/B,UAAU,CAAC+B,KAAK,EACxBf,YAAYtB,OAAOsB,QAAQ,EAC3Bc,YAAY,aAAanC,iBAAiB,CAACmC,QAAQ,EACnDE,YAAYtC,OAAOsC,QAAQ,EAC3BC,mBAAmB,UAAU1B,kBAAkB,CAAC0B,eAAe;QAEjEL,SAASS,aAAaiC,WAAW1C;QACjCD,IAAIA;QACH,GAAGE,SAAS;;YAEZjB,wBAAU,KAACiE;gBAAInC,WAAWhD,OAAOkB,MAAM;0BAAGA;;0BAC3C,KAACrB;gBACCkD,WAAU;gBACVC,WAAWhD,OAAOoF,KAAK;gBACvBC,OAAOhD,SAAS,YAAY,MAAM;gBAClCa,QAAO;0BAEN/B;;YAEFyB;YACAvB,uBAAS,KAAC8D;gBAAInC,WAAWhD,OAAOqB,KAAK;0BAAGA;;YACxCgB,SAAS,2BACR,KAAC8C;gBAAInC,WAAWhD,OAAOsF,SAAS;gBAAEC,aAAW;gBAACC,iBAAelE;;;;AAIrE,EAAE"}

package/dist/cssm/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","styles","getViewWidthClassName","viewWidth","legacySizeX","undefined","withBorder","withBorderOnSmallTabletMinus","SMALL_TABLET","hasPointerClassName","hasPointer","hasPointerNone","hasPointerFalse","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","host","borderRadiusInherit","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;AACvF,OAAOC,YAAY,wBAAwB;AAE3C,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,aAAaD,gBAAgB,WAAW;QAC1D,OAAOH,OAAOK,UAAU;IAC1B;IACA,IAAIH,cAAc,QAAQ;QACxB,OAAOF,OAAOM,4BAA4B;IAC5C;IACA,IAAIJ,YAAYZ,UAAUiB,YAAY,EAAE;QACtC,OAAOP,OAAOK,UAAU;IAC1B;IACA;AACF;AAEA,SAASG,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKL;YACH,OAAOJ,OAAOU,cAAc;QAC9B,KAAK;YACH,OAAOV,OAAOW,eAAe;IACjC;IAEA,OAAOP;AACT;AAgCA,OAAO,MAAMQ,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYlB,kBAAkB,EAC9BmB,aAAanB,kBAAkB,EAC/BoB,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAc7B,eAAe4B;IAEnC,MAAM,EAAEE,OAAOnB,WAAW,EAAED,YAAY,MAAM,EAAEO,UAAU,EAAE,GAAGpB;IAE/D,MAAMkC,aAAa5B,mBAAmBsB,YAAYR;IAClD,MAAM,EAAEe,MAAM,EAAE,GAAGC,cAAc,GAAG7B,UAAU2B,YAAYd;IAE1D,MAAMiB,WAAWnC,WAAWkC,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAACpC;QACCoB,eAAezB,WACb,wBACAyB,eACAb,OAAO8B,IAAI,EACX7B,sBAAsBC,WAAWC,cACjCW,qBAAqB,aAAad,OAAO+B,mBAAmB,EAC5DvB,oBAAoBC;QAEtBuB,gBAAgBjC,WAAWiB;QAC3BiB,iBAAiBpC,YAAYoB;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACvB;gBAAO6B,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","styles","getViewWidthClassName","viewWidth","legacySizeX","undefined","withBorder","withBorderOnSmallTabletMinus","SMALL_TABLET","hasPointerClassName","hasPointer","hasPointerNone","hasPointerFalse","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","host","borderRadiusInherit","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;AACvF,OAAOC,YAAY,wBAAwB;AAE3C,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,aAAaD,gBAAgB,WAAW;QAC1D,OAAOH,OAAOK,UAAU;IAC1B;IACA,IAAIH,cAAc,QAAQ;QACxB,OAAOF,OAAOM,4BAA4B;IAC5C;IACA,IAAIJ,YAAYZ,UAAUiB,YAAY,EAAE;QACtC,OAAOP,OAAOK,UAAU;IAC1B;IACA;AACF;AAEA,SAASG,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKL;YACH,OAAOJ,OAAOU,cAAc;QAC9B,KAAK;YACH,OAAOV,OAAOW,eAAe;IACjC;IAEA,OAAOP;AACT;AAgCA,OAAO,MAAMQ,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYlB,kBAAkB,EAC9BmB,aAAanB,kBAAkB,EAC/BoB,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAc7B,eAAe4B;IAEnC,MAAM,EAAEE,OAAOnB,WAAW,EAAED,YAAY,MAAM,EAAEO,UAAU,EAAE,GAAGpB;IAE/D,MAAMkC,aAAa5B,mBAAmBsB,YAAYR;IAClD,MAAM,EAAEe,MAAM,EAAE,GAAGC,cAAc,GAAG7B,UAAU2B,YAAYd;IAE1D,MAAMiB,WAAWnC,WAAWkC,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAACpC;QACCoB,eAAezB,WACb,wBACAyB,eACAb,OAAO8B,IAAI,EACX7B,sBAAsBC,WAAWC,cACjCW,qBAAqB,aAAad,OAAO+B,mBAAmB,EAC5DvB,oBAAoBC;QAEtBuB,gBAAgBjC,WAAWiB;QAC3BiB,iBAAiBpC,YAAYoB;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACvB;gBAAO6B,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}

package/dist/cssm/components/WriteBar/WriteBar.js

@@ -1,44 +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 styles from "./WriteBar.module.css";
+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: styles.textarea,
+    const textAreaRest = useMergeProps({
         getRootRef: getRef,
         autoComplete,
         autoCapitalize,
@@ -56,7 +37,7 @@ autoComplete, autoCapitalize, autoCorrect, cols, dirName, disabled, maxLength, m
         wrap,
         rows,
         form,
-        onChange: onChangeProp,
+        onChange,
         onFocus,
         onBlur,
         id,
@@ -66,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(styles.host, platform === 'ios' && styles.ios, shadow && styles.shadow),
+    return /*#__PURE__*/ _jsxs(WriteBarRoot, {
+        shadow: shadow,
         ...rootProps,
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: styles.form,
-            children: [
-                hasReactNode(before) && /*#__PURE__*/ _jsx("div", {
-                    className: styles.before,
-                    children: before
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: styles.formIn,
-                    children: [
-                        /*#__PURE__*/ _jsx(WriteBarTypography, {
-                            Component: "textarea",
-                            onChange: callMultiple(onChange, resize),
-                            getRootRef: textareaRef,
-                            ...textAreaRest
-                        }),
-                        hasReactNode(inlineAfter) && /*#__PURE__*/ _jsx("div", {
-                            className: styles.inlineAfter,
-                            children: inlineAfter
-                        })
-                    ]
-                }),
-                hasReactNode(after) && /*#__PURE__*/ _jsx("div", {
-                    className: styles.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/cssm/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","styles","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","textArea","refResizeTextarea","resize","textareaRef","useEffect","baseClassName","host","ios","div","formIn","Component"],"mappings":"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"}
+{"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/cssm/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.js

@@ -0,0 +1,16 @@
+'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";
+import styles from "./WriteBarBeforeOrAfter.module.css";
+export const WriteBarBeforeOrAfter = ({ className, ...restProps })=>{
+    const platform = usePlatform();
+    return /*#__PURE__*/ _jsx(Flex, {
+        align: "end",
+        className: classNames(styles.host, platform === 'ios' && styles.ios, className),
+        ...restProps
+    });
+};
+
+//# sourceMappingURL=WriteBarBeforeOrAfter.js.map

package/dist/cssm/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","styles","WriteBarBeforeOrAfter","className","restProps","platform","align","host","ios"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAwB,qBAAgC;AACrE,SAASC,WAAW,QAAQ,gCAA6B;AACzD,OAAOC,YAAY,qCAAqC;AAIxD,OAAO,MAAMC,wBAAwB,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAuC;IAC3F,MAAMC,WAAWL;IAEjB,qBACE,KAACD;QACCO,OAAM;QACNH,WAAWL,WAAWG,OAAOM,IAAI,EAAEF,aAAa,SAASJ,OAAOO,GAAG,EAAEL;QACpE,GAAGC,SAAS;;AAGnB,EAAE"}

package/dist/cssm/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.module.css

@@ -0,0 +1,12 @@
+.host:first-of-type {
+  padding-inline-start: 4px;
+}
+
+.host:last-of-type {
+  padding-inline-end: 4px;
+}
+
+.ios {
+  padding-block: 0;
+  padding-inline: 4px;
+}

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

@@ -0,0 +1,17 @@
+'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";
+import styles from "./WriteBarFormField.module.css";
+export const WriteBarFormField = ({ className, ...restProps })=>{
+    const platform = usePlatform();
+    return /*#__PURE__*/ _jsx(Flex, {
+        className: classNames(styles.host, platform === 'ios' && styles.ios, className),
+        ...restProps
+    });
+};
+WriteBarFormField.InlineAfter = WriteBarFormFieldInlineAfter;
+
+//# sourceMappingURL=WriteBarFormField.js.map

package/dist/cssm/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","styles","WriteBarFormField","className","restProps","platform","host","ios","InlineAfter"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAASC,IAAI,QAAwB,qBAAkB;AACvD,SAASC,4BAA4B,QAAQ,iEAA8D;AAC3G,OAAOC,YAAY,iCAAiC;AAIpD,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAmC;IACnF,MAAMC,WAAWP;IAEjB,qBACE,KAACC;QACCI,WAAWN,WAAWI,OAAOK,IAAI,EAAED,aAAa,SAASJ,OAAOM,GAAG,EAAEJ;QACpE,GAAGC,SAAS;;AAGnB,EAAE;AAEFF,kBAAkBM,WAAW,GAAGR"}

package/dist/cssm/components/WriteBar/WriteBarFormField/WriteBarFormField.module.css

@@ -0,0 +1,18 @@
+.host {
+  position: relative;
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.ios {
+  box-sizing: border-box;
+  margin-block: 8px;
+  margin-inline: 0;
+  background-color: var(--vkui--color_write_bar_input_background);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_write_bar_input_border);
+  border-radius: 18px;
+}
+
+.ios:first-child {
+  margin-inline-start: 12px;
+}

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

@@ -0,0 +1,16 @@
+'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";
+import styles from "./WriteBarFormFieldInlineAfter.module.css";
+export const WriteBarFormFieldInlineAfter = ({ className, ...restProps })=>{
+    const platform = usePlatform();
+    return /*#__PURE__*/ _jsx(Flex, {
+        align: "end",
+        className: classNames(platform === 'ios' && styles.ios, className),
+        ...restProps
+    });
+};
+
+//# sourceMappingURL=WriteBarFormFieldInlineAfter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/WriteBar/WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter.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 './WriteBarFormFieldInlineAfter.module.css';\n\ntype WriteBarFormFieldInlineAfterProps = FlexProps;\n\nexport const WriteBarFormFieldInlineAfter = ({\n  className,\n  ...restProps\n}: WriteBarFormFieldInlineAfterProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Flex\n      align=\"end\"\n      className={classNames(platform === 'ios' && styles.ios, className)}\n      {...restProps}\n    />\n  );\n};\n"],"names":["classNames","Flex","usePlatform","styles","WriteBarFormFieldInlineAfter","className","restProps","platform","align","ios"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAwB,wBAAmC;AACxE,SAASC,WAAW,QAAQ,mCAAgC;AAC5D,OAAOC,YAAY,4CAA4C;AAI/D,OAAO,MAAMC,+BAA+B,CAAC,EAC3CC,SAAS,EACT,GAAGC,WAC+B;IAClC,MAAMC,WAAWL;IAEjB,qBACE,KAACD;QACCO,OAAM;QACNH,WAAWL,WAAWO,aAAa,SAASJ,OAAOM,GAAG,EAAEJ;QACvD,GAAGC,SAAS;;AAGnB,EAAE"}

package/dist/cssm/components/WriteBar/WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter.module.css

@@ -0,0 +1,3 @@
+.ios {
+  margin-block: -8px;
+}

package/dist/cssm/components/WriteBar/WriteBarRoot/WriteBarRoot.js

@@ -0,0 +1,17 @@
+'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 styles from "./WriteBarRoot.module.css";
+export const WriteBarRoot = ({ shadow, className, ...restProps })=>{
+    const platform = usePlatform();
+    return /*#__PURE__*/ _jsx(Flex, {
+        align: "end",
+        minBlockSize: 52,
+        className: classNames(styles.host, platform === 'ios' && styles.ios, shadow && styles.shadow, className),
+        ...restProps
+    });
+};
+
+//# sourceMappingURL=WriteBarRoot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/WriteBar/WriteBarRoot/WriteBarRoot.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Flex, type FlexProps } from '../../Flex/Flex';\nimport styles from './WriteBarRoot.module.css';\n\ntype WriteBarRootProps = FlexProps & {\n  /**\n   * Добавляет тень вокруг поля ввода.\n   */\n  shadow?: boolean;\n};\n\nexport const WriteBarRoot = ({ shadow, className, ...restProps }: WriteBarRootProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Flex\n      align=\"end\"\n      minBlockSize={52}\n      className={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        shadow && styles.shadow,\n        className,\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["classNames","usePlatform","Flex","styles","WriteBarRoot","shadow","className","restProps","platform","align","minBlockSize","host","ios"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAASC,IAAI,QAAwB,qBAAkB;AACvD,OAAOC,YAAY,4BAA4B;AAS/C,OAAO,MAAMC,eAAe,CAAC,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAA8B;IACjF,MAAMC,WAAWP;IAEjB,qBACE,KAACC;QACCO,OAAM;QACNC,cAAc;QACdJ,WAAWN,WACTG,OAAOQ,IAAI,EACXH,aAAa,SAASL,OAAOS,GAAG,EAChCP,UAAUF,OAAOE,MAAM,EACvBC;QAED,GAAGC,SAAS;;AAGnB,EAAE"}

package/dist/cssm/components/WriteBar/WriteBarRoot/WriteBarRoot.module.css

@@ -0,0 +1,15 @@
+.host {
+  background: var(--vkui--color_background_contrast_themed);
+}
+
+.shadow {
+  box-shadow: var(--vkui--elevation3);
+}
+
+/**
+ * iOS
+ */
+
+.ios {
+  background: var(--vkui--color_background_content);
+}

package/dist/cssm/components/WriteBar/WriteBarTextarea/WriteBarTextarea.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useExternRef } from "../../../hooks/useExternRef.js";
+import { usePlatform } from "../../../hooks/usePlatform.js";
+import { callMultiple } from "../../../lib/callMultiple.js";
+import { useResizeTextarea } from "../../Textarea/useResizeTextarea.js";
+import { Headline } from "../../Typography/Headline/Headline.js";
+import { Title } from "../../Typography/Title/Title.js";
+import styles from "./WriteBarTextarea.module.css";
+export const WriteBarTextarea = ({ className, getRootRef, onHeightChange, onChange, ...restProps })=>{
+    const platform = usePlatform();
+    const [refResizeTextarea, resize] = useResizeTextarea(onHeightChange, true);
+    const textareaRef = useExternRef(getRootRef, refResizeTextarea);
+    React.useEffect(resize, [
+        resize,
+        platform
+    ]);
+    const props = {
+        Component: 'textarea',
+        weight: '3',
+        className: classNames(className, styles.host, platform === 'ios' && styles.ios),
+        getRootRef: textareaRef,
+        onChange: callMultiple(onChange, resize)
+    };
+    if (platform === 'ios') {
+        return /*#__PURE__*/ _jsx(Title, {
+            level: "3",
+            ...props,
+            ...restProps
+        });
+    }
+    return /*#__PURE__*/ _jsx(Headline, {
+        ...props,
+        ...restProps
+    });
+};
+
+//# sourceMappingURL=WriteBarTextarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/WriteBar/WriteBarTextarea/WriteBarTextarea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport type { RootComponentProps } from '../../RootComponent/RootComponent';\nimport { useResizeTextarea } from '../../Textarea/useResizeTextarea';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { Title } from '../../Typography/Title/Title';\nimport styles from './WriteBarTextarea.module.css';\n\ntype WriteBarTextareaProps = RootComponentProps<HTMLTextAreaElement> & {\n  /**\n   * Вызывается при смене высоты поля ввода.\n   */\n  onHeightChange?: VoidFunction | undefined;\n};\n\nexport const WriteBarTextarea = ({\n  className,\n  getRootRef,\n  onHeightChange,\n  onChange,\n  ...restProps\n}: WriteBarTextareaProps) => {\n  const platform = usePlatform();\n\n  const [refResizeTextarea, resize] = useResizeTextarea(onHeightChange, true);\n  const textareaRef = useExternRef(getRootRef, refResizeTextarea);\n\n  React.useEffect(resize, [resize, platform]);\n\n  const props = {\n    Component: 'textarea',\n    weight: '3',\n    className: classNames(className, styles.host, platform === 'ios' && styles.ios),\n    getRootRef: textareaRef,\n    onChange: callMultiple(onChange, resize),\n  } as const;\n\n  if (platform === 'ios') {\n    return <Title level=\"3\" {...props} {...restProps} />;\n  }\n\n  return <Headline {...props} {...restProps} />;\n};\n"],"names":["React","classNames","useExternRef","usePlatform","callMultiple","useResizeTextarea","Headline","Title","styles","WriteBarTextarea","className","getRootRef","onHeightChange","onChange","restProps","platform","refResizeTextarea","resize","textareaRef","useEffect","props","Component","weight","host","ios","level"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAASC,YAAY,QAAQ,+BAA4B;AAEzD,SAASC,iBAAiB,QAAQ,sCAAmC;AACrE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,KAAK,QAAQ,kCAA+B;AACrD,OAAOC,YAAY,gCAAgC;AASnD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,SAAS,EACTC,UAAU,EACVC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACmB;IACtB,MAAMC,WAAWZ;IAEjB,MAAM,CAACa,mBAAmBC,OAAO,GAAGZ,kBAAkBO,gBAAgB;IACtE,MAAMM,cAAchB,aAAaS,YAAYK;IAE7ChB,MAAMmB,SAAS,CAACF,QAAQ;QAACA;QAAQF;KAAS;IAE1C,MAAMK,QAAQ;QACZC,WAAW;QACXC,QAAQ;QACRZ,WAAWT,WAAWS,WAAWF,OAAOe,IAAI,EAAER,aAAa,SAASP,OAAOgB,GAAG;QAC9Eb,YAAYO;QACZL,UAAUT,aAAaS,UAAUI;IACnC;IAEA,IAAIF,aAAa,OAAO;QACtB,qBAAO,KAACR;YAAMkB,OAAM;YAAK,GAAGL,KAAK;YAAG,GAAGN,SAAS;;IAClD;IAEA,qBAAO,KAACR;QAAU,GAAGc,KAAK;QAAG,GAAGN,SAAS;;AAC3C,EAAE"}

package/dist/cssm/components/WriteBar/WriteBarTextarea/WriteBarTextarea.module.css

@@ -0,0 +1,43 @@
+.host {
+  box-sizing: border-box;
+  flex: 1;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-block-size: 120px;
+  margin: 0;
+  color: var(--vkui--color_text_primary);
+  -webkit-appearance: none;
+          appearance: none;
+  resize: none;
+  background: transparent;
+  border: 0;
+}
+
+.host:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+.host::placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--vkui--color_text_subhead);
+  white-space: nowrap;
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.host:focus {
+  outline: var(--vkui_internal--outline-reset);
+}
+
+.host {
+  block-size: 52px;
+  padding-block: 16px;
+  padding-inline: 12px;
+}
+
+.ios {
+  block-size: 36px;
+  padding-block: 6px;
+  padding-inline: 12px 0;
+}

package/dist/cssm/helpers/math.js

@@ -1,4 +1,10 @@
 export const clamp = (value, min, max)=>Math.max(min, Math.min(value, max));
+/**
+ * Переполнение для диапазона [min, max]
+ */ export function overflow(value, min, max) {
+    const range = max - min + 1;
+    return ((value - min) % range + range) % range + min;
+}
 export function precisionRound(number, precision = 1) {
     let factor = Math.pow(10, precision);
     return Math.round(number * factor) / factor;