@vkontakte/vkui 7.0.0-dev-efd91c.2 → 7.0.0-dev-efd91c.3

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 { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\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      TappableProps,\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hovered,\n  activated,\n  hasHover,\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.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 (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      className={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n        className,\n      )}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      hovered={hovered}\n      activated={activated}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles.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","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","sizeYClassNames","none","compact","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hovered","activated","hasHover","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","aria-selected","div","level","aria-hidden","data-selected"],"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 { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\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      TappableProps,\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hovered,\n  activated,\n  hasHover,\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.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 (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      hovered={hovered}\n      activated={activated}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles.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","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","sizeYClassNames","none","compact","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hovered","activated","hasHover","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","className","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","baseClassName","aria-selected","div","level","aria-hidden","data-selected"],"mappings":"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"}

package/dist/components/ToolButton/ToolButton.d.ts

@@ -18,6 +18,6 @@ export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProp
  *
  * @see https://vkcom.github.io/VKUI/#/ToolButton
  */
-export declare const ToolButton: ({ mode, appearance, direction, className, children, IconCompact, IconRegular, rounded, ...restProps }: ToolButtonProps) => React.ReactNode;
+export declare const ToolButton: ({ mode, appearance, direction, children, IconCompact, IconRegular, rounded, ...restProps }: ToolButtonProps) => React.ReactNode;
 export declare function getRoundedClassName(direction: 'row' | 'column', hasChildren: boolean): string | undefined;
 //# sourceMappingURL=ToolButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyBpE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,0GAUpB,eAAe,KAAG,KAAK,CAAC,SA0B1B,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,KAAK,GAAG,QAAQ,EAC3B,WAAW,EAAE,OAAO,GACnB,MAAM,GAAG,SAAS,CAOpB"}
+{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyBpE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,+FASpB,eAAe,KAAG,KAAK,CAAC,SAyB1B,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,KAAK,GAAG,QAAQ,EAC3B,WAAW,EAAE,OAAO,GACnB,MAAM,GAAG,SAAS,CAOpB"}

package/dist/components/ToolButton/ToolButton.js

@@ -32,11 +32,10 @@ const sizeYClassNames = {
  *
  * @see https://vkcom.github.io/VKUI/#/ToolButton
  */ export const ToolButton = (_param)=>{
-    var { mode = 'primary', appearance = 'accent', direction = 'row', className, children, IconCompact, IconRegular, rounded } = _param, restProps = _object_without_properties(_param, [
+    var { mode = 'primary', appearance = 'accent', direction = 'row', children, IconCompact, IconRegular, rounded } = _param, restProps = _object_without_properties(_param, [
         "mode",
         "appearance",
         "direction",
-        "className",
         "children",
         "IconCompact",
         "IconRegular",
@@ -49,7 +48,7 @@ const sizeYClassNames = {
         activeMode: "vkuiToolButton__active",
         Component: restProps.href ? 'a' : 'button',
         focusVisibleMode: "outside",
-        className: classNames(className, "vkuiToolButton__host", rounded && getRoundedClassName(direction, hasChildren), hasChildren && direction === 'row' && "vkuiToolButton__withFakeEndIcon", stylesMode[mode], stylesAppearance[appearance], stylesDirection[direction], sizeY !== 'compact' && sizeYClassNames[sizeY])
+        baseClassName: classNames("vkuiToolButton__host", rounded && getRoundedClassName(direction, hasChildren), hasChildren && direction === 'row' && "vkuiToolButton__withFakeEndIcon", stylesMode[mode], stylesAppearance[appearance], stylesDirection[direction], sizeY !== 'compact' && sizeYClassNames[sizeY])
     }, restProps), {
         children: [
             /*#__PURE__*/ _jsx(AdaptiveIconRenderer, {

package/dist/components/ToolButton/ToolButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n  row: styles.directionRow,\n  column: styles.directionColumn,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при `direction=\"column\"` если передан `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  className,\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        className,\n        styles.host,\n        rounded && getRoundedClassName(direction, hasChildren),\n        hasChildren && direction === 'row' && styles.withFakeEndIcon,\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles.text}>{children}</span>}\n    </Tappable>\n  );\n};\n\nexport function getRoundedClassName(\n  direction: 'row' | 'column',\n  hasChildren: boolean,\n): string | undefined {\n  switch (direction) {\n    case 'row':\n      return styles.rounded;\n    case 'column':\n      return hasChildren ? undefined : styles.rounded;\n  }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","regular","ToolButton","mode","appearance","direction","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","activeMode","Component","href","focusVisibleMode","getRoundedClassName","span","undefined"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AAGpE,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAcA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAM4B,cAAc7B,aAAauB;IAEjC,qBACE,MAACpB;QACC2B,SAAS;QACTC,UAAU;QACVC,WAAWL,UAAUM,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBZ,WAAWvB,WACTuB,mCAEAI,WAAWS,oBAAoBd,WAAWQ,cAC1CA,eAAeR,cAAc,4CAC7BjB,UAAU,CAACe,KAAK,EAChBV,gBAAgB,CAACW,WAAW,EAC5BR,eAAe,CAACS,UAAU,EAC1BO,UAAU,aAAab,eAAe,CAACa,MAAM;OAE3CD;;0BAEJ,KAACzB;gBAAqBsB,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACO;gBAAKd,SAAS;0BAAgBC;;;;AAGrD,EAAE;AAEF,OAAO,SAASY,oBACdd,SAA2B,EAC3BQ,WAAoB;IAEpB,OAAQR;QACN,KAAK;YACH;QACF,KAAK;YACH,OAAOQ,cAAcQ;IACzB;AACF"}
+{"version":3,"sources":["../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  type AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n  tertiary: styles.modeTertiary,\n  outline: styles.modeOutline,\n};\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst stylesDirection = {\n  row: styles.directionRow,\n  column: styles.directionColumn,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при `direction=\"column\"` если передан `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles.hover}\n      activeMode={styles.active}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        rounded && getRoundedClassName(direction, hasChildren),\n        hasChildren && direction === 'row' && styles.withFakeEndIcon,\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles.text}>{children}</span>}\n    </Tappable>\n  );\n};\n\nexport function getRoundedClassName(\n  direction: 'row' | 'column',\n  hasChildren: boolean,\n): string | undefined {\n  switch (direction) {\n    case 'row':\n      return styles.rounded;\n    case 'column':\n      return hasChildren ? undefined : styles.rounded;\n  }\n}\n"],"names":["classNames","hasReactNode","useAdaptivity","AdaptiveIconRenderer","Tappable","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","regular","ToolButton","mode","appearance","direction","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","activeMode","Component","href","focusVisibleMode","baseClassName","getRoundedClassName","span","className","undefined"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SACEC,oBAAoB,QAEf,kDAA+C;AACtD,SAASC,QAAQ,QAA4B,0BAAuB;AAGpE,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAcA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAM2B,cAAc5B,aAAasB;IAEjC,qBACE,MAACnB;QACC0B,SAAS;QACTC,UAAU;QACVC,WAAWL,UAAUM,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBC,eAAenC,mCAEb0B,WAAWU,oBAAoBd,WAAWO,cAC1CA,eAAeP,cAAc,4CAC7BjB,UAAU,CAACe,KAAK,EAChBV,gBAAgB,CAACW,WAAW,EAC5BR,eAAe,CAACS,UAAU,EAC1BM,UAAU,aAAaZ,eAAe,CAACY,MAAM;OAE3CD;;0BAEJ,KAACxB;gBAAqBqB,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACQ;gBAAKC,SAAS;0BAAgBf;;;;AAGrD,EAAE;AAEF,OAAO,SAASa,oBACdd,SAA2B,EAC3BO,WAAoB;IAEpB,OAAQP;QACN,KAAK;YACH;QACF,KAAK;YACH,OAAOO,cAAcU;IACzB;AACF"}

package/dist/components/WriteBarIcon/WriteBarIcon.d.ts

@@ -22,5 +22,5 @@ export interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButton
 /**
  * @see https://vkcom.github.io/VKUI/#/WriteBarIcon
  */
-export declare const WriteBarIcon: ({ mode, children, count, className, label: labelProp, ...restProps }: WriteBarIconProps) => React.ReactNode;
+export declare const WriteBarIcon: ({ mode, children, count, label: labelProp, ...restProps }: WriteBarIconProps) => React.ReactNode;
 //# sourceMappingURL=WriteBarIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"WriteBarIcon.d.ts","sourceRoot":"","sources":["../../../src/components/WriteBarIcon/WriteBarIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;GAEG;AACH,eAAO,MAAM,YAAY,yEAOtB,iBAAiB,KAAG,KAAK,CAAC,SAsE5B,CAAC"}
+{"version":3,"file":"WriteBarIcon.d.ts","sourceRoot":"","sources":["../../../src/components/WriteBarIcon/WriteBarIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;GAEG;AACH,eAAO,MAAM,YAAY,8DAMtB,iBAAiB,KAAG,KAAK,CAAC,SAqE5B,CAAC"}

package/dist/components/WriteBarIcon/WriteBarIcon.js

@@ -22,11 +22,10 @@ const warn = warnOnce('WriteBarIcon');
 /**
  * @see https://vkcom.github.io/VKUI/#/WriteBarIcon
  */ export const WriteBarIcon = (_param)=>{
-    var { mode, children, count, className, label: labelProp } = _param, restProps = _object_without_properties(_param, [
+    var { mode, children, count, label: labelProp } = _param, restProps = _object_without_properties(_param, [
         "mode",
         "children",
         "count",
-        "className",
         "label"
     ]);
     const platform = usePlatform();
@@ -69,7 +68,7 @@ const warn = warnOnce('WriteBarIcon');
         Component: "button",
         hasHover: false,
         activeMode: "vkuiWriteBarIcon__active",
-        className: classNames("vkuiWriteBarIcon__host", platform === 'ios' && "vkuiWriteBarIcon__ios", mode === 'send' && "vkuiWriteBarIcon__modeSend", mode === 'done' && "vkuiWriteBarIcon__modeDone", className),
+        baseClassName: classNames("vkuiWriteBarIcon__host", platform === 'ios' && "vkuiWriteBarIcon__ios", mode === 'send' && "vkuiWriteBarIcon__modeSend", mode === 'done' && "vkuiWriteBarIcon__modeDone"),
         children: [
             /*#__PURE__*/ _jsxs("span", {
                 className: "vkuiWriteBarIcon__in",

package/dist/components/WriteBarIcon/WriteBarIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/WriteBarIcon/WriteBarIcon.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon24Attach,\n  Icon24CheckCircleOutline,\n  Icon24Send,\n  Icon28AddCircleOutline,\n  Icon28AttachOutline,\n  Icon28CheckCircleOutline,\n  Icon28Send,\n  Icon48WritebarDone,\n  Icon48WritebarSend,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Counter } from '../Counter/Counter';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './WriteBarIcon.module.css';\n\nconst predefinedLabel = {\n  attach: 'Прикрепить файл',\n  send: 'Отправить',\n  done: 'Готово',\n};\n\nexport interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Предустановленные типы кнопок в WriteBar для отрисовки иконки и установки текста кнопки в зависимости от платформы.\n   * Если передать валидное значение для этого свойства, `children` игнорируются, а для `label` по умолчанию используется текст на \"ru_RU\".\n   *\n   * Валидные значения:\n   * - `attach` – иконка прикрепления, текст по умолчанию — \"Прикрепить файл\";\n   * - `send` – иконка отправки, текст по умолчанию — \"Отправить\";\n   * - `done` – иконка отправки в режиме редактирования, текст по умолчанию — \"Готово\";\n   */\n  mode?: 'attach' | 'send' | 'done';\n  /**\n   * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.\n   */\n  count?: number;\n  /**\n   * Текст кнопки. Необходим для ассистивных технологий.\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('WriteBarIcon');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBarIcon\n */\nexport const WriteBarIcon = ({\n  mode,\n  children,\n  count,\n  className,\n  label: labelProp,\n  ...restProps\n}: WriteBarIconProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  let predefinedIcons;\n\n  switch (mode) {\n    case 'attach':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon28AddCircleOutline : Icon24Attach,\n        IconRegular: platform === 'ios' ? Icon28AddCircleOutline : Icon28AttachOutline,\n      };\n      break;\n\n    case 'send':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon48WritebarSend : Icon24Send,\n        IconRegular: platform === 'ios' ? Icon48WritebarSend : Icon28Send,\n      };\n      break;\n\n    case 'done':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon48WritebarDone : Icon24CheckCircleOutline,\n        IconRegular: platform === 'ios' ? Icon48WritebarDone : Icon28CheckCircleOutline,\n      };\n      break;\n\n    default:\n      break;\n  }\n\n  const label = labelProp ?? (mode && predefinedLabel[mode]);\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y['button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      activeMode={styles.active}\n      className={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'send' && styles.modeSend,\n        mode === 'done' && styles.modeDone,\n        className,\n      )}\n    >\n      <span className={styles.in}>\n        {label && <VisuallyHidden>{label}</VisuallyHidden>}\n        {predefinedIcons ? <AdaptiveIconRenderer {...predefinedIcons} /> : children}\n      </span>\n      {hasReactNode(count) && (\n        <Counter className={styles.counter} size=\"s\">\n          {count}\n        </Counter>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Attach","Icon24CheckCircleOutline","Icon24Send","Icon28AddCircleOutline","Icon28AttachOutline","Icon28CheckCircleOutline","Icon28Send","Icon48WritebarDone","Icon48WritebarSend","classNames","hasReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","AdaptiveIconRenderer","Counter","Tappable","VisuallyHidden","predefinedLabel","attach","send","done","warn","WriteBarIcon","mode","children","count","className","label","labelProp","restProps","platform","predefinedIcons","IconCompact","IconRegular","process","env","NODE_ENV","isAccessible","a11y","Component","hasHover","activeMode","span","size"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,wBAAwB,EACxBC,UAAU,EACVC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,UAAU,EACVC,kBAAkB,EAClBC,kBAAkB,QACb,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,MAAMC,kBAAkB;IACtBC,QAAQ;IACRC,MAAM;IACNC,MAAM;AACR;AAuBA,MAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,eAAe;QAAC,EAC3BC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,OAAOC,SAAS,EAEE,WADfC;QALHN;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAMG,WAAWrB;IAEjB,IAAIsB;IAEJ,OAAQR;QACN,KAAK;YACHQ,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQ7B,yBAAyBH;gBAC3DmC,aAAaH,aAAa,QAAQ7B,yBAAyBC;YAC7D;YACA;QAEF,KAAK;YACH6B,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQxB,qBAAqBN;gBACvDiC,aAAaH,aAAa,QAAQxB,qBAAqBF;YACzD;YACA;QAEF,KAAK;YACH2B,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQzB,qBAAqBN;gBACvDkC,aAAaH,aAAa,QAAQzB,qBAAqBF;YACzD;YACA;QAEF;YACE;IACJ;IAEA,MAAMwB,QAAQC,sBAAAA,uBAAAA,YAAcL,QAAQN,eAAe,CAACM,KAAK;IAEzD,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe3B,kBAAkB;YACrCc,UAAU;gBAACA;gBAAUG;aAAM;WACxBE;QAGL,IAAI,CAACQ,cAAc;YACjBhB,KAAKV,gBAAgB2B,IAAI,CAAC,cAAc,EAAE;QAC5C;IACF;IAEA,qBACE,MAACvB,kDACKc;QACJU,WAAU;QACVC,UAAU;QACVC,UAAU;QACVf,WAAWnB,qCAETuB,aAAa,kCACbP,SAAS,wCACTA,SAAS,wCACTG;;0BAGF,MAACgB;gBAAKhB,SAAS;;oBACZC,uBAAS,KAACX;kCAAgBW;;oBAC1BI,gCAAkB,KAAClB,yCAAyBkB,oBAAsBP;;;YAEpEhB,aAAaiB,wBACZ,KAACX;gBAAQY,SAAS;gBAAkBiB,MAAK;0BACtClB;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/WriteBarIcon/WriteBarIcon.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon24Attach,\n  Icon24CheckCircleOutline,\n  Icon24Send,\n  Icon28AddCircleOutline,\n  Icon28AttachOutline,\n  Icon28CheckCircleOutline,\n  Icon28Send,\n  Icon48WritebarDone,\n  Icon48WritebarSend,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Counter } from '../Counter/Counter';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './WriteBarIcon.module.css';\n\nconst predefinedLabel = {\n  attach: 'Прикрепить файл',\n  send: 'Отправить',\n  done: 'Готово',\n};\n\nexport interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Предустановленные типы кнопок в WriteBar для отрисовки иконки и установки текста кнопки в зависимости от платформы.\n   * Если передать валидное значение для этого свойства, `children` игнорируются, а для `label` по умолчанию используется текст на \"ru_RU\".\n   *\n   * Валидные значения:\n   * - `attach` – иконка прикрепления, текст по умолчанию — \"Прикрепить файл\";\n   * - `send` – иконка отправки, текст по умолчанию — \"Отправить\";\n   * - `done` – иконка отправки в режиме редактирования, текст по умолчанию — \"Готово\";\n   */\n  mode?: 'attach' | 'send' | 'done';\n  /**\n   * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.\n   */\n  count?: number;\n  /**\n   * Текст кнопки. Необходим для ассистивных технологий.\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('WriteBarIcon');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBarIcon\n */\nexport const WriteBarIcon = ({\n  mode,\n  children,\n  count,\n  label: labelProp,\n  ...restProps\n}: WriteBarIconProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  let predefinedIcons;\n\n  switch (mode) {\n    case 'attach':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon28AddCircleOutline : Icon24Attach,\n        IconRegular: platform === 'ios' ? Icon28AddCircleOutline : Icon28AttachOutline,\n      };\n      break;\n\n    case 'send':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon48WritebarSend : Icon24Send,\n        IconRegular: platform === 'ios' ? Icon48WritebarSend : Icon28Send,\n      };\n      break;\n\n    case 'done':\n      predefinedIcons = {\n        IconCompact: platform === 'ios' ? Icon48WritebarDone : Icon24CheckCircleOutline,\n        IconRegular: platform === 'ios' ? Icon48WritebarDone : Icon28CheckCircleOutline,\n      };\n      break;\n\n    default:\n      break;\n  }\n\n  const label = labelProp ?? (mode && predefinedLabel[mode]);\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y['button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      activeMode={styles.active}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'send' && styles.modeSend,\n        mode === 'done' && styles.modeDone,\n      )}\n    >\n      <span className={styles.in}>\n        {label && <VisuallyHidden>{label}</VisuallyHidden>}\n        {predefinedIcons ? <AdaptiveIconRenderer {...predefinedIcons} /> : children}\n      </span>\n      {hasReactNode(count) && (\n        <Counter className={styles.counter} size=\"s\">\n          {count}\n        </Counter>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Attach","Icon24CheckCircleOutline","Icon24Send","Icon28AddCircleOutline","Icon28AttachOutline","Icon28CheckCircleOutline","Icon28Send","Icon48WritebarDone","Icon48WritebarSend","classNames","hasReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","AdaptiveIconRenderer","Counter","Tappable","VisuallyHidden","predefinedLabel","attach","send","done","warn","WriteBarIcon","mode","children","count","label","labelProp","restProps","platform","predefinedIcons","IconCompact","IconRegular","process","env","NODE_ENV","isAccessible","a11y","Component","hasHover","activeMode","baseClassName","span","className","size"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,wBAAwB,EACxBC,UAAU,EACVC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,UAAU,EACVC,kBAAkB,EAClBC,kBAAkB,QACb,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,MAAMC,kBAAkB;IACtBC,QAAQ;IACRC,MAAM;IACNC,MAAM;AACR;AAuBA,MAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,eAAe;QAAC,EAC3BC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACLC,OAAOC,SAAS,EAEE,WADfC;QAJHL;QACAC;QACAC;QACAC;;IAGA,MAAMG,WAAWpB;IAEjB,IAAIqB;IAEJ,OAAQP;QACN,KAAK;YACHO,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQ5B,yBAAyBH;gBAC3DkC,aAAaH,aAAa,QAAQ5B,yBAAyBC;YAC7D;YACA;QAEF,KAAK;YACH4B,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQvB,qBAAqBN;gBACvDgC,aAAaH,aAAa,QAAQvB,qBAAqBF;YACzD;YACA;QAEF,KAAK;YACH0B,kBAAkB;gBAChBC,aAAaF,aAAa,QAAQxB,qBAAqBN;gBACvDiC,aAAaH,aAAa,QAAQxB,qBAAqBF;YACzD;YACA;QAEF;YACE;IACJ;IAEA,MAAMuB,QAAQC,sBAAAA,uBAAAA,YAAcJ,QAAQN,eAAe,CAACM,KAAK;IAEzD,IAAIU,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe1B,kBAAkB;YACrCc,UAAU;gBAACA;gBAAUE;aAAM;WACxBE;QAGL,IAAI,CAACQ,cAAc;YACjBf,KAAKV,gBAAgB0B,IAAI,CAAC,cAAc,EAAE;QAC5C;IACF;IAEA,qBACE,MAACtB,kDACKa;QACJU,WAAU;QACVC,UAAU;QACVC,UAAU;QACVC,eAAelC,qCAEbsB,aAAa,kCACbN,SAAS,wCACTA,SAAS;;0BAGX,MAACmB;gBAAKC,SAAS;;oBACZjB,uBAAS,KAACV;kCAAgBU;;oBAC1BI,gCAAkB,KAACjB,yCAAyBiB,oBAAsBN;;;YAEpEhB,aAAaiB,wBACZ,KAACX;gBAAQ6B,SAAS;gBAAkBC,MAAK;0BACtCnB;;;;AAKX,EAAE"}