@vkontakte/vkui 4.21.0 → 4.22.2

package/dist/components/InitialsAvatar/InitialsAvatar.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+import './InitialsAvatar.css';
+/**
+ * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
+ * @example user.id % 6 + 1
+ */
+export declare type InitialsAvatarNumberGradients = 1 | 2 | 3 | 4 | 5 | 6;
+export declare type InitialsAvatarTextGradients = 'red' | 'pink' | 'orange' | 'yellow' | 'green' | 'l-blue' | 'blue' | 'violet';
+export interface InitialsAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+    children?: React.ReactNode;
+    /**
+     * `'red' | 'pink' | 'orange' | 'yellow' | 'green' | 'l-blue' | 'blue' | 'violet'`
+     *
+     * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:
+     *
+     * 1: 'red'
+     *
+     * 2: 'orange'
+     *
+     * 3: 'yellow'
+     *
+     * 4: 'green'
+     *
+     * 5: 'l-blue'
+     *
+     * 6: 'violet'
+     */
+    gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients;
+    size?: number;
+    shadow?: boolean;
+}
+export declare const InitialsAvatar: React.FC<InitialsAvatarProps>;

package/dist/components/InitialsAvatar/InitialsAvatar.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "shadow", "children", "gradientColor", "style"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import { classNames } from "../../lib/classNames";
+import Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from "../Avatar/Avatar";
+var COLORS_NUMBER_TO_TEXT_MAP = {
+  1: 'red',
+  2: 'orange',
+  3: 'yellow',
+  4: 'green',
+  5: 'l-blue',
+  6: 'violet'
+};
+
+function getInitialsFontSize(avatarSize) {
+  var calculatedFontSize = Math.ceil(avatarSize * 0.36);
+  var evenFix = calculatedFontSize % 2;
+  return calculatedFontSize + evenFix;
+}
+
+export var InitialsAvatar = function InitialsAvatar(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? AVATAR_DEFAULT_SIZE : _ref$size,
+      _ref$shadow = _ref.shadow,
+      shadow = _ref$shadow === void 0 ? AVATAR_DEFAULT_SHADOW : _ref$shadow,
+      children = _ref.children,
+      gradientColor = _ref.gradientColor,
+      style = _ref.style,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var gradientName = typeof gradientColor === 'string' ? gradientColor : COLORS_NUMBER_TO_TEXT_MAP[gradientColor];
+  return createScopedElement(Avatar, _extends({}, restProps, {
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      fontSize: getInitialsFontSize(size)
+    }),
+    shadow: shadow,
+    size: size,
+    vkuiClass: classNames('InitialsAvatar', "InitialsAvatar--color-".concat(gradientName))
+  }), createScopedElement("span", {
+    "aria-hidden": "true",
+    vkuiClass: "InitialsAvatar__text"
+  }, children));
+};
+//# sourceMappingURL=InitialsAvatar.js.map

package/dist/components/InitialsAvatar/InitialsAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/InitialsAvatar/InitialsAvatar.tsx"],"names":["classNames","Avatar","AVATAR_DEFAULT_SHADOW","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix","InitialsAvatar","size","shadow","children","gradientColor","style","restProps","gradientName","fontSize"],"mappings":";;;;;AAEA,SAASA,UAAT;AACA,OAAOC,MAAP,IAAiBC,qBAAjB,EAAwCC,mBAAxC;AA0CA,IAAMC,yBAA6F,GAAG;AACpG,KAAG,KADiG;AAEpG,KAAG,QAFiG;AAGpG,KAAG,QAHiG;AAIpG,KAAG,OAJiG;AAKpG,KAAG,QALiG;AAMpG,KAAG;AANiG,CAAtG;;AASA,SAASC,mBAAT,CAA6BC,UAA7B,EAAiD;AAC/C,MAAMC,kBAAkB,GAAGC,IAAI,CAACC,IAAL,CAAUH,UAAU,GAAG,IAAvB,CAA3B;AACA,MAAMI,OAAO,GAAGH,kBAAkB,GAAG,CAArC;AACA,SAAOA,kBAAkB,GAAGG,OAA5B;AACD;;AAED,OAAO,IAAMC,cAA6C,GAAG,SAAhDA,cAAgD,OAOlC;AAAA,uBANzBC,IAMyB;AAAA,MANzBA,IAMyB,0BANlBT,mBAMkB;AAAA,yBALzBU,MAKyB;AAAA,MALzBA,MAKyB,4BALhBX,qBAKgB;AAAA,MAJzBY,QAIyB,QAJzBA,QAIyB;AAAA,MAHzBC,aAGyB,QAHzBA,aAGyB;AAAA,MAFzBC,KAEyB,QAFzBA,KAEyB;AAAA,MADtBC,SACsB;;AACzB,MAAMC,YAAY,GAAG,OAAOH,aAAP,KAAyB,QAAzB,GAAoCA,aAApC,GAAoDX,yBAAyB,CAACW,aAAD,CAAlG;AAEA,SACE,oBAAC,MAAD,eACME,SADN;AAEE,IAAA,KAAK,kCACAD,KADA;AAEHG,MAAAA,QAAQ,EAAEd,mBAAmB,CAACO,IAAD;AAF1B,MAFP;AAME,IAAA,MAAM,EAAEC,MANV;AAOE,IAAA,IAAI,EAAED,IAPR;AAQE,IAAA,SAAS,EAAEZ,UAAU,CACnB,gBADmB,kCAEMkB,YAFN;AARvB,MAaE;AAAM,mBAAY,MAAlB;AAAyB,IAAA,SAAS,EAAC;AAAnC,KACGJ,QADH,CAbF,CADF;AAmBD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { classNames } from '../../lib/classNames';\nimport Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from '../Avatar/Avatar';\nimport './InitialsAvatar.css';\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = 1 | 2 | 3 | 4 | 5 | 6;\nexport type InitialsAvatarTextGradients =\n  | 'red'\n  | 'pink'\n  | 'orange'\n  | 'yellow'\n  | 'green'\n  | 'l-blue'\n  | 'blue'\n  | 'violet';\n\nexport interface InitialsAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {\n  children?: React.ReactNode;\n  /**\n   * `'red' | 'pink' | 'orange' | 'yellow' | 'green' | 'l-blue' | 'blue' | 'violet'`\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   *\n   * 2: 'orange'\n   *\n   * 3: 'yellow'\n   *\n   * 4: 'green'\n   *\n   * 5: 'l-blue'\n   *\n   * 6: 'violet'\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients;\n  size?: number;\n  shadow?: boolean;\n}\n\nconst COLORS_NUMBER_TO_TEXT_MAP: Record<InitialsAvatarNumberGradients, InitialsAvatarTextGradients> = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n};\n\nfunction getInitialsFontSize(avatarSize: number) {\n  const calculatedFontSize = Math.ceil(avatarSize * 0.36);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n\nexport const InitialsAvatar: React.FC<InitialsAvatarProps> = ({\n  size = AVATAR_DEFAULT_SIZE,\n  shadow = AVATAR_DEFAULT_SHADOW,\n  children,\n  gradientColor,\n  style,\n  ...restProps\n}: InitialsAvatarProps) => {\n  const gradientName = typeof gradientColor === 'string' ? gradientColor : COLORS_NUMBER_TO_TEXT_MAP[gradientColor];\n\n  return (\n    <Avatar\n      {...restProps}\n      style={{\n        ...style,\n        fontSize: getInitialsFontSize(size),\n      }}\n      shadow={shadow}\n      size={size}\n      vkuiClass={classNames(\n        'InitialsAvatar',\n        `InitialsAvatar--color-${gradientName}`,\n      )}\n    >\n      <span aria-hidden=\"true\" vkuiClass=\"InitialsAvatar__text\">\n        {children}\n      </span>\n    </Avatar>\n  );\n};\n"],"file":"InitialsAvatar.js"}

package/dist/components/NativeSelect/NativeSelect.js

@@ -6,7 +6,7 @@ var _excluded = ["style", "defaultValue", "align", "placeholder", "children", "c
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from 'react';
 import { classNames } from "../../lib/classNames";
-import { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
 import { getClassName } from "../../helpers/getClassName";
@@ -72,7 +72,7 @@ var NativeSelect = function NativeSelect(_ref) {
     style: style,
     getRootRef: getRootRef,
     disabled: disabled,
-    after: sizeY === SizeType.COMPACT ? createScopedElement(Icon20Dropdown, null) : createScopedElement(Icon24Dropdown, null)
+    after: createScopedElement(DropdownIcon, null)
   }, createScopedElement("select", _extends({}, restProps, {
     disabled: disabled,
     vkuiClass: "Select__el",

package/dist/components/NativeSelect/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["React","classNames","Icon20Dropdown","Icon24Dropdown","FormField","withAdaptivity","SizeType","getClassName","Headline","Text","VKCOM","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","restProps","platform","useState","title","setTitle","notSelected","setNotSelected","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","TypographyComponent","COMPACT"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport '../Select/Select.css';\n\nexport interface NativeSelectProps extends\n  React.SelectHTMLAttributes<HTMLSelectElement>,\n  HasRef<HTMLSelectElement>,\n  HasRootRef<HTMLLabelElement>,\n  HasAlign,\n  AdaptivityProps {\n  placeholder?: string;\n  multiline?: boolean;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\nconst NativeSelect: React.FC<NativeSelectProps> = ({\n  style, defaultValue = '', align, placeholder, children,\n  className, getRef, getRootRef, disabled, sizeX, sizeY, multiline,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState('');\n  const [notSelected, setNotSelected] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setNotSelected(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      Component=\"label\"\n      vkuiClass={classNames(getClassName('Select', platform), {\n        ['Select--not-selected']: notSelected,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n        'Select--multiline': multiline,\n      })}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        vkuiClass=\"Select__el\"\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{title}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nexport default withAdaptivity(NativeSelect, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"NativeSelect.js"}
+{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["React","classNames","DropdownIcon","FormField","withAdaptivity","SizeType","getClassName","Headline","Text","VKCOM","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","restProps","platform","useState","title","setTitle","notSelected","setNotSelected","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","TypographyComponent","COMPACT"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport '../Select/Select.css';\n\nexport interface NativeSelectProps extends\n  React.SelectHTMLAttributes<HTMLSelectElement>,\n  HasRef<HTMLSelectElement>,\n  HasRootRef<HTMLLabelElement>,\n  HasAlign,\n  AdaptivityProps {\n  placeholder?: string;\n  multiline?: boolean;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\nconst NativeSelect: React.FC<NativeSelectProps> = ({\n  style, defaultValue = '', align, placeholder, children,\n  className, getRef, getRootRef, disabled, sizeX, sizeY, multiline,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState('');\n  const [notSelected, setNotSelected] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setNotSelected(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      Component=\"label\"\n      vkuiClass={classNames(getClassName('Select', platform), {\n        ['Select--not-selected']: notSelected,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n        'Select--multiline': multiline,\n      })}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        vkuiClass=\"Select__el\"\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{title}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nexport default withAdaptivity(NativeSelect, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"NativeSelect.js"}

package/dist/components/Progress/Progress.js

@@ -4,6 +4,8 @@ var _excluded = ["value", "getRootRef"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
+var PROGRESS_MIN_VALUE = 0;
+var PROGRESS_MAX_VALUE = 100;
 
 var Progress = function Progress(_ref) {
   var value = _ref.value,
@@ -11,12 +13,13 @@ var Progress = function Progress(_ref) {
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
+  var progress = Math.max(PROGRESS_MIN_VALUE, Math.min(value, PROGRESS_MAX_VALUE));
   return createScopedElement("div", _extends({
     "aria-valuenow": value
   }, restProps, {
     role: "progressbar",
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
+    "aria-valuemin": PROGRESS_MIN_VALUE,
+    "aria-valuemax": PROGRESS_MAX_VALUE,
     ref: getRootRef,
     vkuiClass: getClassName('Progress', platform)
   }), createScopedElement("div", {
@@ -25,7 +28,7 @@ var Progress = function Progress(_ref) {
   }), createScopedElement("div", {
     vkuiClass: "Progress__in",
     style: {
-      width: "".concat(value, "%")
+      width: "".concat(progress, "%")
     },
     "aria-hidden": "true"
   }));

package/dist/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"names":["getClassName","usePlatform","Progress","value","getRootRef","restProps","platform","width","defaultProps"],"mappings":";;;;AACA,SAASA,YAAT;AAEA,SAASC,WAAT;;AAOA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAAwD;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA9CC,UAA8C,QAA9CA,UAA8C;AAAA,MAA/BC,SAA+B;;AAChG,MAAMC,QAAQ,GAAGL,WAAW,EAA5B;AAEA,SACE;AACE,qBAAeE;AADjB,KAEME,SAFN;AAGE,IAAA,IAAI,EAAC,aAHP;AAIE,qBAAe,CAJjB;AAKE,qBAAe,GALjB;AAME,IAAA,GAAG,EAAED,UANP;AAOE,IAAA,SAAS,EAAEJ,YAAY,CAAC,UAAD,EAAaM,QAAb;AAPzB,MASE;AAAK,IAAA,SAAS,EAAC,cAAf;AAA8B,mBAAY;AAA1C,IATF,EAUE;AAAK,IAAA,SAAS,EAAC,cAAf;AAA8B,IAAA,KAAK,EAAE;AAAEC,MAAAA,KAAK,YAAKJ,KAAL;AAAP,KAArC;AAA6D,mBAAY;AAAzE,IAVF,CADF;AAcD,CAjBD;;AAmBAD,QAAQ,CAACM,YAAT,GAAwB;AACtBL,EAAAA,KAAK,EAAE;AADe,CAAxB;AAIA,eAAeD,QAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Progress.css';\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {\n  value?: number;\n}\n\nconst Progress: React.FC<ProgressProps> = ({ value, getRootRef, ...restProps }: ProgressProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      aria-valuenow={value}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      ref={getRootRef}\n      vkuiClass={getClassName('Progress', platform)}\n    >\n      <div vkuiClass=\"Progress__bg\" aria-hidden=\"true\" />\n      <div vkuiClass=\"Progress__in\" style={{ width: `${value}%` }} aria-hidden=\"true\" />\n    </div>\n  );\n};\n\nProgress.defaultProps = {\n  value: 0,\n};\n\nexport default Progress;\n"],"file":"Progress.js"}
+{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"names":["getClassName","usePlatform","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","restProps","platform","progress","Math","max","min","width","defaultProps"],"mappings":";;;;AACA,SAASA,YAAT;AAEA,SAASC,WAAT;AAOA,IAAMC,kBAAkB,GAAG,CAA3B;AACA,IAAMC,kBAAkB,GAAG,GAA3B;;AAEA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAAwD;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA9CC,UAA8C,QAA9CA,UAA8C;AAAA,MAA/BC,SAA+B;;AAChG,MAAMC,QAAQ,GAAGP,WAAW,EAA5B;AAEA,MAAMQ,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAAST,kBAAT,EAA6BQ,IAAI,CAACE,GAAL,CAASP,KAAT,EAAgBF,kBAAhB,CAA7B,CAAjB;AAEA,SACE;AACE,qBAAeE;AADjB,KAEME,SAFN;AAGE,IAAA,IAAI,EAAC,aAHP;AAIE,qBAAeL,kBAJjB;AAKE,qBAAeC,kBALjB;AAME,IAAA,GAAG,EAAEG,UANP;AAOE,IAAA,SAAS,EAAEN,YAAY,CAAC,UAAD,EAAaQ,QAAb;AAPzB,MASE;AAAK,IAAA,SAAS,EAAC,cAAf;AAA8B,mBAAY;AAA1C,IATF,EAUE;AAAK,IAAA,SAAS,EAAC,cAAf;AAA8B,IAAA,KAAK,EAAE;AAAEK,MAAAA,KAAK,YAAKJ,QAAL;AAAP,KAArC;AAAgE,mBAAY;AAA5E,IAVF,CADF;AAcD,CAnBD;;AAqBAL,QAAQ,CAACU,YAAT,GAAwB;AACtBT,EAAAA,KAAK,EAAE;AADe,CAAxB;AAIA,eAAeD,QAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Progress.css';\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\nconst Progress: React.FC<ProgressProps> = ({ value, getRootRef, ...restProps }: ProgressProps) => {\n  const platform = usePlatform();\n\n  const progress = Math.max(PROGRESS_MIN_VALUE, Math.min(value, PROGRESS_MAX_VALUE));\n\n  return (\n    <div\n      aria-valuenow={value}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      vkuiClass={getClassName('Progress', platform)}\n    >\n      <div vkuiClass=\"Progress__bg\" aria-hidden=\"true\" />\n      <div vkuiClass=\"Progress__in\" style={{ width: `${progress}%` }} aria-hidden=\"true\" />\n    </div>\n  );\n};\n\nProgress.defaultProps = {\n  value: 0,\n};\n\nexport default Progress;\n"],"file":"Progress.js"}

package/dist/components/Removable/Removable.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HasRootRef } from '../../types';
 import './Removable.css';
 export interface RemovableProps {
     /**
@@ -10,7 +11,7 @@ export interface RemovableProps {
      */
     onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
 }
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps {
+interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
     /**
      * Расположение кнопки удаления.
      */

package/dist/components/Removable/Removable.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["children", "onRemove", "removePlaceholder", "align"];
+var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from 'react';
 import { classNames } from "../../lib/classNames";
-import { getTitleFromChildren } from "../../lib/utils";
+import { getTitleFromChildren, noop } from "../../lib/utils";
+import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
@@ -23,7 +24,7 @@ var RemovableIos = function RemovableIos(_ref) {
       children = _ref.children;
 
   var _useDOM = useDOM(),
-      document = _useDOM.document;
+      window = _useDOM.window;
 
   var removeButtonRef = React.useRef(null);
 
@@ -32,8 +33,10 @@ var RemovableIos = function RemovableIos(_ref) {
       removeOffset = _React$useState2[0],
       updateRemoveOffset = _React$useState2[1];
 
-  useGlobalEventListener(document, 'click', removeOffset > 0 && function () {
-    updateRemoveOffset(0);
+  useGlobalEventListener(window, 'click', function () {
+    if (removeOffset > 0) {
+      updateRemoveOffset(0);
+    }
   });
 
   var onRemoveTransitionEnd = function onRemoveTransitionEnd() {
@@ -44,7 +47,9 @@ var RemovableIos = function RemovableIos(_ref) {
     }
   };
 
-  var onRemoveActivateClick = function onRemoveActivateClick() {
+  var onRemoveActivateClick = function onRemoveActivateClick(e) {
+    e.stopPropagation();
+
     var _removeButtonRef$curr2 = removeButtonRef === null || removeButtonRef === void 0 ? void 0 : removeButtonRef.current,
         _removeButtonRef$curr3 = _removeButtonRef$curr2.offsetWidth,
         offsetWidth = _removeButtonRef$curr3 === void 0 ? 0 : _removeButtonRef$curr3;
@@ -78,16 +83,17 @@ var RemovableIos = function RemovableIos(_ref) {
     disabled: removeOffset === 0,
     getRootRef: removeButtonRef,
     vkuiClass: "Removable__remove",
-    onClick: onRemoveClick,
-    onTransitionEnd: onRemoveTransitionEnd
+    onClick: onRemoveClick
   }, createScopedElement("span", {
     vkuiClass: "Removable__remove-in"
   }, removePlaceholder)));
 };
 
 export var Removable = function Removable(_ref2) {
-  var children = _ref2.children,
-      onRemove = _ref2.onRemove,
+  var getRootRef = _ref2.getRootRef,
+      children = _ref2.children,
+      _ref2$onRemove = _ref2.onRemove,
+      onRemove = _ref2$onRemove === void 0 ? noop : _ref2$onRemove,
       _ref2$removePlacehold = _ref2.removePlaceholder,
       removePlaceholder = _ref2$removePlacehold === void 0 ? 'Удалить' : _ref2$removePlacehold,
       _ref2$align = _ref2.align,
@@ -99,13 +105,16 @@ export var Removable = function Removable(_ref2) {
   var _useAdaptivity = useAdaptivity(),
       sizeY = _useAdaptivity.sizeY;
 
+  var ref = useExternRef(getRootRef);
+
   var onRemoveClick = function onRemoveClick(e) {
     e.preventDefault();
-    onRemove && onRemove(e);
+    onRemove(e);
   };
 
   var removePlaceholderString = getTitleFromChildren(removePlaceholder);
   return createScopedElement("div", _extends({}, restProps, {
+    ref: ref,
     vkuiClass: classNames(getClassName('Removable', platform), "Removable--".concat(align), "Removable--sizeY-".concat(sizeY))
   }), (platform === ANDROID || platform === VKCOM) && createScopedElement("div", {
     vkuiClass: "Removable__content"

package/dist/components/Removable/Removable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Removable/Removable.tsx"],"names":["React","classNames","getTitleFromChildren","usePlatform","getClassName","useAdaptivity","useDOM","ANDROID","IOS","VKCOM","Icon24Cancel","IconButton","useGlobalEventListener","Tappable","RemovableIos","onRemoveClick","removePlaceholder","removePlaceholderString","children","document","removeButtonRef","useRef","useState","removeOffset","updateRemoveOffset","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","offsetWidth","transform","Removable","onRemove","align","restProps","platform","sizeY","e","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport IconButton from '../IconButton/IconButton';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport Tappable from '../Tappable/Tappable';\nimport './Removable.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n}\n\ninterface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {\n  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n  removePlaceholderString?: string;\n}\n\nconst RemovableIos: React.FC<RemovableIosOwnProps> = ({\n  onRemoveClick,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}) => {\n  const { document } = useDOM();\n\n  const removeButtonRef = React.useRef(null);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(document, 'click', removeOffset > 0 && (() => {\n    updateRemoveOffset(0);\n  }));\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    }\n  };\n\n  const onRemoveActivateClick = () => {\n    const { offsetWidth = 0 } = removeButtonRef?.current;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      vkuiClass=\"Removable__content\"\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        vkuiClass=\"Removable__action Removable__toggle\"\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i vkuiClass=\"Removable__toggle-in\" role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span vkuiClass=\"Removable__offset\" aria-hidden=\"true\"></span>\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={removeOffset === 0}\n        getRootRef={removeButtonRef}\n        vkuiClass=\"Removable__remove\"\n        onClick={onRemoveClick}\n        onTransitionEnd={onRemoveTransitionEnd}\n      >\n        <span vkuiClass=\"Removable__remove-in\">{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\nexport const Removable: React.FC<RemovableOwnProps> = ({\n  children,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n\n    onRemove && onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName('Removable', platform),\n        `Removable--${align}`,\n        `Removable--sizeY-${sizeY}`,\n      )}\n    >\n      {(platform === ANDROID || platform === VKCOM) && (\n        <div vkuiClass=\"Removable__content\">\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            vkuiClass=\"Removable__action\"\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n        </div>\n      )}\n\n      {platform === IOS && (\n        <RemovableIos\n          onRemoveClick={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"file":"Removable.js"}
+{"version":3,"sources":["../../../src/components/Removable/Removable.tsx"],"names":["React","classNames","getTitleFromChildren","noop","useExternRef","usePlatform","getClassName","useAdaptivity","useDOM","ANDROID","IOS","VKCOM","Icon24Cancel","IconButton","useGlobalEventListener","Tappable","RemovableIos","onRemoveClick","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","useState","removeOffset","updateRemoveOffset","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","Removable","getRootRef","onRemove","align","restProps","platform","sizeY","ref","preventDefault"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,UAAT;AACA,SAASC,oBAAT,EAA+BC,IAA/B;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,aAAT;AACA,SAASC,MAAT;AACA,SAASC,OAAT,EAAkBC,GAAlB,EAAuBC,KAAvB;AACA,SAASC,YAAT,QAA6B,kBAA7B;AACA,OAAOC,UAAP;AACA,SAASC,sBAAT;AACA,OAAOC,QAAP;;AAmBA,IAAMC,YAA4C,GAAG,SAA/CA,YAA+C,OAK/C;AAAA,MAJJC,aAII,QAJJA,aAII;AAAA,MAHJC,iBAGI,QAHJA,iBAGI;AAAA,MAFJC,uBAEI,QAFJA,uBAEI;AAAA,MADJC,QACI,QADJA,QACI;;AACJ,gBAAmBZ,MAAM,EAAzB;AAAA,MAAQa,MAAR,WAAQA,MAAR;;AAEA,MAAMC,eAAe,GAAGtB,KAAK,CAACuB,MAAN,CAAa,IAAb,CAAxB;;AACA,wBAA2CvB,KAAK,CAACwB,QAAN,CAAe,CAAf,CAA3C;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,kBAArB;;AAEAZ,EAAAA,sBAAsB,CAACO,MAAD,EAAS,OAAT,EAAkB,YAAM;AAC5C,QAAII,YAAY,GAAG,CAAnB,EAAsB;AACpBC,MAAAA,kBAAkB,CAAC,CAAD,CAAlB;AACD;AACF,GAJqB,CAAtB;;AAMA,MAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAClC,QAAIF,YAAY,GAAG,CAAnB,EAAsB;AAAA;;AACpBH,MAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,qCAAAA,eAAe,CAAEM,OAAjB,gFAA0BC,KAA1B;AACD;AACF,GAJD;;AAMA,MAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,CAAD,EAAyB;AACrDA,IAAAA,CAAC,CAACC,eAAF;;AAEA,iCAA4BV,eAA5B,aAA4BA,eAA5B,uBAA4BA,eAAe,CAAEM,OAA7C;AAAA,wDAAQK,WAAR;AAAA,QAAQA,WAAR,uCAAsB,CAAtB;;AACAP,IAAAA,kBAAkB,CAACO,WAAD,CAAlB;AACD,GALD;;AAOA,SACE;AACE,IAAA,SAAS,EAAC,oBADZ;AAEE,IAAA,KAAK,EAAE;AAAEC,MAAAA,SAAS,wBAAiBT,YAAjB,aAAiBA,YAAjB,cAAiBA,YAAjB,GAAiC,CAAjC;AAAX,KAFT;AAGE,IAAA,eAAe,EAAEE;AAHnB,KAKE,oBAAC,UAAD;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,QAAQ,EAAE,KAFZ;AAGE,kBAAYR,uBAHd;AAIE,IAAA,SAAS,EAAC,qCAJZ;AAKE,IAAA,OAAO,EAAEW,qBALX;AAME,IAAA,QAAQ,EAAEL,YAAY,GAAG;AAN3B,KAQE;AAAG,IAAA,SAAS,EAAC,sBAAb;AAAoC,IAAA,IAAI,EAAC;AAAzC,IARF,CALF,EAeGL,QAfH,EAiBE;AAAM,IAAA,SAAS,EAAC,mBAAhB;AAAoC,mBAAY;AAAhD,IAjBF,EAmBE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,QADZ;AAEE,IAAA,SAAS,EAAE,KAFb;AAGE,IAAA,QAAQ,EAAE,KAHZ;AAIE,IAAA,QAAQ,EAAEK,YAAY,KAAK,CAJ7B;AAKE,IAAA,UAAU,EAAEH,eALd;AAME,IAAA,SAAS,EAAC,mBANZ;AAOE,IAAA,OAAO,EAAEL;AAPX,KASE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAwCC,iBAAxC,CATF,CAnBF,CADF;AAiCD,CA/DD;;AAwEA,OAAO,IAAMiB,SAAsC,GAAG,SAAzCA,SAAyC,QAO7B;AAAA,MANvBC,UAMuB,SANvBA,UAMuB;AAAA,MALvBhB,QAKuB,SALvBA,QAKuB;AAAA,6BAJvBiB,QAIuB;AAAA,MAJvBA,QAIuB,+BAJZlC,IAIY;AAAA,oCAHvBe,iBAGuB;AAAA,MAHvBA,iBAGuB,sCAHH,SAGG;AAAA,0BAFvBoB,KAEuB;AAAA,MAFvBA,KAEuB,4BAFf,QAEe;AAAA,MADpBC,SACoB;;AACvB,MAAMC,QAAQ,GAAGnC,WAAW,EAA5B;;AACA,uBAAkBE,aAAa,EAA/B;AAAA,MAAQkC,KAAR,kBAAQA,KAAR;;AAEA,MAAMC,GAAG,GAAGtC,YAAY,CAACgC,UAAD,CAAxB;;AAEA,MAAMnB,aAAa,GAAG,SAAhBA,aAAgB,CAACc,CAAD,EAAyB;AAC7CA,IAAAA,CAAC,CAACY,cAAF;AACAN,IAAAA,QAAQ,CAACN,CAAD,CAAR;AACD,GAHD;;AAKA,MAAMZ,uBAA+B,GAAGjB,oBAAoB,CAACgB,iBAAD,CAA5D;AAEA,SACE,wCACMqB,SADN;AAEE,IAAA,GAAG,EAAEG,GAFP;AAGE,IAAA,SAAS,EAAEzC,UAAU,CACnBK,YAAY,CAAC,WAAD,EAAckC,QAAd,CADO,uBAELF,KAFK,8BAGCG,KAHD;AAHvB,MASG,CAACD,QAAQ,KAAK/B,OAAb,IAAwB+B,QAAQ,KAAK7B,KAAtC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGS,QADH,EAGE,oBAAC,UAAD;AACE,IAAA,UAAU,EAAC,SADb;AAEE,IAAA,SAAS,EAAC,SAFZ;AAGE,IAAA,SAAS,EAAC,mBAHZ;AAIE,IAAA,OAAO,EAAEH,aAJX;AAKE,kBAAYE;AALd,KAOE,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IAPF,CAHF,CAVJ,EAyBGqB,QAAQ,KAAK9B,GAAb,IACC,oBAAC,YAAD;AACE,IAAA,aAAa,EAAEO,aADjB;AAEE,IAAA,iBAAiB,EAAEC,iBAFrB;AAGE,IAAA,uBAAuB,EAAEC;AAH3B,KAKGC,QALH,CA1BJ,CADF;AAqCD,CAzDM","sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { classNames } from '../../lib/classNames';\nimport { getTitleFromChildren, noop } from '../../lib/utils';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport IconButton from '../IconButton/IconButton';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport Tappable from '../Tappable/Tappable';\nimport './Removable.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n}\n\ninterface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {\n  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n  removePlaceholderString?: string;\n}\n\nconst RemovableIos: React.FC<RemovableIosOwnProps> = ({\n  onRemoveClick,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef(null);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(window, 'click', () => {\n    if (removeOffset > 0) {\n      updateRemoveOffset(0);\n    }\n  });\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n\n    const { offsetWidth = 0 } = removeButtonRef?.current;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      vkuiClass=\"Removable__content\"\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        vkuiClass=\"Removable__action Removable__toggle\"\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i vkuiClass=\"Removable__toggle-in\" role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span vkuiClass=\"Removable__offset\" aria-hidden=\"true\"></span>\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={removeOffset === 0}\n        getRootRef={removeButtonRef}\n        vkuiClass=\"Removable__remove\"\n        onClick={onRemoveClick}\n      >\n        <span vkuiClass=\"Removable__remove-in\">{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\nexport const Removable: React.FC<RemovableOwnProps> = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      vkuiClass={classNames(\n        getClassName('Removable', platform),\n        `Removable--${align}`,\n        `Removable--sizeY-${sizeY}`,\n      )}\n    >\n      {(platform === ANDROID || platform === VKCOM) && (\n        <div vkuiClass=\"Removable__content\">\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            vkuiClass=\"Removable__action\"\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n        </div>\n      )}\n\n      {platform === IOS && (\n        <RemovableIos\n          onRemoveClick={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"file":"Removable.js"}

package/dist/components/SelectMimicry/SelectMimicry.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["tabIndex", "placeholder", "children", "align", "getRootRef", "multiline", "disabled", "onClick", "sizeX", "sizeY"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { classNames } from "../../lib/classNames";
-import { Icon24Dropdown, Icon20Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -39,7 +39,7 @@ var SelectMimicry = function SelectMimicry(_ref) {
     getRootRef: getRootRef,
     onClick: disabled ? null : onClick,
     disabled: disabled,
-    after: sizeY === SizeType.COMPACT ? createScopedElement(Icon20Dropdown, null) : createScopedElement(Icon24Dropdown, null)
+    after: createScopedElement(DropdownIcon, null)
   }), createScopedElement(TypographyComponent, {
     Component: "div",
     weight: "regular",

package/dist/components/SelectMimicry/SelectMimicry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SelectMimicry/SelectMimicry.tsx"],"names":["classNames","Icon24Dropdown","Icon20Dropdown","FormField","withAdaptivity","SizeType","usePlatform","getClassName","Headline","Text","VKCOM","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","sizeX","sizeY","restProps","platform","TypographyComponent","COMPACT","defaultProps"],"mappings":";;;;;AACA,SAASA,UAAT;AACA,SAASC,cAAT,EAAyBC,cAAzB,QAA+C,kBAA/C;AACA,SAASC,SAAT;AAEA,SAASC,cAAT,EAA0CC,QAA1C;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,OAAOC,IAAP;AACA,SAASC,KAAT;;AAYA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAYzC;AAAA;;AAAA,MAXxBC,QAWwB,QAXxBA,QAWwB;AAAA,MAVxBC,WAUwB,QAVxBA,WAUwB;AAAA,MATxBC,QASwB,QATxBA,QASwB;AAAA,MARxBC,KAQwB,QARxBA,KAQwB;AAAA,MAPxBC,UAOwB,QAPxBA,UAOwB;AAAA,MANxBC,SAMwB,QANxBA,SAMwB;AAAA,MALxBC,QAKwB,QALxBA,QAKwB;AAAA,MAJxBC,OAIwB,QAJxBA,OAIwB;AAAA,MAHxBC,KAGwB,QAHxBA,KAGwB;AAAA,MAFxBC,KAEwB,QAFxBA,KAEwB;AAAA,MADrBC,SACqB;;AACxB,MAAMC,QAAQ,GAAGjB,WAAW,EAA5B;AAEA,MAAMkB,mBAAmB,GAAGD,QAAQ,KAAKb,KAAb,IAAsBW,KAAK,KAAKhB,QAAQ,CAACoB,OAAzC,GAAmDhB,IAAnD,GAA0DD,QAAtF;AAEA,SACE,oBAAC,SAAD,eACMc,SADN;AAEE,IAAA,QAAQ,EAAEJ,QAAQ,GAAG,IAAH,GAAUN,QAF9B;AAGE,IAAA,SAAS,EAAEZ,UAAU,CAACO,YAAY,CAAC,QAAD,EAAWgB,QAAX,CAAb,EAAmC,iBAAnC;AACnB,8BAAwB,CAACT,QADN;AAEnB,2BAAqBG;AAFF,4DAGDF,KAHC,GAGS,CAAC,CAACA,KAHX,yDAIAK,KAJA,GAIU,CAAC,CAACA,KAJZ,yDAKAC,KALA,GAKU,CAAC,CAACA,KALZ,gBAHvB;AAUE,IAAA,UAAU,EAAEL,UAVd;AAWE,IAAA,OAAO,EAAEE,QAAQ,GAAG,IAAH,GAAUC,OAX7B;AAYE,IAAA,QAAQ,EAAED,QAZZ;AAaE,IAAA,KAAK,EAAEG,KAAK,KAAKhB,QAAQ,CAACoB,OAAnB,GAA6B,oBAAC,cAAD,OAA7B,GAAkD,oBAAC,cAAD;AAb3D,MAeE,oBAAC,mBAAD;AAAqB,IAAA,SAAS,EAAC,KAA/B;AAAqC,IAAA,MAAM,EAAC,SAA5C;AAAsD,IAAA,SAAS,EAAC;AAAhE,KACE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAiCX,QAAQ,IAAID,WAA7C,CADF,CAfF,CADF;AAqBD,CAtCD;;AAwCAF,aAAa,CAACe,YAAd,GAA6B;AAC3Bd,EAAAA,QAAQ,EAAE;AADiB,CAA7B;AAIA,eAAeR,cAAc,CAACO,aAAD,EAAgB;AAC3CS,EAAAA,KAAK,EAAE,IADoC;AAE3CC,EAAAA,KAAK,EAAE;AAFoC,CAAhB,CAA7B","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { Icon24Dropdown, Icon20Dropdown } from '@vkontakte/icons';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport '../Select/Select.css';\n\nexport interface SelectMimicryProps extends\n  React.HTMLAttributes<HTMLElement>,\n  HasAlign,\n  HasRootRef<HTMLElement>,\n  AdaptivityProps {\n  multiline?: boolean;\n  disabled?: boolean;\n}\n\nconst SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({\n  tabIndex,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  sizeX,\n  sizeY,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? null : tabIndex}\n      vkuiClass={classNames(getClassName('Select', platform), 'Select--mimicry', {\n        'Select--not-selected': !children,\n        'Select--multiline': multiline,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n      })}\n      getRootRef={getRootRef}\n      onClick={disabled ? null : onClick}\n      disabled={disabled}\n      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}\n    >\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{children || placeholder}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nSelectMimicry.defaultProps = {\n  tabIndex: 0,\n};\n\nexport default withAdaptivity(SelectMimicry, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"SelectMimicry.js"}
+{"version":3,"sources":["../../../src/components/SelectMimicry/SelectMimicry.tsx"],"names":["classNames","DropdownIcon","FormField","withAdaptivity","SizeType","usePlatform","getClassName","Headline","Text","VKCOM","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","sizeX","sizeY","restProps","platform","TypographyComponent","COMPACT","defaultProps"],"mappings":";;;;;AACA,SAASA,UAAT;AACA,SAASC,YAAT;AACA,SAASC,SAAT;AAEA,SAASC,cAAT,EAA0CC,QAA1C;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,OAAOC,IAAP;AACA,SAASC,KAAT;;AAYA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAYzC;AAAA;;AAAA,MAXxBC,QAWwB,QAXxBA,QAWwB;AAAA,MAVxBC,WAUwB,QAVxBA,WAUwB;AAAA,MATxBC,QASwB,QATxBA,QASwB;AAAA,MARxBC,KAQwB,QARxBA,KAQwB;AAAA,MAPxBC,UAOwB,QAPxBA,UAOwB;AAAA,MANxBC,SAMwB,QANxBA,SAMwB;AAAA,MALxBC,QAKwB,QALxBA,QAKwB;AAAA,MAJxBC,OAIwB,QAJxBA,OAIwB;AAAA,MAHxBC,KAGwB,QAHxBA,KAGwB;AAAA,MAFxBC,KAEwB,QAFxBA,KAEwB;AAAA,MADrBC,SACqB;;AACxB,MAAMC,QAAQ,GAAGjB,WAAW,EAA5B;AAEA,MAAMkB,mBAAmB,GAAGD,QAAQ,KAAKb,KAAb,IAAsBW,KAAK,KAAKhB,QAAQ,CAACoB,OAAzC,GAAmDhB,IAAnD,GAA0DD,QAAtF;AAEA,SACE,oBAAC,SAAD,eACMc,SADN;AAEE,IAAA,QAAQ,EAAEJ,QAAQ,GAAG,IAAH,GAAUN,QAF9B;AAGE,IAAA,SAAS,EAAEX,UAAU,CAACM,YAAY,CAAC,QAAD,EAAWgB,QAAX,CAAb,EAAmC,iBAAnC;AACnB,8BAAwB,CAACT,QADN;AAEnB,2BAAqBG;AAFF,4DAGDF,KAHC,GAGS,CAAC,CAACA,KAHX,yDAIAK,KAJA,GAIU,CAAC,CAACA,KAJZ,yDAKAC,KALA,GAKU,CAAC,CAACA,KALZ,gBAHvB;AAUE,IAAA,UAAU,EAAEL,UAVd;AAWE,IAAA,OAAO,EAAEE,QAAQ,GAAG,IAAH,GAAUC,OAX7B;AAYE,IAAA,QAAQ,EAAED,QAZZ;AAaE,IAAA,KAAK,EAAE,oBAAC,YAAD;AAbT,MAeE,oBAAC,mBAAD;AAAqB,IAAA,SAAS,EAAC,KAA/B;AAAqC,IAAA,MAAM,EAAC,SAA5C;AAAsD,IAAA,SAAS,EAAC;AAAhE,KACE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAiCJ,QAAQ,IAAID,WAA7C,CADF,CAfF,CADF;AAqBD,CAtCD;;AAwCAF,aAAa,CAACe,YAAd,GAA6B;AAC3Bd,EAAAA,QAAQ,EAAE;AADiB,CAA7B;AAIA,eAAeR,cAAc,CAACO,aAAD,EAAgB;AAC3CS,EAAAA,KAAK,EAAE,IADoC;AAE3CC,EAAAA,KAAK,EAAE;AAFoC,CAAhB,CAA7B","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport '../Select/Select.css';\n\nexport interface SelectMimicryProps extends\n  React.HTMLAttributes<HTMLElement>,\n  HasAlign,\n  HasRootRef<HTMLElement>,\n  AdaptivityProps {\n  multiline?: boolean;\n  disabled?: boolean;\n}\n\nconst SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({\n  tabIndex,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  sizeX,\n  sizeY,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? null : tabIndex}\n      vkuiClass={classNames(getClassName('Select', platform), 'Select--mimicry', {\n        'Select--not-selected': !children,\n        'Select--multiline': multiline,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n      })}\n      getRootRef={getRootRef}\n      onClick={disabled ? null : onClick}\n      disabled={disabled}\n      after={<DropdownIcon />}\n    >\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{children || placeholder}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nSelectMimicry.defaultProps = {\n  tabIndex: 0,\n};\n\nexport default withAdaptivity(SelectMimicry, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"SelectMimicry.js"}

package/dist/components/Tabbar/Tabbar.js

@@ -30,7 +30,9 @@ var Tabbar = function Tabbar(props) {
     vkuiClass: classNames(getClassName('Tabbar', platform), "Tabbar--l-".concat(getItemsLayout()), {
       'Tabbar--shadow': shadow
     })
-  }, restProps), children);
+  }, restProps), createScopedElement("div", {
+    vkuiClass: "Tabbar__in"
+  }, children));
 };
 
 Tabbar.defaultProps = {

package/dist/components/Tabbar/Tabbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"names":["React","getClassName","classNames","usePlatform","Tabbar","props","children","shadow","itemsLayout","restProps","platform","getItemsLayout","Children","count","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;;AAWA,IAAMC,MAA4C,GAAG,SAA/CA,MAA+C,CAACC,KAAD,EAAwB;AAC3E,MAAQC,QAAR,GAAwDD,KAAxD,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAwDF,KAAxD,CAAkBE,MAAlB;AAAA,MAA0BC,WAA1B,GAAwDH,KAAxD,CAA0BG,WAA1B;AAAA,MAA0CC,SAA1C,4BAAwDJ,KAAxD;;AACA,MAAMK,QAAQ,GAAGP,WAAW,EAA5B;;AAEA,MAAMQ,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQH,WAAR;AACE,WAAK,YAAL;AACA,WAAK,UAAL;AACE,eAAOA,WAAP;;AACF;AACE,eAAOR,KAAK,CAACY,QAAN,CAAeC,KAAf,CAAqBP,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,GARD;;AAUA,SACE;AACE,IAAA,SAAS,EAAEJ,UAAU,CAACD,YAAY,CAAC,QAAD,EAAWS,QAAX,CAAb,sBAAgDC,cAAc,EAA9D,GAAoE;AACvF,wBAAkBJ;AADqE,KAApE;AADvB,KAIME,SAJN,GAMGH,QANH,CADF;AAUD,CAxBD;;AA0BAF,MAAM,CAACU,YAAP,GAAsB;AACpBP,EAAAA,MAAM,EAAE;AADY,CAAtB;AAIA,eAAeH,MAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Tabbar.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  itemsLayout?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {\n  const { children, shadow, itemsLayout, ...restProps } = props;\n  const platform = usePlatform();\n\n  const getItemsLayout = () => {\n    switch (itemsLayout) {\n      case 'horizontal':\n      case 'vertical':\n        return itemsLayout;\n      default:\n        return React.Children.count(children) > 2 ? 'vertical' : 'horizontal';\n    }\n  };\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName('Tabbar', platform), `Tabbar--l-${getItemsLayout()}`, {\n        'Tabbar--shadow': shadow,\n      })}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nTabbar.defaultProps = {\n  shadow: true,\n};\n\nexport default Tabbar;\n"],"file":"Tabbar.js"}
+{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"names":["React","getClassName","classNames","usePlatform","Tabbar","props","children","shadow","itemsLayout","restProps","platform","getItemsLayout","Children","count","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;;AAWA,IAAMC,MAA4C,GAAG,SAA/CA,MAA+C,CAACC,KAAD,EAAwB;AAC3E,MAAQC,QAAR,GAAwDD,KAAxD,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAwDF,KAAxD,CAAkBE,MAAlB;AAAA,MAA0BC,WAA1B,GAAwDH,KAAxD,CAA0BG,WAA1B;AAAA,MAA0CC,SAA1C,4BAAwDJ,KAAxD;;AACA,MAAMK,QAAQ,GAAGP,WAAW,EAA5B;;AAEA,MAAMQ,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQH,WAAR;AACE,WAAK,YAAL;AACA,WAAK,UAAL;AACE,eAAOA,WAAP;;AACF;AACE,eAAOR,KAAK,CAACY,QAAN,CAAeC,KAAf,CAAqBP,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,GARD;;AAUA,SACE;AACE,IAAA,SAAS,EAAEJ,UAAU,CAACD,YAAY,CAAC,QAAD,EAAWS,QAAX,CAAb,sBAAgDC,cAAc,EAA9D,GAAoE;AACvF,wBAAkBJ;AADqE,KAApE;AADvB,KAIME,SAJN,GAME;AAAK,IAAA,SAAS,EAAC;AAAf,KACGH,QADH,CANF,CADF;AAYD,CA1BD;;AA4BAF,MAAM,CAACU,YAAP,GAAsB;AACpBP,EAAAA,MAAM,EAAE;AADY,CAAtB;AAIA,eAAeH,MAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Tabbar.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  itemsLayout?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {\n  const { children, shadow, itemsLayout, ...restProps } = props;\n  const platform = usePlatform();\n\n  const getItemsLayout = () => {\n    switch (itemsLayout) {\n      case 'horizontal':\n      case 'vertical':\n        return itemsLayout;\n      default:\n        return React.Children.count(children) > 2 ? 'vertical' : 'horizontal';\n    }\n  };\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName('Tabbar', platform), `Tabbar--l-${getItemsLayout()}`, {\n        'Tabbar--shadow': shadow,\n      })}\n      {...restProps}\n    >\n      <div vkuiClass=\"Tabbar__in\">\n        {children}\n      </div>\n    </div>\n  );\n};\n\nTabbar.defaultProps = {\n  shadow: true,\n};\n\nexport default Tabbar;\n"],"file":"Tabbar.js"}

package/dist/components/TabbarItem/TabbarItem.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { HasComponent, HasRootRef } from '../../types';
 import './TabbarItem.css';
-export interface TabbarItemProps extends React.HTMLAttributes<HTMLElement>, React.AnchorHTMLAttributes<HTMLElement> {
+export interface TabbarItemProps extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>, // TODO убрать Omit после удаления свойства label
+HasRootRef<HTMLElement>, HasComponent {
     selected?: boolean;
     /**
      * Тест рядом с иконкой

package/dist/components/TabbarItem/TabbarItem.js

@@ -1,28 +1,44 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "selected", "label", "indicator", "text"];
+var _excluded = ["children", "selected", "label", "indicator", "text", "href", "Component", "disabled"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { getClassName } from "../../helpers/getClassName";
 import Counter from "../Counter/Counter";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
+import Tappable from "../Tappable/Tappable";
+import { Platform } from "../../lib/platform";
 
-var TabbarItem = function TabbarItem(props) {
-  var children = props.children,
-      selected = props.selected,
-      label = props.label,
-      indicator = props.indicator,
-      text = props.text,
-      restProps = _objectWithoutProperties(props, _excluded);
+var TabbarItem = function TabbarItem(_ref) {
+  var children = _ref.children,
+      selected = _ref.selected,
+      label = _ref.label,
+      indicator = _ref.indicator,
+      text = _ref.text,
+      href = _ref.href,
+      _ref$Component = _ref.Component,
+      Component = _ref$Component === void 0 ? href ? 'a' : 'button' : _ref$Component,
+      disabled = _ref.disabled,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var platform = usePlatform(); // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением
 
-  var platform = usePlatform();
-  var Component = restProps.href ? 'a' : 'div';
   return createScopedElement(Component, _extends({}, restProps, {
+    disabled: disabled,
+    href: href,
     vkuiClass: classNames(getClassName('TabbarItem', platform), {
       'TabbarItem--selected': selected,
       'TabbarItem--text': !!text
     })
+  }), createScopedElement(Tappable, {
+    role: "presentation",
+    Component: "div",
+    disabled: disabled,
+    activeMode: platform === Platform.IOS ? 'TabbarItem__tappable--active' : 'background',
+    activeEffectDelay: platform === Platform.IOS ? 0 : 300,
+    hasHover: false,
+    vkuiClass: "TabbarItem__tappable"
   }), createScopedElement("div", {
     vkuiClass: "TabbarItem__in"
   }, createScopedElement("div", {

package/dist/components/TabbarItem/TabbarItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["getClassName","Counter","classNames","usePlatform","hasReactNode","TabbarItem","props","children","selected","label","indicator","text","restProps","platform","Component","href"],"mappings":";;;;AACA,SAASA,YAAT;AACA,OAAOC,OAAP;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;;AAmBA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,CAACC,KAAD,EAA4B;AACvF,MAAQC,QAAR,GAAqED,KAArE,CAAQC,QAAR;AAAA,MAAkBC,QAAlB,GAAqEF,KAArE,CAAkBE,QAAlB;AAAA,MAA4BC,KAA5B,GAAqEH,KAArE,CAA4BG,KAA5B;AAAA,MAAmCC,SAAnC,GAAqEJ,KAArE,CAAmCI,SAAnC;AAAA,MAA8CC,IAA9C,GAAqEL,KAArE,CAA8CK,IAA9C;AAAA,MAAuDC,SAAvD,4BAAqEN,KAArE;;AACA,MAAMO,QAAQ,GAAGV,WAAW,EAA5B;AACA,MAAMW,SAA4B,GAAGF,SAAS,CAACG,IAAV,GAAiB,GAAjB,GAAuB,KAA5D;AAEA,SACE,oBAAC,SAAD,eACMH,SADN;AAEE,IAAA,SAAS,EAAEV,UAAU,CAACF,YAAY,CAAC,YAAD,EAAea,QAAf,CAAb,EAAuC;AAC1D,8BAAwBL,QADkC;AAE1D,0BAAoB,CAAC,CAACG;AAFoC,KAAvC;AAFvB,MAOE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGJ,QADH,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGH,YAAY,CAACM,SAAD,CAAZ,IAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IAAuB,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,GAAd;AAAkB,IAAA,IAAI,EAAC;AAAvB,KAAoCA,KAApC,CAF1B,CAFF,CADF,EAQGE,IAAI,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCA,IAAnC,CARX,CAPF,CADF;AAoBD,CAzBD;;AA2BA,eAAeN,UAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport Counter from '../Counter/Counter';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasReactNode } from '../../lib/utils';\nimport './TabbarItem.css';\n\nexport interface TabbarItemProps extends React.HTMLAttributes<HTMLElement>, React.AnchorHTMLAttributes<HTMLElement> {\n  selected?: boolean;\n  /**\n   * Тест рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте `indicator`\n   */\n  label?: React.ReactNode;\n}\n\nconst TabbarItem: React.FunctionComponent<TabbarItemProps> = (props: TabbarItemProps) => {\n  const { children, selected, label, indicator, text, ...restProps } = props;\n  const platform = usePlatform();\n  const Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  return (\n    <Component\n      {...restProps}\n      vkuiClass={classNames(getClassName('TabbarItem', platform), {\n        'TabbarItem--selected': selected,\n        'TabbarItem--text': !!text,\n      })}\n    >\n      <div vkuiClass=\"TabbarItem__in\">\n        <div vkuiClass=\"TabbarItem__icon\">\n          {children}\n          <div vkuiClass=\"TabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n            {!indicator && label && <Counter size=\"s\" mode=\"prominent\">{label}</Counter>}\n          </div>\n        </div>\n        {text && <div vkuiClass=\"TabbarItem__text\">{text}</div>}\n      </div>\n    </Component>\n  );\n};\n\nexport default TabbarItem;\n"],"file":"TabbarItem.js"}
+{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["getClassName","Counter","classNames","usePlatform","hasReactNode","Tappable","Platform","TabbarItem","children","selected","label","indicator","text","href","Component","disabled","restProps","platform","IOS"],"mappings":";;;;AACA,SAASA,YAAT;AACA,OAAOC,OAAP;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,QAAT;;AAuBA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAUtC;AAAA,MATrBC,QASqB,QATrBA,QASqB;AAAA,MARrBC,QAQqB,QARrBA,QAQqB;AAAA,MAPrBC,KAOqB,QAPrBA,KAOqB;AAAA,MANrBC,SAMqB,QANrBA,SAMqB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,4BAHrBC,SAGqB;AAAA,MAHrBA,SAGqB,+BAHTD,IAAI,GAAG,GAAH,GAAS,QAGJ;AAAA,MAFrBE,QAEqB,QAFrBA,QAEqB;AAAA,MADlBC,SACkB;;AACrB,MAAMC,QAAQ,GAAGd,WAAW,EAA5B,CADqB,CAGrB;;AACA,SAAQ,oBAAC,SAAD,eACFa,SADE;AAEN,IAAA,QAAQ,EAAED,QAFJ;AAGN,IAAA,IAAI,EAAEF,IAHA;AAIN,IAAA,SAAS,EAAEX,UAAU,CAACF,YAAY,CAAC,YAAD,EAAeiB,QAAf,CAAb,EAAuC;AAC1D,8BAAwBR,QADkC;AAE1D,0BAAoB,CAAC,CAACG;AAFoC,KAAvC;AAJf,MASN,oBAAC,QAAD;AACE,IAAA,IAAI,EAAC,cADP;AAEE,IAAA,SAAS,EAAC,KAFZ;AAGE,IAAA,QAAQ,EAAEG,QAHZ;AAIE,IAAA,UAAU,EAAEE,QAAQ,KAAKX,QAAQ,CAACY,GAAtB,GAA4B,8BAA5B,GAA6D,YAJ3E;AAKE,IAAA,iBAAiB,EAAED,QAAQ,KAAKX,QAAQ,CAACY,GAAtB,GAA4B,CAA5B,GAAgC,GALrD;AAME,IAAA,QAAQ,EAAE,KANZ;AAOE,IAAA,SAAS,EAAC;AAPZ,IATM,EAkBN;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGV,QADH,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGJ,YAAY,CAACO,SAAD,CAAZ,IAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IAAuB,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,GAAd;AAAkB,IAAA,IAAI,EAAC;AAAvB,KAAoCA,KAApC,CAF1B,CAFF,CADF,EAQGE,IAAI,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCA,IAAnC,CARX,CAlBM,CAAR;AA6BD,CA3CD;;AA6CA,eAAeL,UAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport Counter from '../Counter/Counter';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasReactNode } from '../../lib/utils';\nimport Tappable from '../Tappable/Tappable';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport './TabbarItem.css';\n\nexport interface TabbarItemProps extends\n  Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>, // TODO убрать Omit после удаления свойства label\n  HasRootRef<HTMLElement>,\n  HasComponent {\n  selected?: boolean;\n  /**\n   * Тест рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте `indicator`\n   */\n  label?: React.ReactNode;\n}\n\nconst TabbarItem: React.FunctionComponent<TabbarItemProps> = ({\n  children,\n  selected,\n  label,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением\n  return (<Component\n    {...restProps}\n    disabled={disabled}\n    href={href}\n    vkuiClass={classNames(getClassName('TabbarItem', platform), {\n      'TabbarItem--selected': selected,\n      'TabbarItem--text': !!text,\n    })}\n  >\n    <Tappable\n      role=\"presentation\"\n      Component=\"div\"\n      disabled={disabled}\n      activeMode={platform === Platform.IOS ? 'TabbarItem__tappable--active' : 'background'}\n      activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n      hasHover={false}\n      vkuiClass=\"TabbarItem__tappable\"\n    />\n    <div vkuiClass=\"TabbarItem__in\">\n      <div vkuiClass=\"TabbarItem__icon\">\n        {children}\n        <div vkuiClass=\"TabbarItem__label\">\n          {hasReactNode(indicator) && indicator}\n          {!indicator && label && <Counter size=\"s\" mode=\"prominent\">{label}</Counter>}\n        </div>\n      </div>\n      {text && <div vkuiClass=\"TabbarItem__text\">{text}</div>}\n    </div>\n  </Component>);\n};\n\nexport default TabbarItem;\n"],"file":"TabbarItem.js"}