@vkontakte/vkui 5.6.2 → 5.7.0

package/dist/cjs/components/Alert/AlertActions.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AlertActions", {
+    enumerable: true,
+    get: function() {
+        return AlertActions;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
+var _usePlatform = require("../../hooks/usePlatform");
+var _platform = require("../../lib/platform");
+var _AlertAction = require("./AlertAction");
+var alignStyles = {
+    left: "vkuiAlert__actions--align-left",
+    center: "vkuiAlert__actions--align-center",
+    right: "vkuiAlert__actions--align-right"
+};
+var directionStyles = {
+    vertical: "vkuiAlert__actions--direction-vertical",
+    horizontal: "vkuiAlert__actions--direction-horizontal"
+};
+var AlertActions = function(param) {
+    var _param_actions = param.actions, actions = _param_actions === void 0 ? [] : _param_actions, _param_renderAction = param.renderAction, renderAction = _param_renderAction === void 0 ? function(props) {
+        return /*#__PURE__*/ _react.createElement(_AlertAction.AlertAction, props);
+    } : _param_renderAction, onItemClick = param.onItemClick, actionsAlign = param.actionsAlign, actionsLayout = param.actionsLayout;
+    var platform = (0, _usePlatform.usePlatform)();
+    var direction = platform === _platform.Platform.VKCOM ? "horizontal" : actionsLayout;
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiAlert__actions", actionsAlign && alignStyles[actionsAlign], direction && directionStyles[direction])
+    }, actions.map(function(action, i) {
+        // Убираем
+        var children = action.title, _ = action.action, autoClose = action.autoClose, restProps = _object_without_properties._(action, [
+            "title",
+            "action",
+            "autoClose"
+        ]);
+        return /*#__PURE__*/ _react.createElement(_react.Fragment, {
+            key: i
+        }, renderAction(_object_spread._({
+            children: children,
+            onClick: function() {
+                return onItemClick(action);
+            }
+        }, restProps)));
+    }));
+};
+
+//# sourceMappingURL=AlertActions.js.map

package/dist/cjs/components/Alert/AlertActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Alert/AlertActions.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { AlertActionInterface, AlertProps } from './Alert';\nimport { AlertAction } from './AlertAction';\nimport styles from './Alert.module.css';\n\nconst alignStyles = {\n  left: styles['Alert__actions--align-left'],\n  center: styles['Alert__actions--align-center'],\n  right: styles['Alert__actions--align-right'],\n};\n\nconst directionStyles = {\n  vertical: styles['Alert__actions--direction-vertical'],\n  horizontal: styles['Alert__actions--direction-horizontal'],\n};\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\ninterface AlertActionsProps\n  extends Pick<AlertProps, 'actions' | 'actionsAlign' | 'renderAction' | 'actionsLayout'> {\n  onItemClick: ItemClickHandler;\n}\nexport const AlertActions = ({\n  actions = [],\n  renderAction = (props) => <AlertAction {...props} />,\n  onItemClick,\n  actionsAlign,\n  actionsLayout,\n}: AlertActionsProps) => {\n  const platform = usePlatform();\n\n  const direction: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  return (\n    <div\n      className={classNames(\n        styles['Alert__actions'],\n        actionsAlign && alignStyles[actionsAlign],\n        direction && directionStyles[direction],\n      )}\n    >\n      {actions.map((action, i) => {\n        // Убираем\n        const { title: children, action: _, autoClose, ...restProps } = action;\n\n        return (\n          <React.Fragment key={i}>\n            {renderAction({\n              children,\n              onClick: () => onItemClick(action),\n              ...restProps,\n            })}\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["AlertActions","alignStyles","left","center","right","directionStyles","vertical","horizontal","actions","renderAction","props","AlertAction","onItemClick","actionsAlign","actionsLayout","platform","usePlatform","direction","Platform","VKCOM","div","className","classNames","map","action","i","title","children","_","autoClose","restProps","React","Fragment","key","onClick"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;+DAxBU;oBACI;2BACC;wBACH;2BAEG;AAG5B,IAAMC,cAAc;IAClBC,IAAI;IACJC,MAAM;IACNC,KAAK;AACP;AAEA,IAAMC,kBAAkB;IACtBC,QAAQ;IACRC,UAAU;AACZ;AAOO,IAAMP,eAAe;+BAC1BQ,SAAAA,sCAAU,EAAE,+CACZC,cAAAA,gDAAe,SAACC;6BAAU,qBAACC,wBAAW,EAAKD;6BAC3CE,oBAAAA,aACAC,qBAAAA,cACAC,sBAAAA;IAEA,IAAMC,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,YACJF,aAAaG,kBAAQ,CAACC,KAAK,GAAG,eAAeL;IAE/C,qBACE,qBAACM;QACCC,WAAWC,IAAAA,gBAAU,wBAEnBT,gBAAgBZ,WAAW,CAACY,aAAa,EACzCI,aAAaZ,eAAe,CAACY,UAAU;OAGxCT,QAAQe,GAAG,CAAC,SAACC,QAAQC;QACpB,UAAU;QACV,IAAQC,AAAOC,WAAiDH,OAAxDE,OAAiBF,AAAQI,IAA+BJ,OAAvCA,QAAWK,YAA4BL,OAA5BK,WAAcC,yCAAcN;YAAxDE;YAAiBF;YAAWK;;QAEpC,qBACE,qBAACE,OAAMC,QAAQ;YAACC,KAAKR;WAClBhB,aAAa;YACZkB,UAAAA;YACAO,SAAS;uBAAMtB,YAAYY;;WACxBM;IAIX;AAGN"}

package/dist/cjs/components/Alert/AlertTypography.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { HasChildren } from '../../types';
+interface AlertTypography extends HasChildren {
+    id: string;
+}
+export declare const AlertHeader: (props: AlertTypography) => React.JSX.Element;
+export declare const AlertText: (props: AlertTypography) => React.JSX.Element;
+export {};

package/dist/cjs/components/Alert/AlertTypography.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AlertHeader: function() {
+        return AlertHeader;
+    },
+    AlertText: function() {
+        return AlertText;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _usePlatform = require("../../hooks/usePlatform");
+var _platform = require("../../lib/platform");
+var _Caption = require("../Typography/Caption/Caption");
+var _Footnote = require("../Typography/Footnote/Footnote");
+var _Text = require("../Typography/Text/Text");
+var _Title = require("../Typography/Title/Title");
+var AlertHeader = function(props) {
+    var platform = (0, _usePlatform.usePlatform)();
+    switch(platform){
+        case _platform.Platform.IOS:
+            return /*#__PURE__*/ _react.createElement(_Title.Title, _object_spread._({
+                className: "vkuiAlert__header",
+                weight: "1",
+                level: "3"
+            }, props));
+        default:
+            return /*#__PURE__*/ _react.createElement(_Title.Title, _object_spread._({
+                className: "vkuiAlert__header",
+                weight: "2",
+                level: "2"
+            }, props));
+    }
+};
+var AlertText = function(props) {
+    var platform = (0, _usePlatform.usePlatform)();
+    switch(platform){
+        case _platform.Platform.VKCOM:
+            return /*#__PURE__*/ _react.createElement(_Footnote.Footnote, _object_spread._({
+                className: "vkuiAlert__text"
+            }, props));
+        case _platform.Platform.IOS:
+            return /*#__PURE__*/ _react.createElement(_Caption.Caption, _object_spread._({
+                className: "vkuiAlert__text"
+            }, props));
+        default:
+            return /*#__PURE__*/ _react.createElement(_Text.Text, _object_spread._({
+                Component: "span",
+                className: "vkuiAlert__text",
+                weight: "3"
+            }, props));
+    }
+};
+
+//# sourceMappingURL=AlertTypography.js.map

package/dist/cjs/components/Alert/AlertTypography.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Alert/AlertTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasChildren } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\nexport const AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\nexport const AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n"],"names":["AlertHeader","AlertText","props","platform","usePlatform","Platform","IOS","Title","className","weight","level","VKCOM","Footnote","Caption","Text","Component"],"mappings":";;;;;;;;;;;IAaaA,WAAW;eAAXA;;IAUAC,SAAS;eAATA;;;;;+DAvBU;2BACK;wBACH;uBAED;wBACC;oBACJ;qBACC;AAMf,IAAMD,cAAc,SAACE;IAC1B,IAAMC,WAAWC,IAAAA,wBAAW;IAE5B,OAAQD;QACN,KAAKE,kBAAQ,CAACC,GAAG;YACf,qBAAO,qBAACC,YAAK;gBAACC,SAAS;gBAA2BC,QAAO;gBAAIC,OAAM;eAAQR;QAC7E;YACE,qBAAO,qBAACK,YAAK;gBAACC,SAAS;gBAA2BC,QAAO;gBAAIC,OAAM;eAAQR;IAC/E;AACF;AACO,IAAMD,YAAY,SAACC;IACxB,IAAMC,WAAWC,IAAAA,wBAAW;IAE5B,OAAQD;QACN,KAAKE,kBAAQ,CAACM,KAAK;YACjB,qBAAO,qBAACC,kBAAQ;gBAACJ,SAAS;eAA6BN;QACzD,KAAKG,kBAAQ,CAACC,GAAG;YACf,qBAAO,qBAACO,gBAAO;gBAACL,SAAS;eAA6BN;QACxD;YACE,qBAAO,qBAACY,UAAI;gBAACC,WAAU;gBAAOP,SAAS;gBAAyBC,QAAO;eAAQP;IACnF;AACF"}

package/dist/cjs/components/NativeSelect/NativeSelect.js

@@ -20,6 +20,7 @@ var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useEnsuredControl = require("../../hooks/useEnsuredControl");
 var _useExternRef = require("../../hooks/useExternRef");
 var _adaptivity = require("../../lib/adaptivity");
+var _select = require("../../lib/select");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
 var _FormField = require("../FormField/FormField");
@@ -77,7 +78,8 @@ var sizeYClassNames = _define_property._({
         disabled: disabled,
         before: before,
         after: icon,
-        status: status
+        status: status,
+        mode: (0, _select.getFormFieldModeFromSelectType)(selectType)
     }, /*#__PURE__*/ _react.createElement("select", _object_spread_props._(_object_spread._({}, restProps), {
         disabled: disabled,
         className: "vkuiSelect__el",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        'vkuiInternalNativeSelect',\n        before && styles['Select--hasBefore'],\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']} aria-hidden>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["NativeSelect","sizeYClassNames","none","SizeType","COMPACT","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","DropdownIcon","before","onChange","onChangeProp","value","valueProp","restProps","React","useState","title","setTitle","empty","setEmpty","useEnsuredControl","selectRef","useExternRef","useAdaptivity","sizeY","useIsomorphicLayoutEffect","selectedOption","current","options","selectedIndex","text","FormField","Component","classNames","REGULAR","after","select","ref","option","div","aria-hidden","SelectTypography"],"mappings":";;;;+BA0HSA;;;eAAAA;;;;;;;;;+DA1Hc;oBACI;6BACG;iCACI;4BACL;0BACJ;yCACiB;4BAEb;yBACa;gCAET;AAGjC,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAwBnB;;CAEC,GACD,IAAMJ,eAAe;QACnBK,eAAAA,oCACAC,cAAAA,gDAAe,0BACfC,eAAAA,OACAC,qBAAAA,aACAC,kBAAAA,UACAC,mBAAAA,WACAC,gBAAAA,QACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,sCACAC,YAAAA,4CAAa,+BACbC,gBAAAA,6BACAC,MAAAA,8CAAO,qBAACC,0BAAY,uBACpBC,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHnB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;;IAGA,IAA0BG,qCAAAA,OAAMC,QAAQ,CAAC,SAAlCC,QAAmBF,oBAAZG,WAAYH;IAC1B,IAA0BA,sCAAAA,OAAMC,QAAQ,CAAC,YAAlCG,QAAmBJ,qBAAZK,WAAYL;IAC1B,IAA0BM,yCAAAA,IAAAA,oCAAiB,EAAC;QAC1CzB,cAAAA;QACAO,UAAAA;QACAO,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmBS,wBAAZX,WAAYW;IAM1B,IAAMC,YAAYC,IAAAA,0BAAY,EAACtB;IAC/B,IAA2BuB,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhBC,IAAAA,oDAAyB,EAAC;YACDJ;QAAvB,IAAMK,kBAAiBL,qBAAAA,UAAUM,OAAO,cAAjBN,yCAAAA,mBAAmBO,OAAO,CAACP,UAAUM,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBT,SAASS,eAAeI,IAAI;YAC5BX,SAASO,eAAef,KAAK,KAAK,MAAMd,eAAe;QACzD;IACF,GAAG;QAACc;QAAOb;KAAS;IAEpB,qBACE,qBAACiC,oBAAS;QACRC,WAAU;QACVjC,WAAWkC,IAAAA,gBAAU,gBAEnB,4BACAzB,mCACAU,8BACAf,sCACAP,UAAU,wCACVA,UAAU,sCACV4B,UAAUhC,oBAAQ,CAAC0C,OAAO,IAAI5C,eAAe,CAACkC,MAAM,EACpDzB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVM,QAAQA;QACR2B,OAAO7B;QACPD,QAAQA;qBAER,qBAAC+B,sDACKvB;QACJX,UAAUA;QACVH,SAAS;QACTU,UAAUA;QACVE,OAAOA;QACP0B,KAAKhB;QAEJxB,6BAAe,qBAACyC;QAAO3B,OAAM;OAAId,cACjCC,yBAEH,qBAACyC;QAAIxC,SAAS;QAA+ByC,eAAAA;qBAC3C,qBAACC,kCAAgB;QAAC1C,SAAS;QAA2BK,YAAYA;OAC/DY;AAKX"}
+{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        'vkuiInternalNativeSelect',\n        before && styles['Select--hasBefore'],\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']} aria-hidden>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["NativeSelect","sizeYClassNames","none","SizeType","COMPACT","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","DropdownIcon","before","onChange","onChangeProp","value","valueProp","restProps","React","useState","title","setTitle","empty","setEmpty","useEnsuredControl","selectRef","useExternRef","useAdaptivity","sizeY","useIsomorphicLayoutEffect","selectedOption","current","options","selectedIndex","text","FormField","Component","classNames","REGULAR","after","mode","getFormFieldModeFromSelectType","select","ref","option","div","aria-hidden","SelectTypography"],"mappings":";;;;+BA4HSA;;;eAAAA;;;;;;;;;+DA5Hc;oBACI;6BACG;iCACI;4BACL;0BACJ;sBACsB;yCACL;4BAEb;yBACa;gCAET;AAGjC,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAwBnB;;CAEC,GACD,IAAMJ,eAAe;QACnBK,eAAAA,oCACAC,cAAAA,gDAAe,0BACfC,eAAAA,OACAC,qBAAAA,aACAC,kBAAAA,UACAC,mBAAAA,WACAC,gBAAAA,QACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,sCACAC,YAAAA,4CAAa,+BACbC,gBAAAA,6BACAC,MAAAA,8CAAO,qBAACC,0BAAY,uBACpBC,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHnB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;;IAGA,IAA0BG,qCAAAA,OAAMC,QAAQ,CAAC,SAAlCC,QAAmBF,oBAAZG,WAAYH;IAC1B,IAA0BA,sCAAAA,OAAMC,QAAQ,CAAC,YAAlCG,QAAmBJ,qBAAZK,WAAYL;IAC1B,IAA0BM,yCAAAA,IAAAA,oCAAiB,EAAC;QAC1CzB,cAAAA;QACAO,UAAAA;QACAO,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmBS,wBAAZX,WAAYW;IAM1B,IAAMC,YAAYC,IAAAA,0BAAY,EAACtB;IAC/B,IAA2BuB,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhBC,IAAAA,oDAAyB,EAAC;YACDJ;QAAvB,IAAMK,kBAAiBL,qBAAAA,UAAUM,OAAO,cAAjBN,yCAAAA,mBAAmBO,OAAO,CAACP,UAAUM,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBT,SAASS,eAAeI,IAAI;YAC5BX,SAASO,eAAef,KAAK,KAAK,MAAMd,eAAe;QACzD;IACF,GAAG;QAACc;QAAOb;KAAS;IAEpB,qBACE,qBAACiC,oBAAS;QACRC,WAAU;QACVjC,WAAWkC,IAAAA,gBAAU,gBAEnB,4BACAzB,mCACAU,8BACAf,sCACAP,UAAU,wCACVA,UAAU,sCACV4B,UAAUhC,oBAAQ,CAAC0C,OAAO,IAAI5C,eAAe,CAACkC,MAAM,EACpDzB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVM,QAAQA;QACR2B,OAAO7B;QACPD,QAAQA;QACR+B,MAAMC,IAAAA,sCAA8B,EAACjC;qBAErC,qBAACkC,sDACKzB;QACJX,UAAUA;QACVH,SAAS;QACTU,UAAUA;QACVE,OAAOA;QACP4B,KAAKlB;QAEJxB,6BAAe,qBAAC2C;QAAO7B,OAAM;OAAId,cACjCC,yBAEH,qBAAC2C;QAAI1C,SAAS;QAA+B2C,eAAAA;qBAC3C,qBAACC,kCAAgB;QAAC5C,SAAS;QAA2BK,YAAYA;OAC/DY;AAKX"}

package/dist/cjs/components/PopoutWrapper/PopoutWrapper.js

@@ -35,7 +35,7 @@ var PopoutWrapper = function(_param) {
     var _React_useState = _sliced_to_array._(_react.useState(!hasMask), 2), opened = _React_useState[0], setOpened = _React_useState[1];
     var elRef = _react.useRef(null);
     var onFadeInEnd = function(e) {
-        if (!e || e.animationName === "vkui-animation-full-fade-in") {
+        if (!e || e.animationName === "vkuivkui-animation-full-fade-in") {
             setOpened(true);
         }
     };

package/dist/cjs/components/PopoutWrapper/PopoutWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","window","useDOM","useGlobalEventListener","preventDefault","passive","div","classNames","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;+DApBU;oBACI;sCACY;2BACX;0BACD;mBACJ;wBACE;AAclB,IAAMA,gBAAgB;+BAC3BC,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,gDACVC,SAAAA,sCAAU,6CACVC,OAAAA,kCAAQ,qBACRC,kBAAAA,UACAC,iBAAAA,SACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA4BC,qCAAAA,OAAMC,QAAQ,CAAC,CAACT,cAArCU,SAAqBF,oBAAbG,YAAaH;IAC5B,IAAMI,QAAQJ,OAAMK,MAAM,CAAiB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,oCAA4C;YACnEL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BC,IAAAA,sBAAU,EAACJ,aAAaR,aAAaa,kBAAQ,CAACC,GAAG,GAAG,MAAM;IAC1FZ,OAAMa,SAAS,CAAC;QACd,CAACX,UAAUO,wBAAwBK,GAAG;IACxC,GAAG;QAACL;QAAyBP;KAAO;IAEpC,IAAM,AAAEa,SAAWC,IAAAA,WAAM,IAAjBD;IACRE,IAAAA,8CAAsB,EAACF,QAAQ,aAAa,SAACR;eAAMA,EAAEW,cAAc;OAAI;QACrEC,SAAS;IACX;IAEA,qBACE,qBAACC,mDACKvB;QACJD,WAAWyB,IAAAA,gBAAU,uBAEnB;YACEC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAACnC,OAAO,EACT;YACEiC,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAACpC,OAAO,EACTC,yCACAW,uCACAT,qCACAD,wCACAI;QAEF+B,gBAAgBzB,SAAS0B,YAAYtB;QACrCuB,KAAKzB;sBAEL,qBAACgB;QAAIxB,SAAS;qBACZ,qBAACwB;QAAIxB,SAAS;QAAoCD,SAASA;sBAC3D,qBAACyB;QAAIxB,SAAS;OAAqCF;AAI3D"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","window","useDOM","useGlobalEventListener","preventDefault","passive","div","classNames","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;+DApBU;oBACI;sCACY;2BACX;0BACD;mBACJ;wBACE;AAclB,IAAMA,gBAAgB;+BAC3BC,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,gDACVC,SAAAA,sCAAU,6CACVC,OAAAA,kCAAQ,qBACRC,kBAAAA,UACAC,iBAAAA,SACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA4BC,qCAAAA,OAAMC,QAAQ,CAAC,CAACT,cAArCU,SAAqBF,oBAAbG,YAAaH;IAC5B,IAAMI,QAAQJ,OAAMK,MAAM,CAAiB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,wCAA4C;YACnEL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BC,IAAAA,sBAAU,EAACJ,aAAaR,aAAaa,kBAAQ,CAACC,GAAG,GAAG,MAAM;IAC1FZ,OAAMa,SAAS,CAAC;QACd,CAACX,UAAUO,wBAAwBK,GAAG;IACxC,GAAG;QAACL;QAAyBP;KAAO;IAEpC,IAAM,AAAEa,SAAWC,IAAAA,WAAM,IAAjBD;IACRE,IAAAA,8CAAsB,EAACF,QAAQ,aAAa,SAACR;eAAMA,EAAEW,cAAc;OAAI;QACrEC,SAAS;IACX;IAEA,qBACE,qBAACC,mDACKvB;QACJD,WAAWyB,IAAAA,gBAAU,uBAEnB;YACEC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAACnC,OAAO,EACT;YACEiC,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAACpC,OAAO,EACTC,yCACAW,uCACAT,qCACAD,wCACAI;QAEF+B,gBAAgBzB,SAAS0B,YAAYtB;QACrCuB,KAAKzB;sBAEL,qBAACgB;QAAIxB,SAAS;qBACZ,qBAACwB;QAAIxB,SAAS;QAAoCD,SAASA;sBAC3D,qBAACyB;QAAIxB,SAAS;OAAqCF;AAI3D"}

package/dist/cjs/components/Popover/Popover.js

@@ -130,7 +130,7 @@ var Popover = function(_param) {
         renderContent: function(param) {
             var wrapperClassName = param.className;
             return /*#__PURE__*/ _react.createElement(_FocusTrap.FocusTrap, {
-                className: wrapperClassName,
+                className: (0, _vkjs.classNames)("vkuiPopover__in", wrapperClassName),
                 onClose: handleContentKeyDownEscape,
                 restoreFocus: restoreFocus
             }, content);

package/dist/cjs/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","useDOM","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","Popper","classNames","targetRef","renderContent","wrapperClassName","FocusTrap","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={classNames(styles['Popover__in'], wrapperClassName)}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","useDOM","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","Popper","classNames","targetRef","renderContent","wrapperClassName","FocusTrap","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}

package/dist/cjs/components/PopperArrow/PopperArrow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Placement } from '../../lib/floating';
 import type { HasRootRef } from '../../types';
-type Coords = {
+export type Coords = {
     x?: number;
     y?: number;
 };
@@ -12,4 +12,3 @@ export interface PopperArrowProps extends HasRootRef<HTMLDivElement> {
     Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
 }
 export declare const PopperArrow: ({ coords, arrowClassName, placement, getRootRef, Icon, }: PopperArrowProps) => React.JSX.Element;
-export {};

package/dist/cjs/components/PopperArrow/PopperArrow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './PopperArrow.module.css';\n\ntype Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['PopperArrow--placement-right'],\n  bottom: styles['PopperArrow--placement-bottom'],\n  left: styles['PopperArrow--placement-left'],\n};\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n  Icon = DefaultIcon,\n}: PopperArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords);\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['PopperArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n    >\n      <Icon className={classNames(styles['PopperArrow__in'], arrowClassName)} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  if (placement.startsWith('top')) {\n    return [\n      'bottom',\n      {\n        top: '100%',\n        left: coords.x,\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    return [\n      'left',\n      {\n        top: coords.y,\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        left: coords.x,\n      },\n    ];\n  } else {\n    return [\n      'right',\n      {\n        top: coords.y,\n        right: 0,\n      },\n    ];\n  }\n}\n"],"names":["PopperArrow","placementClassNames","right","bottom","left","coords","arrowClassName","placement","getRootRef","Icon","DefaultIcon","getArrowPositionData","arrowPlacement","arrowStyles","div","ref","style","className","classNames","x","y","startsWith","top","undefined"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;+DAzBU;oBACI;2BAGC;AAQ5B,IAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AASO,IAAMJ,cAAc;QACzBK,eAAAA,QACAC,uBAAAA,gBACAC,kBAAAA,WACAC,mBAAAA,gCACAC,MAAAA,gCAAOC,wBAAW;IAElB,IAAsCC,2CAAAA,qBAAqBJ,WAAWF,aAA/DO,iBAA+BD,0BAAfE,cAAeF;IAEtC,qBACE,qBAACG;QACCC,KAAKP;QACLQ,OAAOH;QACPI,WAAWC,IAAAA,gBAAU,qBAEnBN,kBAAkBX,mBAAmB,CAACW,eAAe;qBAGvD,qBAACH;QAAKQ,WAAWC,IAAAA,gBAAU,yBAA4BZ;;AAG7D;AAEA,SAASK,qBACPJ,SAAoB;QACpBF,SAAAA,iEAAiB;QAAEc,GAAG;QAAGC,GAAG;IAAE;IAE9B,IAAIb,UAAUc,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLlB,MAAMC,OAAOc,CAAC;YAChB;SACD;IACH,OAAO,IAAIZ,UAAUc,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKjB,OAAOe,CAAC;gBACbhB,MAAM;YACR;SACD;IACH,OAAO,IAAIG,UAAUc,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACEpB,QAAQ;gBACRC,MAAMC,OAAOc,CAAC;YAChB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKjB,OAAOe,CAAC;gBACblB,OAAO;YACT;SACD;IACH;AACF"}
+{"version":3,"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './PopperArrow.module.css';\n\nexport type Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['PopperArrow--placement-right'],\n  bottom: styles['PopperArrow--placement-bottom'],\n  left: styles['PopperArrow--placement-left'],\n};\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n  Icon = DefaultIcon,\n}: PopperArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords);\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['PopperArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n    >\n      <Icon className={classNames(styles['PopperArrow__in'], arrowClassName)} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  if (placement.startsWith('top')) {\n    return [\n      'bottom',\n      {\n        top: '100%',\n        left: coords.x,\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    return [\n      'left',\n      {\n        top: coords.y,\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        left: coords.x,\n      },\n    ];\n  } else {\n    return [\n      'right',\n      {\n        top: coords.y,\n        right: 0,\n      },\n    ];\n  }\n}\n"],"names":["PopperArrow","placementClassNames","right","bottom","left","coords","arrowClassName","placement","getRootRef","Icon","DefaultIcon","getArrowPositionData","arrowPlacement","arrowStyles","div","ref","style","className","classNames","x","y","startsWith","top","undefined"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;+DAzBU;oBACI;2BAGC;AAQ5B,IAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AASO,IAAMJ,cAAc;QACzBK,eAAAA,QACAC,uBAAAA,gBACAC,kBAAAA,WACAC,mBAAAA,gCACAC,MAAAA,gCAAOC,wBAAW;IAElB,IAAsCC,2CAAAA,qBAAqBJ,WAAWF,aAA/DO,iBAA+BD,0BAAfE,cAAeF;IAEtC,qBACE,qBAACG;QACCC,KAAKP;QACLQ,OAAOH;QACPI,WAAWC,IAAAA,gBAAU,qBAEnBN,kBAAkBX,mBAAmB,CAACW,eAAe;qBAGvD,qBAACH;QAAKQ,WAAWC,IAAAA,gBAAU,yBAA4BZ;;AAG7D;AAEA,SAASK,qBACPJ,SAAoB;QACpBF,SAAAA,iEAAiB;QAAEc,GAAG;QAAGC,GAAG;IAAE;IAE9B,IAAIb,UAAUc,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLlB,MAAMC,OAAOc,CAAC;YAChB;SACD;IACH,OAAO,IAAIZ,UAAUc,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKjB,OAAOe,CAAC;gBACbhB,MAAM;YACR;SACD;IACH,OAAO,IAAIG,UAAUc,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACEpB,QAAQ;gBACRC,MAAMC,OAAOc,CAAC;YAChB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKjB,OAAOe,CAAC;gBACblB,OAAO;YACT;SACD;IACH;AACF"}

package/dist/cjs/components/Progress/Progress.d.ts

@@ -6,8 +6,12 @@ export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, Has
      */
     appearance?: 'accent' | 'positive' | 'negative';
     value?: number;
+    /**
+     * Высота элемента.
+     */
+    height?: number;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
  */
-export declare const Progress: ({ value, getRootRef, className, appearance, ...restProps }: ProgressProps) => React.JSX.Element;
+export declare const Progress: ({ value, getRootRef, className, appearance, height, style: styleProps, ...restProps }: ProgressProps) => React.JSX.Element;

package/dist/cjs/components/Progress/Progress.js

@@ -15,20 +15,35 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _math = require("../../helpers/math");
+function progressCustomHeightStyle(height) {
+    return height ? {
+        height: height,
+        borderRadius: height / 2
+    } : undefined;
+}
+function progressStyle(height, styleProps) {
+    var styleHeight = progressCustomHeightStyle(height);
+    var style = styleHeight ? _object_spread._({}, styleProps, styleHeight) : styleProps;
+    return style;
+}
 var PROGRESS_MIN_VALUE = 0;
 var PROGRESS_MAX_VALUE = 100;
 var Progress = function(_param) {
-    var _param_value = _param.value, value = _param_value === void 0 ? 0 : _param_value, getRootRef = _param.getRootRef, className = _param.className, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, restProps = _object_without_properties._(_param, [
+    var _param_value = _param.value, value = _param_value === void 0 ? 0 : _param_value, getRootRef = _param.getRootRef, className = _param.className, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, height = _param.height, styleProps = _param.style, restProps = _object_without_properties._(_param, [
         "value",
         "getRootRef",
         "className",
-        "appearance"
+        "appearance",
+        "height",
+        "style"
     ]);
     var progress = (0, _math.clamp)(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
     var title = "".concat(progress, " / ").concat(PROGRESS_MAX_VALUE);
+    var style = progressStyle(height, styleProps);
     return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({
         "aria-valuenow": value,
-        title: title
+        title: title,
+        style: style
     }, restProps), {
         role: "progressbar",
         "aria-valuemin": PROGRESS_MIN_VALUE,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  appearance = 'accent',\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(\n        styles['Progress'],\n        {\n          accent: styles['Progress--appearance-accent'],\n          positive: styles['Progress--appearance-positive'],\n          negative: styles['Progress--appearance-negative'],\n        }[appearance],\n        className,\n      )}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"names":["Progress","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","value","getRootRef","className","appearance","restProps","progress","clamp","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","classNames","accent","positive","negative","style","width"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;+DAtBU;oBACI;oBACL;AActB,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAKpB,IAAMF,WAAW;8BACtBG,OAAAA,kCAAQ,kBACRC,oBAAAA,YACAC,mBAAAA,sCACAC,YAAAA,4CAAa,8BACVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,WAAK,EAACN,OAAOF,oBAAoBC;IAClD,IAAMQ,QAAQ,AAAC,GAAgBR,OAAdM,UAAS,OAAwB,OAAnBN;IAE/B,qBACE,qBAACS;QACCC,iBAAeT;QACfO,OAAOA;OACHH;QACJM,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKZ;QACLC,WAAWY,IAAAA,gBAAU,kBAEnB;YACEC,MAAM;YACNC,QAAQ;YACRC,QAAQ;QACV,CAAC,CAACd,WAAW,EACbD;sBAGF,qBAACM;QAAIN,SAAS;QAA0BgB,OAAO;YAAEC,OAAO,AAAC,GAAW,OAATd,UAAS;QAAG;;AAG7E"}
+{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nfunction progressStyle(height: number | undefined, styleProps: React.CSSProperties | undefined) {\n  const styleHeight = progressCustomHeightStyle(height);\n  const style = styleHeight ? { ...styleProps, ...styleHeight } : styleProps;\n\n  return style;\n}\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  appearance = 'accent',\n  height,\n  style: styleProps,\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  const style = progressStyle(height, styleProps);\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      style={style}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(\n        styles['Progress'],\n        {\n          accent: styles['Progress--appearance-accent'],\n          positive: styles['Progress--appearance-positive'],\n          negative: styles['Progress--appearance-negative'],\n        }[appearance],\n        className,\n      )}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"names":["Progress","progressCustomHeightStyle","height","borderRadius","undefined","progressStyle","styleProps","styleHeight","style","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","value","getRootRef","className","appearance","restProps","progress","clamp","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","classNames","accent","positive","negative","width"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;;+DA1CU;oBACI;oBACL;AAItB,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA,QAAAA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAEA,SAASC,cAAcH,MAA0B,EAAEI,UAA2C;IAC5F,IAAMC,cAAcN,0BAA0BC;IAC9C,IAAMM,QAAQD,cAAc,qBAAKD,YAAeC,eAAgBD;IAEhE,OAAOE;AACT;AAgBA,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAKpB,IAAMV,WAAW;8BACtBW,OAAAA,kCAAQ,kBACRC,oBAAAA,YACAC,mBAAAA,sCACAC,YAAAA,4CAAa,8BACbZ,gBAAAA,QACAM,AAAOF,oBAAPE,OACGO;QANHJ;QACAC;QACAC;QACAC;QACAZ;QACAM;;IAGA,IAAMQ,WAAWC,IAAAA,WAAK,EAACN,OAAOF,oBAAoBC;IAClD,IAAMQ,QAAQ,AAAC,GAAgBR,OAAdM,UAAS,OAAwB,OAAnBN;IAE/B,IAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,qBAACa;QACCC,iBAAeT;QACfO,OAAOA;QACPV,OAAOA;OACHO;QACJM,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKZ;QACLC,WAAWY,IAAAA,gBAAU,kBAEnB;YACEC,MAAM;YACNC,QAAQ;YACRC,QAAQ;QACV,CAAC,CAACd,WAAW,EACbD;sBAGF,qBAACM;QAAIN,SAAS;QAA0BL,OAAO;YAAEqB,OAAO,AAAC,GAAW,OAATb,UAAS;QAAG;;AAG7E"}

package/dist/cjs/components/Root/Root.js

@@ -113,10 +113,10 @@ var Root = function(_param) {
     ]);
     var onAnimationEnd = function(e) {
         if ([
-            "vkui-root-android-animation-hide-back",
-            "vkui-root-android-animation-show-forward",
-            "vkui-root-ios-animation-hide-back",
-            "vkui-root-ios-animation-show-forward"
+            "vkuivkui-root-android-animation-hide-back",
+            "vkuivkui-root-android-animation-show-forward",
+            "vkuivkui-root-ios-animation-hide-back",
+            "vkuivkui-root-ios-animation-show-forward"
         ].includes(e.animationName)) {
             finishTransition();
         }

package/dist/cjs/components/Search/Search.d.ts

@@ -12,8 +12,12 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
     defaultValue?: string;
     iconAriaLabel?: string;
     clearAriaLabel?: string;
+    /**
+     * Удаляет отступы у компонента
+     */
+    noPadding?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, ...inputProps }: SearchProps) => React.JSX.Element;
+export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, noPadding, ...inputProps }: SearchProps) => React.JSX.Element;

package/dist/cjs/components/Search/Search.js

@@ -23,11 +23,12 @@ var _useExternRef = require("../../hooks/useExternRef");
 var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
+var _touch = require("../../lib/touch");
 var _Button = require("../Button/Button");
 var _IconButton = require("../IconButton/IconButton");
 var _Headline = require("../Typography/Headline/Headline");
 var Search = function(_param) {
-    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ _react.createElement(_icons.Icon16SearchOutline, null) : _param_before, className = _param.className, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Поиск" : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? "Отмена" : _param_after, getRef = _param.getRef, icon = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? _vkjs.noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? "off" : _param_autoComplete, onChangeProp = _param.onChange, valueProp = _param.value, iconAriaLabel = _param.iconAriaLabel, _param_clearAriaLabel = _param.clearAriaLabel, clearAriaLabel = _param_clearAriaLabel === void 0 ? "Очистить" : _param_clearAriaLabel, inputProps = _object_without_properties._(_param, [
+    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ _react.createElement(_icons.Icon16SearchOutline, null) : _param_before, className = _param.className, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Поиск" : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? "Отмена" : _param_after, getRef = _param.getRef, icon = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? _vkjs.noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? "off" : _param_autoComplete, onChangeProp = _param.onChange, valueProp = _param.value, iconAriaLabel = _param.iconAriaLabel, _param_clearAriaLabel = _param.clearAriaLabel, clearAriaLabel = _param_clearAriaLabel === void 0 ? "Очистить" : _param_clearAriaLabel, noPadding = _param.noPadding, inputProps = _object_without_properties._(_param, [
         "before",
         "className",
         "defaultValue",
@@ -41,7 +42,8 @@ var Search = function(_param) {
         "onChange",
         "value",
         "iconAriaLabel",
-        "clearAriaLabel"
+        "clearAriaLabel",
+        "noPadding"
     ]);
     var inputRef = (0, _useExternRef.useExternRef)(getRef);
     var _useBooleanState1 = (0, _useBooleanState.useBooleanState)(false), isFocused = _useBooleanState1.value, setFocusedTrue = _useBooleanState1.setTrue, setFocusedFalse = _useBooleanState1.setFalse;
@@ -81,11 +83,15 @@ var Search = function(_param) {
         var _inputRef_current;
         e.originalEvent.preventDefault();
         (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        if ((0, _touch.touchEnabled)()) {
+            onCancel();
+        }
     }, [
-        inputRef
+        inputRef,
+        onCancel
     ]);
     return /*#__PURE__*/ _react.createElement("div", {
-        className: (0, _vkjs.classNames)("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === _adaptivity.SizeType.COMPACT && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", inputProps.disabled && "vkuiSearch--disabled", className),
+        className: (0, _vkjs.classNames)("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === _adaptivity.SizeType.COMPACT && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", inputProps.disabled && "vkuiSearch--disabled", !noPadding && "vkuiSearch--withPadding", className),
         style: style
     }, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiSearch__field"

package/dist/cjs/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n    },\n    [inputRef],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        inputProps.disabled && styles['Search--disabled'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","useExternRef","useBooleanState","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useEnsuredControl","useAdaptivity","sizeY","platform","usePlatform","onFocus","e","onBlur","onCancel","React","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","classNames","SizeType","COMPACT","disabled","label","Headline","Component","type","level","weight","getRootRef","IconButton","hoverMode","onStart","aria-label","onClick","Platform","IOS","Icon16Clear","Icon24Cancel","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { touchEnabled, VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  noPadding,\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        inputProps.disabled && styles['Search--disabled'],\n        !noPadding && styles['Search--withPadding'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","noPadding","inputProps","inputRef","useExternRef","useBooleanState","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useEnsuredControl","useAdaptivity","sizeY","platform","usePlatform","onFocus","e","onBlur","onCancel","React","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","touchEnabled","div","classNames","SizeType","COMPACT","disabled","label","Headline","Component","type","level","weight","getRootRef","IconButton","hoverMode","onStart","aria-label","onClick","Platform","IOS","Icon16Clear","Icon24Cancel","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}

package/dist/cjs/components/Snackbar/Snackbar.d.ts

@@ -42,8 +42,12 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
      * Не может использоваться одновременно с `action`
      */
     subtitle?: React.ReactNode;
+    /**
+     * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.
+     */
+    offsetY?: React.CSSProperties['bottom'];
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */
-export declare const Snackbar: ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, className, subtitle, ...restProps }: SnackbarProps) => React.JSX.Element;
+export declare const Snackbar: ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, className, subtitle, offsetY, style, ...restProps }: SnackbarProps) => React.JSX.Element;