@vkontakte/vkui 5.0.2 → 5.1.0

package/dist/components/WriteBar/WriteBar.js

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "style", "before", "inlineAfter", "after", "value", "onChange", "getRootRef", "getRef", "onHeightChange", "shadow"];
-import * as React from "react";
-import { Headline } from "../Typography/Headline/Headline";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useExternRef } from "../../hooks/useExternRef";
-import { hasReactNode, isFunction } from "../../lib/utils";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
+var _excluded = ["className", "style", "before", "inlineAfter", "after", "getRootRef", "getRef", "onHeightChange", "shadow", "defaultValue"];
+import * as React from 'react';
+import { Headline } from '../Typography/Headline/Headline';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useExternRef } from '../../hooks/useExternRef';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { useEnsuredControl } from '../../hooks/useEnsuredControl';
 /**
  * @see https://vkcom.github.io/VKUI/#/WriteBar
  */
@@ -17,16 +19,20 @@ export var WriteBar = function WriteBar(_ref) {
     before = _ref.before,
     inlineAfter = _ref.inlineAfter,
     after = _ref.after,
-    value = _ref.value,
-    onChange = _ref.onChange,
     getRootRef = _ref.getRootRef,
     getRef = _ref.getRef,
     onHeightChange = _ref.onHeightChange,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+    defaultValue = _ref.defaultValue,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
-  var isControlledOutside = value != null;
+  var _useEnsuredControl = useEnsuredControl(_objectSpread({
+      defaultValue: defaultValue
+    }, restProps)),
+    _useEnsuredControl2 = _slicedToArray(_useEnsuredControl, 2),
+    value = _useEnsuredControl2[0],
+    onChange = _useEnsuredControl2[1];
   var textareaRef = useExternRef(getRef);
   var currentScrollHeight = React.useRef();
   var resize = React.useCallback(function () {
@@ -35,7 +41,7 @@ export var WriteBar = function WriteBar(_ref) {
       return;
     }
     if (textareaEl.offsetParent) {
-      textareaEl.style.height = "";
+      textareaEl.style.height = '';
       textareaEl.style.height = "".concat(textareaEl.scrollHeight, "px");
       if (textareaEl.scrollHeight !== currentScrollHeight.current && onHeightChange) {
         onHeightChange();
@@ -43,20 +49,10 @@ export var WriteBar = function WriteBar(_ref) {
       }
     }
   }, [onHeightChange, textareaRef]);
-  var onTextareaChange = function onTextareaChange(event) {
-    if (isFunction(onChange)) {
-      onChange(event);
-    }
-    if (!isControlledOutside) {
-      resize();
-    }
-  };
-  React.useEffect(function () {
-    resize();
-  }, [resize, value]);
+  React.useEffect(resize, [resize, value]);
   return /*#__PURE__*/React.createElement("div", {
     ref: getRootRef,
-    className: classNamesString("vkuiWriteBar", platform === Platform.IOS && "vkuiWriteBar--ios", shadow && "vkuiWriteBar--shadow", className),
+    className: classNames("vkuiWriteBar", platform === Platform.IOS && "vkuiWriteBar--ios", shadow && "vkuiWriteBar--shadow", className),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiWriteBar__form"
@@ -67,7 +63,7 @@ export var WriteBar = function WriteBar(_ref) {
   }, /*#__PURE__*/React.createElement(Headline, _extends({}, restProps, {
     Component: "textarea",
     className: "vkuiWriteBar__textarea",
-    onChange: onTextareaChange,
+    onChange: onChange,
     getRootRef: textareaRef,
     value: value
   })), hasReactNode(inlineAfter) && /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"WriteBar.js","names":["React","Headline","usePlatform","useExternRef","hasReactNode","isFunction","classNamesString","Platform","WriteBar","className","style","before","inlineAfter","after","value","onChange","getRootRef","getRef","onHeightChange","shadow","restProps","platform","isControlledOutside","textareaRef","currentScrollHeight","useRef","resize","useCallback","textareaEl","current","offsetParent","height","scrollHeight","onTextareaChange","event","useEffect","IOS"],"sources":["../../../src/components/WriteBar/WriteBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { hasReactNode, isFunction } from \"../../lib/utils\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport styles from \"./WriteBar.module.css\";\n\nexport interface WriteBarProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLTextAreaElement> {\n  /**\n   * Содержимое, отображаемое слева от поля ввода.\n   */\n  before?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое поверх поля ввода (актуально для iOS)\n   */\n  inlineAfter?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое справа от поля ввода\n   */\n  after?: React.ReactNode;\n  /**\n   * Вызывается при смене высоты поля ввода\n   */\n  onHeightChange?: VoidFunction;\n  /**\n   * Добавляет тень вокруг поля ввода\n   */\n  shadow?: boolean;\n\n  children?: never;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBar\n */\nexport const WriteBar = ({\n  className,\n  style,\n  before,\n  inlineAfter,\n  after,\n  value,\n  onChange,\n  getRootRef,\n  getRef,\n  onHeightChange,\n  shadow = false,\n  ...restProps\n}: WriteBarProps) => {\n  const platform = usePlatform();\n\n  const isControlledOutside = value != null;\n\n  const textareaRef = useExternRef(getRef);\n  const currentScrollHeight = React.useRef<number>();\n\n  const resize = React.useCallback(() => {\n    const textareaEl = textareaRef.current;\n    if (!textareaEl) {\n      return;\n    }\n\n    if (textareaEl.offsetParent) {\n      textareaEl.style.height = \"\";\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n\n      if (\n        textareaEl.scrollHeight !== currentScrollHeight.current &&\n        onHeightChange\n      ) {\n        onHeightChange();\n        currentScrollHeight.current = textareaEl.scrollHeight;\n      }\n    }\n  }, [onHeightChange, textareaRef]);\n\n  const onTextareaChange: React.ChangeEventHandler<HTMLTextAreaElement> = (\n    event\n  ) => {\n    if (isFunction(onChange)) {\n      onChange(event);\n    }\n\n    if (!isControlledOutside) {\n      resize();\n    }\n  };\n\n  React.useEffect(() => {\n    resize();\n  }, [resize, value]);\n\n  return (\n    <div\n      ref={getRootRef}\n      className={classNamesString(\n        styles[\"WriteBar\"],\n        platform === Platform.IOS && styles[\"WriteBar--ios\"],\n        shadow && styles[\"WriteBar--shadow\"],\n        className\n      )}\n      style={style}\n    >\n      <div className={styles[\"WriteBar__form\"]}>\n        {hasReactNode(before) && (\n          <div className={styles[\"WriteBar__before\"]}>{before}</div>\n        )}\n\n        <div className={styles[\"WriteBar__formIn\"]}>\n          <Headline\n            {...restProps}\n            Component=\"textarea\"\n            className={styles[\"WriteBar__textarea\"]}\n            onChange={onTextareaChange}\n            getRootRef={textareaRef}\n            value={value}\n          />\n          {hasReactNode(inlineAfter) && (\n            <div className={styles[\"WriteBar__inlineAfter\"]}>{inlineAfter}</div>\n          )}\n        </div>\n\n        {hasReactNode(after) && (\n          <div className={styles[\"WriteBar__after\"]}>{after}</div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,QAAQ,QAAQ,oBAAoB;AAgC7C;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,cAAc,QAAdA,cAAc;IAAA,mBACdC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACXC,SAAS;EAEZ,IAAMC,QAAQ,GAAGnB,WAAW,EAAE;EAE9B,IAAMoB,mBAAmB,GAAGR,KAAK,IAAI,IAAI;EAEzC,IAAMS,WAAW,GAAGpB,YAAY,CAACc,MAAM,CAAC;EACxC,IAAMO,mBAAmB,GAAGxB,KAAK,CAACyB,MAAM,EAAU;EAElD,IAAMC,MAAM,GAAG1B,KAAK,CAAC2B,WAAW,CAAC,YAAM;IACrC,IAAMC,UAAU,GAAGL,WAAW,CAACM,OAAO;IACtC,IAAI,CAACD,UAAU,EAAE;MACf;IACF;IAEA,IAAIA,UAAU,CAACE,YAAY,EAAE;MAC3BF,UAAU,CAAClB,KAAK,CAACqB,MAAM,GAAG,EAAE;MAC5BH,UAAU,CAAClB,KAAK,CAACqB,MAAM,aAAMH,UAAU,CAACI,YAAY,OAAI;MAExD,IACEJ,UAAU,CAACI,YAAY,KAAKR,mBAAmB,CAACK,OAAO,IACvDX,cAAc,EACd;QACAA,cAAc,EAAE;QAChBM,mBAAmB,CAACK,OAAO,GAAGD,UAAU,CAACI,YAAY;MACvD;IACF;EACF,CAAC,EAAE,CAACd,cAAc,EAAEK,WAAW,CAAC,CAAC;EAEjC,IAAMU,gBAA+D,GAAG,SAAlEA,gBAA+D,CACnEC,KAAK,EACF;IACH,IAAI7B,UAAU,CAACU,QAAQ,CAAC,EAAE;MACxBA,QAAQ,CAACmB,KAAK,CAAC;IACjB;IAEA,IAAI,CAACZ,mBAAmB,EAAE;MACxBI,MAAM,EAAE;IACV;EACF,CAAC;EAED1B,KAAK,CAACmC,SAAS,CAAC,YAAM;IACpBT,MAAM,EAAE;EACV,CAAC,EAAE,CAACA,MAAM,EAAEZ,KAAK,CAAC,CAAC;EAEnB,oBACE;IACE,GAAG,EAAEE,UAAW;IAChB,SAAS,EAAEV,gBAAgB,iBAEzBe,QAAQ,KAAKd,QAAQ,CAAC6B,GAAG,uBAA2B,EACpDjB,MAAM,0BAA8B,EACpCV,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb;IAAK,SAAS;EAA2B,GACtCN,YAAY,CAACO,MAAM,CAAC,iBACnB;IAAK,SAAS;EAA6B,GAAEA,MAAM,CACpD,eAED;IAAK,SAAS;EAA6B,gBACzC,oBAAC,QAAQ,eACHS,SAAS;IACb,SAAS,EAAC,UAAU;IACpB,SAAS,0BAA+B;IACxC,QAAQ,EAAEa,gBAAiB;IAC3B,UAAU,EAAEV,WAAY;IACxB,KAAK,EAAET;EAAM,GACb,EACDV,YAAY,CAACQ,WAAW,CAAC,iBACxB;IAAK,SAAS;EAAkC,GAAEA,WAAW,CAC9D,CACG,EAELR,YAAY,CAACS,KAAK,CAAC,iBAClB;IAAK,SAAS;EAA4B,GAAEA,KAAK,CAClD,CACG,CACF;AAEV,CAAC"}
+{"version":3,"file":"WriteBar.js","names":["React","Headline","usePlatform","useExternRef","classNames","hasReactNode","Platform","useEnsuredControl","WriteBar","className","style","before","inlineAfter","after","getRootRef","getRef","onHeightChange","shadow","defaultValue","restProps","platform","value","onChange","textareaRef","currentScrollHeight","useRef","resize","useCallback","textareaEl","current","offsetParent","height","scrollHeight","useEffect","IOS"],"sources":["../../../src/components/WriteBar/WriteBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport styles from './WriteBar.module.css';\n\nexport interface WriteBarProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLTextAreaElement> {\n  /**\n   * Содержимое, отображаемое слева от поля ввода.\n   */\n  before?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое поверх поля ввода (актуально для iOS)\n   */\n  inlineAfter?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое справа от поля ввода\n   */\n  after?: React.ReactNode;\n  /**\n   * Вызывается при смене высоты поля ввода\n   */\n  onHeightChange?: VoidFunction;\n  /**\n   * Добавляет тень вокруг поля ввода\n   */\n  shadow?: boolean;\n\n  children?: never;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBar\n */\nexport const WriteBar = ({\n  className,\n  style,\n  before,\n  inlineAfter,\n  after,\n  getRootRef,\n  getRef,\n  onHeightChange,\n  shadow = false,\n  defaultValue,\n  ...restProps\n}: WriteBarProps) => {\n  const platform = usePlatform();\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    ...restProps,\n  });\n\n  const textareaRef = useExternRef(getRef);\n  const currentScrollHeight = React.useRef<number>();\n\n  const resize = React.useCallback(() => {\n    const textareaEl = textareaRef.current;\n    if (!textareaEl) {\n      return;\n    }\n\n    if (textareaEl.offsetParent) {\n      textareaEl.style.height = '';\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n\n      if (textareaEl.scrollHeight !== currentScrollHeight.current && onHeightChange) {\n        onHeightChange();\n        currentScrollHeight.current = textareaEl.scrollHeight;\n      }\n    }\n  }, [onHeightChange, textareaRef]);\n\n  React.useEffect(resize, [resize, value]);\n\n  return (\n    <div\n      ref={getRootRef}\n      className={classNames(\n        styles['WriteBar'],\n        platform === Platform.IOS && styles['WriteBar--ios'],\n        shadow && styles['WriteBar--shadow'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['WriteBar__form']}>\n        {hasReactNode(before) && <div className={styles['WriteBar__before']}>{before}</div>}\n\n        <div className={styles['WriteBar__formIn']}>\n          <Headline\n            {...restProps}\n            Component=\"textarea\"\n            className={styles['WriteBar__textarea']}\n            onChange={onChange}\n            getRootRef={textareaRef}\n            value={value}\n          />\n          {hasReactNode(inlineAfter) && (\n            <div className={styles['WriteBar__inlineAfter']}>{inlineAfter}</div>\n          )}\n        </div>\n\n        {hasReactNode(after) && <div className={styles['WriteBar__after']}>{after}</div>}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,iBAAiB,QAAQ,+BAA+B;AA+BjE;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAYA;EAAA,IAXnBC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,cAAc,QAAdA,cAAc;IAAA,mBACdC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,YAAY,QAAZA,YAAY;IACTC,SAAS;EAEZ,IAAMC,QAAQ,GAAGlB,WAAW,EAAE;EAE9B,yBAA0BK,iBAAiB;MACzCW,YAAY,EAAZA;IAAY,GACTC,SAAS,EACZ;IAAA;IAHKE,KAAK;IAAEC,QAAQ;EAKtB,IAAMC,WAAW,GAAGpB,YAAY,CAACY,MAAM,CAAC;EACxC,IAAMS,mBAAmB,GAAGxB,KAAK,CAACyB,MAAM,EAAU;EAElD,IAAMC,MAAM,GAAG1B,KAAK,CAAC2B,WAAW,CAAC,YAAM;IACrC,IAAMC,UAAU,GAAGL,WAAW,CAACM,OAAO;IACtC,IAAI,CAACD,UAAU,EAAE;MACf;IACF;IAEA,IAAIA,UAAU,CAACE,YAAY,EAAE;MAC3BF,UAAU,CAAClB,KAAK,CAACqB,MAAM,GAAG,EAAE;MAC5BH,UAAU,CAAClB,KAAK,CAACqB,MAAM,aAAMH,UAAU,CAACI,YAAY,OAAI;MAExD,IAAIJ,UAAU,CAACI,YAAY,KAAKR,mBAAmB,CAACK,OAAO,IAAIb,cAAc,EAAE;QAC7EA,cAAc,EAAE;QAChBQ,mBAAmB,CAACK,OAAO,GAAGD,UAAU,CAACI,YAAY;MACvD;IACF;EACF,CAAC,EAAE,CAAChB,cAAc,EAAEO,WAAW,CAAC,CAAC;EAEjCvB,KAAK,CAACiC,SAAS,CAACP,MAAM,EAAE,CAACA,MAAM,EAAEL,KAAK,CAAC,CAAC;EAExC,oBACE;IACE,GAAG,EAAEP,UAAW;IAChB,SAAS,EAAEV,UAAU,iBAEnBgB,QAAQ,KAAKd,QAAQ,CAAC4B,GAAG,uBAA2B,EACpDjB,MAAM,0BAA8B,EACpCR,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb;IAAK,SAAS;EAA2B,GACtCL,YAAY,CAACM,MAAM,CAAC,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eAEnF;IAAK,SAAS;EAA6B,gBACzC,oBAAC,QAAQ,eACHQ,SAAS;IACb,SAAS,EAAC,UAAU;IACpB,SAAS,0BAA+B;IACxC,QAAQ,EAAEG,QAAS;IACnB,UAAU,EAAEC,WAAY;IACxB,KAAK,EAAEF;EAAM,GACb,EACDhB,YAAY,CAACO,WAAW,CAAC,iBACxB;IAAK,SAAS;EAAkC,GAAEA,WAAW,CAC9D,CACG,EAELP,YAAY,CAACQ,KAAK,CAAC,iBAAI;IAAK,SAAS;EAA4B,GAAEA,KAAK,CAAO,CAC5E,CACF;AAEV,CAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Предустановленные типы кнопок в WriteBar для отрисовки иконки в зависимости от платформы.
@@ -8,7 +8,7 @@ export interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButton
      * - `send` – иконка отправки.
      * - `done` – иконка отправки в режиме редактирования.
      */
-    mode?: "attach" | "send" | "done";
+    mode?: 'attach' | 'send' | 'done';
     /**
      * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.
      */

package/dist/components/WriteBarIcon/WriteBarIcon.js

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode", "children", "count", "className"];
-import * as React from "react";
-import { Icon24Send, Icon28AddCircleOutline, Icon28AttachOutline, Icon28CheckCircleOutline, Icon48WritebarDone, Icon48WritebarSend } from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { Counter } from "../Counter/Counter";
-import { Tappable } from "../Tappable/Tappable";
-import { warnOnce } from "../../lib/warnOnce";
-import { hasReactNode } from "../../lib/utils";
-var warn = warnOnce("WriteBarIcon");
-var IS_DEV = process.env.NODE_ENV === "development";
+import * as React from 'react';
+import { Icon24Send, Icon28AddCircleOutline, Icon28AttachOutline, Icon28CheckCircleOutline, Icon48WritebarDone, Icon48WritebarSend } from '@vkontakte/icons';
+import { usePlatform } from '../../hooks/usePlatform';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { Counter } from '../Counter/Counter';
+import { Tappable } from '../Tappable/Tappable';
+import { warnOnce } from '../../lib/warnOnce';
+var warn = warnOnce('WriteBarIcon');
+var IS_DEV = process.env.NODE_ENV === 'development';
 
 /**
  * @see https://vkcom.github.io/VKUI/#/WriteBarIcon
@@ -26,23 +25,23 @@ export var WriteBarIcon = function WriteBarIcon(_ref) {
   var icon;
   var ariaLabel = undefined;
   switch (mode) {
-    case "attach":
+    case 'attach':
       icon = platform === Platform.IOS ? /*#__PURE__*/React.createElement(Icon28AddCircleOutline, null) : /*#__PURE__*/React.createElement(Icon28AttachOutline, null);
-      ariaLabel = "Прикрепить файл";
+      ariaLabel = 'Прикрепить файл';
       break;
-    case "send":
+    case 'send':
       icon = platform === Platform.IOS ? /*#__PURE__*/React.createElement(Icon48WritebarSend, null) : /*#__PURE__*/React.createElement(Icon24Send, null);
-      ariaLabel = "Отправить";
+      ariaLabel = 'Отправить';
       break;
-    case "done":
+    case 'done':
       icon = platform === Platform.IOS ? /*#__PURE__*/React.createElement(Icon48WritebarDone, null) : /*#__PURE__*/React.createElement(Icon28CheckCircleOutline, null);
-      ariaLabel = "Готово";
+      ariaLabel = 'Готово';
       break;
     default:
       break;
   }
-  if (IS_DEV && !restProps["aria-label"] && !ariaLabel) {
-    warn("a11y: У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей.", "error");
+  if (IS_DEV && !restProps['aria-label'] && !ariaLabel) {
+    warn('a11y: У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей.', 'error');
   }
   return /*#__PURE__*/React.createElement(Tappable, _extends({
     "aria-label": ariaLabel
@@ -50,7 +49,7 @@ export var WriteBarIcon = function WriteBarIcon(_ref) {
     Component: "button",
     hasHover: false,
     activeMode: "vkuiWriteBarIcon__active",
-    className: classNamesString("vkuiWriteBarIcon", platform === Platform.IOS && "vkuiWriteBarIcon--ios", mode && styles["WriteBarIcon--mode-".concat(mode)], className)
+    className: classNames("vkuiWriteBarIcon", platform === Platform.IOS && "vkuiWriteBarIcon--ios", mode && styles["WriteBarIcon--mode-".concat(mode)], className)
   }), /*#__PURE__*/React.createElement("span", {
     className: "vkuiWriteBarIcon__in"
   }, icon || children), hasReactNode(count) && /*#__PURE__*/React.createElement(Counter, {

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

@@ -1 +1 @@
-{"version":3,"file":"WriteBarIcon.js","names":["React","Icon24Send","Icon28AddCircleOutline","Icon28AttachOutline","Icon28CheckCircleOutline","Icon48WritebarDone","Icon48WritebarSend","usePlatform","classNamesString","Platform","Counter","Tappable","warnOnce","hasReactNode","warn","IS_DEV","process","env","NODE_ENV","WriteBarIcon","mode","children","count","className","restProps","platform","icon","ariaLabel","undefined","IOS","styles"],"sources":["../../../src/components/WriteBarIcon/WriteBarIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon24Send,\n  Icon28AddCircleOutline,\n  Icon28AttachOutline,\n  Icon28CheckCircleOutline,\n  Icon48WritebarDone,\n  Icon48WritebarSend,\n} from \"@vkontakte/icons\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { Counter } from \"../Counter/Counter\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport styles from \"./WriteBarIcon.module.css\";\n\nexport interface WriteBarIconProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Предустановленные типы кнопок в WriteBar для отрисовки иконки в зависимости от платформы.\n   * Если передать валидное значение для этого свойства, `children` игнорируется.\n   *\n   * - `attach` – иконка прикрепления.\n   * - `send` – иконка отправки.\n   * - `done` – иконка отправки в режиме редактирования.\n   */\n  mode?: \"attach\" | \"send\" | \"done\";\n  /**\n   * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.\n   */\n  count?: number;\n}\n\nconst warn = warnOnce(\"WriteBarIcon\");\nconst IS_DEV = process.env.NODE_ENV === \"development\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBarIcon\n */\nexport const WriteBarIcon = ({\n  mode,\n  children,\n  count,\n  className,\n  ...restProps\n}: WriteBarIconProps) => {\n  const platform = usePlatform();\n\n  let icon: React.ReactNode;\n  let ariaLabel: string | undefined = undefined;\n\n  switch (mode) {\n    case \"attach\":\n      icon =\n        platform === Platform.IOS ? (\n          <Icon28AddCircleOutline />\n        ) : (\n          <Icon28AttachOutline />\n        );\n      ariaLabel = \"Прикрепить файл\";\n      break;\n\n    case \"send\":\n      icon =\n        platform === Platform.IOS ? <Icon48WritebarSend /> : <Icon24Send />;\n      ariaLabel = \"Отправить\";\n      break;\n\n    case \"done\":\n      icon =\n        platform === Platform.IOS ? (\n          <Icon48WritebarDone />\n        ) : (\n          <Icon28CheckCircleOutline />\n        );\n      ariaLabel = \"Готово\";\n      break;\n\n    default:\n      break;\n  }\n\n  if (IS_DEV && !restProps[\"aria-label\"] && !ariaLabel) {\n    warn(\n      \"a11y: У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей.\",\n      \"error\"\n    );\n  }\n\n  return (\n    <Tappable\n      aria-label={ariaLabel}\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      activeMode={styles[\"WriteBarIcon__active\"]}\n      className={classNamesString(\n        styles[\"WriteBarIcon\"],\n        platform === Platform.IOS && styles[\"WriteBarIcon--ios\"],\n        mode && styles[`WriteBarIcon--mode-${mode}`],\n        className\n      )}\n    >\n      <span className={styles[\"WriteBarIcon__in\"]}>{icon || children}</span>\n      {hasReactNode(count) && (\n        <Counter className={styles[\"WriteBarIcon__counter\"]} size=\"s\">\n          {count}\n        </Counter>\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,UAAU,EACVC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,kBAAkB,EAClBC,kBAAkB,QACb,kBAAkB;AACzB,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,YAAY,QAAQ,iBAAiB;AAoB9C,IAAMC,IAAI,GAAGF,QAAQ,CAAC,cAAc,CAAC;AACrC,IAAMG,MAAM,GAAGC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa;;AAErD;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAMA;EAAA,IALvBC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGlB,WAAW,EAAE;EAE9B,IAAImB,IAAqB;EACzB,IAAIC,SAA6B,GAAGC,SAAS;EAE7C,QAAQR,IAAI;IACV,KAAK,QAAQ;MACXM,IAAI,GACFD,QAAQ,KAAKhB,QAAQ,CAACoB,GAAG,gBACvB,oBAAC,sBAAsB,OAAG,gBAE1B,oBAAC,mBAAmB,OACrB;MACHF,SAAS,GAAG,iBAAiB;MAC7B;IAEF,KAAK,MAAM;MACTD,IAAI,GACFD,QAAQ,KAAKhB,QAAQ,CAACoB,GAAG,gBAAG,oBAAC,kBAAkB,OAAG,gBAAG,oBAAC,UAAU,OAAG;MACrEF,SAAS,GAAG,WAAW;MACvB;IAEF,KAAK,MAAM;MACTD,IAAI,GACFD,QAAQ,KAAKhB,QAAQ,CAACoB,GAAG,gBACvB,oBAAC,kBAAkB,OAAG,gBAEtB,oBAAC,wBAAwB,OAC1B;MACHF,SAAS,GAAG,QAAQ;MACpB;IAEF;MACE;EAAM;EAGV,IAAIZ,MAAM,IAAI,CAACS,SAAS,CAAC,YAAY,CAAC,IAAI,CAACG,SAAS,EAAE;IACpDb,IAAI,CACF,wFAAwF,EACxF,OAAO,CACR;EACH;EAEA,oBACE,oBAAC,QAAQ;IACP,cAAYa;EAAU,GAClBH,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,UAAU,4BAAiC;IAC3C,SAAS,EAAEhB,gBAAgB,qBAEzBiB,QAAQ,KAAKhB,QAAQ,CAACoB,GAAG,2BAA+B,EACxDT,IAAI,IAAIU,MAAM,8BAAuBV,IAAI,EAAG,EAC5CG,SAAS;EACT,iBAEF;IAAM,SAAS;EAA6B,GAAEG,IAAI,IAAIL,QAAQ,CAAQ,EACrER,YAAY,CAACS,KAAK,CAAC,iBAClB,oBAAC,OAAO;IAAC,SAAS,6BAAkC;IAAC,IAAI,EAAC;EAAG,GAC1DA,KAAK,CAET,CACQ;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"WriteBarIcon.js","names":["React","Icon24Send","Icon28AddCircleOutline","Icon28AttachOutline","Icon28CheckCircleOutline","Icon48WritebarDone","Icon48WritebarSend","usePlatform","classNames","hasReactNode","Platform","Counter","Tappable","warnOnce","warn","IS_DEV","process","env","NODE_ENV","WriteBarIcon","mode","children","count","className","restProps","platform","icon","ariaLabel","undefined","IOS","styles"],"sources":["../../../src/components/WriteBarIcon/WriteBarIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Send,\n  Icon28AddCircleOutline,\n  Icon28AttachOutline,\n  Icon28CheckCircleOutline,\n  Icon48WritebarDone,\n  Icon48WritebarSend,\n} from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { Counter } from '../Counter/Counter';\nimport { Tappable } from '../Tappable/Tappable';\nimport { warnOnce } from '../../lib/warnOnce';\nimport styles from './WriteBarIcon.module.css';\n\nexport interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Предустановленные типы кнопок в WriteBar для отрисовки иконки в зависимости от платформы.\n   * Если передать валидное значение для этого свойства, `children` игнорируется.\n   *\n   * - `attach` – иконка прикрепления.\n   * - `send` – иконка отправки.\n   * - `done` – иконка отправки в режиме редактирования.\n   */\n  mode?: 'attach' | 'send' | 'done';\n  /**\n   * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.\n   */\n  count?: number;\n}\n\nconst warn = warnOnce('WriteBarIcon');\nconst IS_DEV = process.env.NODE_ENV === 'development';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBarIcon\n */\nexport const WriteBarIcon = ({\n  mode,\n  children,\n  count,\n  className,\n  ...restProps\n}: WriteBarIconProps) => {\n  const platform = usePlatform();\n\n  let icon: React.ReactNode;\n  let ariaLabel: string | undefined = undefined;\n\n  switch (mode) {\n    case 'attach':\n      icon = platform === Platform.IOS ? <Icon28AddCircleOutline /> : <Icon28AttachOutline />;\n      ariaLabel = 'Прикрепить файл';\n      break;\n\n    case 'send':\n      icon = platform === Platform.IOS ? <Icon48WritebarSend /> : <Icon24Send />;\n      ariaLabel = 'Отправить';\n      break;\n\n    case 'done':\n      icon = platform === Platform.IOS ? <Icon48WritebarDone /> : <Icon28CheckCircleOutline />;\n      ariaLabel = 'Готово';\n      break;\n\n    default:\n      break;\n  }\n\n  if (IS_DEV && !restProps['aria-label'] && !ariaLabel) {\n    warn(\n      'a11y: У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей.',\n      'error',\n    );\n  }\n\n  return (\n    <Tappable\n      aria-label={ariaLabel}\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      activeMode={styles['WriteBarIcon__active']}\n      className={classNames(\n        styles['WriteBarIcon'],\n        platform === Platform.IOS && styles['WriteBarIcon--ios'],\n        mode && styles[`WriteBarIcon--mode-${mode}`],\n        className,\n      )}\n    >\n      <span className={styles['WriteBarIcon__in']}>{icon || children}</span>\n      {hasReactNode(count) && (\n        <Counter className={styles['WriteBarIcon__counter']} size=\"s\">\n          {count}\n        </Counter>\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,UAAU,EACVC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,kBAAkB,EAClBC,kBAAkB,QACb,kBAAkB;AACzB,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAmB7C,IAAMC,IAAI,GAAGD,QAAQ,CAAC,cAAc,CAAC;AACrC,IAAME,MAAM,GAAGC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa;;AAErD;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAMA;EAAA,IALvBC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGlB,WAAW,EAAE;EAE9B,IAAImB,IAAqB;EACzB,IAAIC,SAA6B,GAAGC,SAAS;EAE7C,QAAQR,IAAI;IACV,KAAK,QAAQ;MACXM,IAAI,GAAGD,QAAQ,KAAKf,QAAQ,CAACmB,GAAG,gBAAG,oBAAC,sBAAsB,OAAG,gBAAG,oBAAC,mBAAmB,OAAG;MACvFF,SAAS,GAAG,iBAAiB;MAC7B;IAEF,KAAK,MAAM;MACTD,IAAI,GAAGD,QAAQ,KAAKf,QAAQ,CAACmB,GAAG,gBAAG,oBAAC,kBAAkB,OAAG,gBAAG,oBAAC,UAAU,OAAG;MAC1EF,SAAS,GAAG,WAAW;MACvB;IAEF,KAAK,MAAM;MACTD,IAAI,GAAGD,QAAQ,KAAKf,QAAQ,CAACmB,GAAG,gBAAG,oBAAC,kBAAkB,OAAG,gBAAG,oBAAC,wBAAwB,OAAG;MACxFF,SAAS,GAAG,QAAQ;MACpB;IAEF;MACE;EAAM;EAGV,IAAIZ,MAAM,IAAI,CAACS,SAAS,CAAC,YAAY,CAAC,IAAI,CAACG,SAAS,EAAE;IACpDb,IAAI,CACF,wFAAwF,EACxF,OAAO,CACR;EACH;EAEA,oBACE,oBAAC,QAAQ;IACP,cAAYa;EAAU,GAClBH,SAAS;IACb,SAAS,EAAC,QAAQ;IAClB,QAAQ,EAAE,KAAM;IAChB,UAAU,4BAAiC;IAC3C,SAAS,EAAEhB,UAAU,qBAEnBiB,QAAQ,KAAKf,QAAQ,CAACmB,GAAG,2BAA+B,EACxDT,IAAI,IAAIU,MAAM,8BAAuBV,IAAI,EAAG,EAC5CG,SAAS;EACT,iBAEF;IAAM,SAAS;EAA6B,GAAEG,IAAI,IAAIL,QAAQ,CAAQ,EACrEZ,YAAY,CAACa,KAAK,CAAC,iBAClB,oBAAC,OAAO;IAAC,SAAS,6BAAkC;IAAC,IAAI,EAAC;EAAG,GAC1DA,KAAK,CAET,CACQ;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}