@vkontakte/vkui 5.6.2 → 5.7.0

package/dist/components/Alert/AlertActions.js

@@ -0,0 +1,43 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { usePlatform } from "../../hooks/usePlatform";
+import { Platform } from "../../lib/platform";
+import { AlertAction } from "./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"
+};
+export 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, props);
+    } : _param_renderAction, onItemClick = param.onItemClick, actionsAlign = param.actionsAlign, actionsLayout = param.actionsLayout;
+    var platform = usePlatform();
+    var direction = platform === Platform.VKCOM ? "horizontal" : actionsLayout;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: 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/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":["React","classNames","usePlatform","Platform","AlertAction","alignStyles","left","center","right","directionStyles","vertical","horizontal","AlertActions","actions","renderAction","props","onItemClick","actionsAlign","actionsLayout","platform","direction","VKCOM","div","className","map","action","i","title","children","_","autoClose","restProps","Fragment","key","onClick"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,WAAW,QAAQ,gBAAgB;AAG5C,IAAMC,cAAc;IAClBC,IAAI;IACJC,MAAM;IACNC,KAAK;AACP;AAEA,IAAMC,kBAAkB;IACtBC,QAAQ;IACRC,UAAU;AACZ;AAOA,OAAO,IAAMC,eAAe;+BAC1BC,SAAAA,sCAAU,EAAE,+CACZC,cAAAA,gDAAe,SAACC;6BAAU,oBAACX,aAAgBW;6BAC3CC,oBAAAA,aACAC,qBAAAA,cACAC,sBAAAA;IAEA,IAAMC,WAAWjB;IAEjB,IAAMkB,YACJD,aAAahB,SAASkB,KAAK,GAAG,eAAeH;IAE/C,qBACE,oBAACI;QACCC,WAAWtB,iCAETgB,gBAAgBZ,WAAW,CAACY,aAAa,EACzCG,aAAaX,eAAe,CAACW,UAAU;OAGxCP,QAAQW,GAAG,CAAC,SAACC,QAAQC;QACpB,UAAU;QACV,IAAQC,AAAOC,WAAiDH,OAAxDE,OAAiBF,AAAQI,IAA+BJ,OAAvCA,QAAWK,YAA4BL,OAA5BK,WAAcC,uCAAcN;YAAxDE;YAAiBF;YAAWK;;QAEpC,qBACE,oBAAC9B,MAAMgC,QAAQ;YAACC,KAAKP;WAClBZ,aAAa;YACZc,UAAAA;YACAM,SAAS;uBAAMlB,YAAYS;;WACxBM;IAIX;AAGN,EAAE"}

package/dist/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/components/Alert/AlertTypography.js

@@ -0,0 +1,46 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import * as React from "react";
+import { usePlatform } from "../../hooks/usePlatform";
+import { Platform } from "../../lib/platform";
+import { Caption } from "../Typography/Caption/Caption";
+import { Footnote } from "../Typography/Footnote/Footnote";
+import { Text } from "../Typography/Text/Text";
+import { Title } from "../Typography/Title/Title";
+export var AlertHeader = function(props) {
+    var platform = usePlatform();
+    switch(platform){
+        case Platform.IOS:
+            return /*#__PURE__*/ React.createElement(Title, _object_spread({
+                className: "vkuiAlert__header",
+                weight: "1",
+                level: "3"
+            }, props));
+        default:
+            return /*#__PURE__*/ React.createElement(Title, _object_spread({
+                className: "vkuiAlert__header",
+                weight: "2",
+                level: "2"
+            }, props));
+    }
+};
+export var AlertText = function(props) {
+    var platform = usePlatform();
+    switch(platform){
+        case Platform.VKCOM:
+            return /*#__PURE__*/ React.createElement(Footnote, _object_spread({
+                className: "vkuiAlert__text"
+            }, props));
+        case Platform.IOS:
+            return /*#__PURE__*/ React.createElement(Caption, _object_spread({
+                className: "vkuiAlert__text"
+            }, props));
+        default:
+            return /*#__PURE__*/ React.createElement(Text, _object_spread({
+                Component: "span",
+                className: "vkuiAlert__text",
+                weight: "3"
+            }, props));
+    }
+};
+
+//# sourceMappingURL=AlertTypography.js.map

package/dist/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":["React","usePlatform","Platform","Caption","Footnote","Text","Title","AlertHeader","props","platform","IOS","className","weight","level","AlertText","VKCOM","Component"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAMlD,OAAO,IAAMC,cAAc,SAACC;IAC1B,IAAMC,WAAWR;IAEjB,OAAQQ;QACN,KAAKP,SAASQ,GAAG;YACf,qBAAO,oBAACJ;gBAAMK,SAAS;gBAA2BC,QAAO;gBAAIC,OAAM;eAAQL;QAC7E;YACE,qBAAO,oBAACF;gBAAMK,SAAS;gBAA2BC,QAAO;gBAAIC,OAAM;eAAQL;IAC/E;AACF,EAAE;AACF,OAAO,IAAMM,YAAY,SAACN;IACxB,IAAMC,WAAWR;IAEjB,OAAQQ;QACN,KAAKP,SAASa,KAAK;YACjB,qBAAO,oBAACX;gBAASO,SAAS;eAA6BH;QACzD,KAAKN,SAASQ,GAAG;YACf,qBAAO,oBAACP;gBAAQQ,SAAS;eAA6BH;QACxD;YACE,qBAAO,oBAACH;gBAAKW,WAAU;gBAAOL,SAAS;gBAAyBC,QAAO;eAAQJ;IACnF;AACF,EAAE"}

package/dist/components/NativeSelect/NativeSelect.js

@@ -9,6 +9,7 @@ import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useExternRef } from "../../hooks/useExternRef";
 import { SizeType } from "../../lib/adaptivity";
+import { getFormFieldModeFromSelectType } from "../../lib/select";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
@@ -66,7 +67,8 @@ var sizeYClassNames = _define_property({
         disabled: disabled,
         before: before,
         after: icon,
-        status: status
+        status: status,
+        mode: getFormFieldModeFromSelectType(selectType)
     }, /*#__PURE__*/ React.createElement("select", _object_spread_props(_object_spread({}, restProps), {
         disabled: disabled,
         className: "vkuiSelect__el",

package/dist/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":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","onChangeProp","value","valueProp","restProps","useState","title","setTitle","empty","setEmpty","selectRef","sizeY","selectedOption","current","options","selectedIndex","text","Component","REGULAR","after","select","ref","option","div","aria-hidden"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAwBnB;;CAEC,GACD,IAAMC,eAAe;QACnBC,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,oBAACnB,mCACRoB,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAA0B9B,mCAAAA,MAAMiC,QAAQ,CAAC,SAAlCC,QAAmBlC,oBAAZmC,WAAYnC;IAC1B,IAA0BA,oCAAAA,MAAMiC,QAAQ,CAAC,YAAlCG,QAAmBpC,qBAAZqC,WAAYrC;IAC1B,IAA0BG,sCAAAA,kBAAkB;QAC1CY,cAAAA;QACAO,UAAAA;QACAM,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmB3B,uBAAZyB,WAAYzB;IAM1B,IAAMmC,YAAYlC,aAAagB;IAC/B,IAA2BlB,iBAAAA,wCAAAA,eAAnBqC,OAAAA,0CAAQ;IAEhBjC,0BAA0B;YACDgC;QAAvB,IAAME,kBAAiBF,qBAAAA,UAAUG,OAAO,cAAjBH,yCAAAA,mBAAmBI,OAAO,CAACJ,UAAUG,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBL,SAASK,eAAeI,IAAI;YAC5BP,SAASG,eAAeV,KAAK,KAAK,MAAMb,eAAe;QACzD;IACF,GAAG;QAACa;QAAOZ;KAAS;IAEpB,qBACE,oBAACV;QACCqC,WAAU;QACV1B,WAAWlB,yBAET,4BACA0B,mCACAS,8BACAb,sCACAP,UAAU,wCACVA,UAAU,sCACVuB,UAAUlC,SAASyC,OAAO,IAAIpC,eAAe,CAAC6B,MAAM,EACpDpB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRoB,OAAOrB;QACPD,QAAQA;qBAER,oBAACuB,kDACKhB;QACJV,UAAUA;QACVH,SAAS;QACTS,UAAUA;QACVE,OAAOA;QACPmB,KAAKX;QAEJrB,6BAAe,oBAACiC;QAAOpB,OAAM;OAAIb,cACjCC,yBAEH,oBAACiC;QAAIhC,SAAS;QAA+BiC,eAAAA;qBAC3C,oBAAC3C;QAAiBU,SAAS;QAA2BK,YAAYA;OAC/DU;AAKX;AAEA,SAASrB,YAAY,GAAG"}
+{"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":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","onChangeProp","value","valueProp","restProps","useState","title","setTitle","empty","setEmpty","selectRef","sizeY","selectedOption","current","options","selectedIndex","text","Component","REGULAR","after","mode","select","ref","option","div","aria-hidden"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,8BAA8B,QAAQ,mBAAmB;AAClE,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,IAAMC;IACJC,IAAI;GACHP,SAASQ,OAAO;AAwBnB;;CAEC,GACD,IAAMC,eAAe;QACnBC,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,oBAACnB,mCACRoB,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAA0B/B,mCAAAA,MAAMkC,QAAQ,CAAC,SAAlCC,QAAmBnC,oBAAZoC,WAAYpC;IAC1B,IAA0BA,oCAAAA,MAAMkC,QAAQ,CAAC,YAAlCG,QAAmBrC,qBAAZsC,WAAYtC;IAC1B,IAA0BG,sCAAAA,kBAAkB;QAC1Ca,cAAAA;QACAO,UAAAA;QACAM,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmB5B,uBAAZ0B,WAAY1B;IAM1B,IAAMoC,YAAYnC,aAAaiB;IAC/B,IAA2BnB,iBAAAA,wCAAAA,eAAnBsC,OAAAA,0CAAQ;IAEhBjC,0BAA0B;YACDgC;QAAvB,IAAME,kBAAiBF,qBAAAA,UAAUG,OAAO,cAAjBH,yCAAAA,mBAAmBI,OAAO,CAACJ,UAAUG,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBL,SAASK,eAAeI,IAAI;YAC5BP,SAASG,eAAeV,KAAK,KAAK,MAAMb,eAAe;QACzD;IACF,GAAG;QAACa;QAAOZ;KAAS;IAEpB,qBACE,oBAACV;QACCqC,WAAU;QACV1B,WAAWnB,yBAET,4BACA2B,mCACAS,8BACAb,sCACAP,UAAU,wCACVA,UAAU,sCACVuB,UAAUnC,SAAS0C,OAAO,IAAIpC,eAAe,CAAC6B,MAAM,EACpDpB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRoB,OAAOrB;QACPD,QAAQA;QACRuB,MAAM3C,+BAA+BmB;qBAErC,oBAACyB,kDACKjB;QACJV,UAAUA;QACVH,SAAS;QACTS,UAAUA;QACVE,OAAOA;QACPoB,KAAKZ;QAEJrB,6BAAe,oBAACkC;QAAOrB,OAAM;OAAIb,cACjCC,yBAEH,oBAACkC;QAAIjC,SAAS;QAA+BkC,eAAAA;qBAC3C,oBAAC5C;QAAiBU,SAAS;QAA2BK,YAAYA;OAC/DU;AAKX;AAEA,SAASrB,YAAY,GAAG"}

package/dist/components/PopoutWrapper/PopoutWrapper.js

@@ -26,7 +26,7 @@ import { Platform } from "../../lib/platform";
     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/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":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAW9C;;CAEC,GACD,OAAO,IAAMC,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,WAAWd;IACjB,IAA4BH,mCAAAA,MAAMkB,QAAQ,CAAC,CAACP,cAArCQ,SAAqBnB,oBAAboB,YAAapB;IAC5B,IAAMqB,QAAQrB,MAAMsB,MAAM,CAAiB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,oCAA4C;YACnEL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BtB,WAAWmB,aAAaN,aAAaX,SAASqB,GAAG,GAAG,MAAM;IAC1F3B,MAAM4B,SAAS,CAAC;QACd,CAACT,UAAUO,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,IAAM,AAAEW,SAAWzB,SAAXyB;IACR5B,uBAAuB4B,QAAQ,aAAa,SAACN;eAAMA,EAAEO,cAAc;OAAI;QACrEC,SAAS;IACX;IAEA,qBACE,oBAACC,+CACKjB;QACJD,WAAWd,gCAET;YACEiC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAAC5B,OAAO,EACT;YACE0B,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAAC7B,OAAO,EACTC,yCACAS,uCACAP,qCACAD,wCACAI;QAEFwB,gBAAgBpB,SAASqB,YAAYjB;QACrCkB,KAAKpB;sBAEL,oBAACY;QAAIlB,SAAS;qBACZ,oBAACkB;QAAIlB,SAAS;QAAoCD,SAASA;sBAC3D,oBAACmB;QAAIlB,SAAS;OAAqCF;AAI3D,EAAE"}
+{"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":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAW9C;;CAEC,GACD,OAAO,IAAMC,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,WAAWd;IACjB,IAA4BH,mCAAAA,MAAMkB,QAAQ,CAAC,CAACP,cAArCQ,SAAqBnB,oBAAboB,YAAapB;IAC5B,IAAMqB,QAAQrB,MAAMsB,MAAM,CAAiB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,wCAA4C;YACnEL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BtB,WAAWmB,aAAaN,aAAaX,SAASqB,GAAG,GAAG,MAAM;IAC1F3B,MAAM4B,SAAS,CAAC;QACd,CAACT,UAAUO,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,IAAM,AAAEW,SAAWzB,SAAXyB;IACR5B,uBAAuB4B,QAAQ,aAAa,SAACN;eAAMA,EAAEO,cAAc;OAAI;QACrEC,SAAS;IACX;IAEA,qBACE,oBAACC,+CACKjB;QACJD,WAAWd,gCAET;YACEiC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAAC5B,OAAO,EACT;YACE0B,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAAC7B,OAAO,EACTC,yCACAS,uCACAP,qCACAD,wCACAI;QAEFwB,gBAAgBpB,SAASqB,YAAYjB;QACrCkB,KAAKpB;sBAEL,oBAACY;QAAIlB,SAAS;qBACZ,oBAACkB;QAAIlB,SAAS;QAAoCD,SAASA;sBAC3D,oBAACmB;QAAIlB,SAAS;OAAqCF;AAI3D,EAAE"}

package/dist/components/Popover/Popover.js

@@ -121,7 +121,7 @@ import { Popper } from "../Popper/Popper";
         renderContent: function(param) {
             var wrapperClassName = param.className;
             return /*#__PURE__*/ React.createElement(FocusTrap, {
-                className: wrapperClassName,
+                className: classNames("vkuiPopover__in", wrapperClassName),
                 onClose: handleContentKeyDownEscape,
                 restoreFocus: restoreFocus
             }, content);

package/dist/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":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","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":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,MAAM,QAA2B,mBAAmB;AAoD7D;;CAEC,GACD,OAAO,IAAMC,UAAU;+BACrBC,QAAAA,oCAAS,yBACTC,AAAOC,mBAAPD,iCACAE,WAAAA,0CAAY,kDACZC,WAAAA,0CAAY,uDACZC,gBAAAA,oDAAiB,2BACjBC,iBAAAA,SACAC,kBAAAA,UACAC,AAAOC,mBAAPD,OACAE,mBAAAA,WACAC,gBAAAA,QACAC,uBAAAA,4CACAC,cAAAA,gDAAe,4BACZC;QAZHd;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,WAAanB,SAAbmB;IAER,IAAMC,YAAYhB,WAAW;IAC7B,IAAMiB,UAAU5B,MAAM6B,MAAM,CAAC;IAC7B,IAA0C7B,mCAAAA,MAAM8B,QAAQ,CAACjB,aAAa,YAA/DkB,gBAAmC/B,oBAApBgC,mBAAoBhC;IAC1C,IAAsCA,oCAAAA,MAAM8B,QAAQ,CAAqB,WAAlEG,eAA+BjC,qBAAjBkC,gBAAiBlC;IAEtC,IAAMY,QAAQ,OAAOC,cAAc,YAAYA,YAAYkB;IAE3D,IAAMI,mBAAmBhC,aAA6B+B,eAAeZ;IAErE,IAA0BjB,wCAAAA,oBAAoBa,eAAvCkB,WAAmB/B,yBAATgC,QAAShC;IAE1B,IAAMiC,WAAW,SAACC;QAChB,IAAI,OAAO1B,cAAc,WAAW;YAClCmB,iBAAiBO;QACnB;QACA,OAAOhB,kBAAkB,cAAcA,cAAcgB;IACvD;IAEA,IAAMC,cAAclC,WAAW;eAAMgC,SAAS;OAAOxB;IAErD,IAAM2B,cAAcnC,WAAW;eAAMgC,SAAS;OAAQvB;IAEtD,IAAM2B,oBAAoB;QACxBd,QAAQe,OAAO,GAAG;QAClBF,YAAYG,KAAK;QACjBJ,YAAYK,GAAG;IACjB;IAEA,IAAMC,oBAAoB;QACxB,IAAIlB,QAAQe,OAAO,IAAI/B,OAAO;YAC5B;QACF;QACA0B,SAAS,CAAC1B;IACZ;IAEA,IAAMmC,oBAAoB;QACxBnB,QAAQe,OAAO,GAAG;QAClBH,YAAYI,KAAK;QACjBH,YAAYI,GAAG;IACjB;IAEA,IAAMG,6BAA6B;QACjCV,SAAS;IACX;IAEA,IAAMW,qBAAqB,SAACC;YAGvBd;QAFH,IACEH,gBACA,GAACG,oBAAAA,SAASO,OAAO,cAAhBP,wCAAAA,kBAAkBe,QAAQ,CAACD,EAAEE,MAAM,MACpC,CAACnB,aAAakB,QAAQ,CAACD,EAAEE,MAAM,GAC/B;YACAd,SAAS;QACX;IACF;IAEAlC,uBAAuBsB,UAAU,SAASuB,oBAAoB;QAC5DI,SAAS;QACTC,SAAS;IACX;IACA,IAAMC,sBAAsBrD,iBAAiB,cAAcwC;IAC3D,IAAMc,mBAAmBtD,iBAAiB,SAAS4C;IACnD,IAAMW,sBAAsBvD,iBAAiB,cAAc6C;IAE3D/C,MAAM0D,SAAS,CAAC;QACd,IAAI,CAACtB,SAASO,OAAO,EAAE;YACrB;QACF;QAEAa,iBAAiBG,GAAG,CAACvB,SAASO,OAAO;IACvC,GAAG;QAACP;QAAUoB;KAAiB;IAE/BxD,MAAM0D,SAAS,CAAC;QACd,IAAI,CAACtB,SAASO,OAAO,EAAE;YACrB;QACF;QAEA,IAAIhB,WAAW;YACb4B,oBAAoBI,GAAG,CAACvB,SAASO,OAAO;YACxCc,oBAAoBE,GAAG,CAACvB,SAASO,OAAO;QAC1C;QAEA,OAAO;YACLY,oBAAoBK,MAAM;YAC1BH,oBAAoBG,MAAM;QAC5B;IACF,GAAG;QAACxB;QAAUT;QAAW4B;QAAqBE;KAAoB;IAElE,qBACE,oBAACzD,MAAM6D,QAAQ,QACZxB,OACAzB,uBACC,oBAACH,gDACKgB;QACJJ,WAAWpB,0BAA8BoB;QACzCyC,WAAW1B;QACXd,QAAQa;QACRnB,gBAAgBA;QAChBG,OACE,iEAAiE;QACjE,yEAAyE;QACzE,wCACKC;YACH,8CAA8C,AAAC,GAAiB,OAAfJ,gBAAe;;QAGpE+C,eAAe;gBAAG1C,AAAW2C,yBAAX3C;iCAChB,oBAACb;gBACCa,WAAWpB,8BAAkC+D;gBAC7CC,SAASjB;gBACTxB,cAAcA;eAEbP;;QAGLiD,aAAavC,YAAYc,YAAYG,KAAK,GAAGuB;QAC7CC,YAAYzC,YAAYoB,oBAAoBoB;;AAKtD,EAAE"}

package/dist/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/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":["React","classNames","DefaultIcon","placementClassNames","right","bottom","left","PopperArrow","coords","arrowClassName","placement","getRootRef","Icon","getArrowPositionData","arrowPlacement","arrowStyles","div","ref","style","className","x","y","startsWith","top","undefined"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,WAAW,QAAQ,gBAAgB;AAQ5C,IAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AASA,OAAO,IAAMC,cAAc;QACzBC,eAAAA,QACAC,uBAAAA,gBACAC,kBAAAA,WACAC,mBAAAA,gCACAC,MAAAA,gCAAOV;IAEP,IAAsCW,yCAAAA,qBAAqBH,WAAWF,aAA/DM,iBAA+BD,0BAAfE,cAAeF;IAEtC,qBACE,oBAACG;QACCC,KAAKN;QACLO,OAAOH;QACPI,WAAWlB,8BAETa,kBAAkBX,mBAAmB,CAACW,eAAe;qBAGvD,oBAACF;QAAKO,WAAWlB,kCAAsCQ;;AAG7D,EAAE;AAEF,SAASI,qBACPH,SAAoB;QACpBF,SAAAA,iEAAiB;QAAEY,GAAG;QAAGC,GAAG;IAAE;IAE9B,IAAIX,UAAUY,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLjB,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO,IAAIV,UAAUY,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKf,OAAOa,CAAC;gBACbf,MAAM;YACR;SACD;IACH,OAAO,IAAII,UAAUY,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACEnB,QAAQ;gBACRC,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKf,OAAOa,CAAC;gBACbjB,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":["React","classNames","DefaultIcon","placementClassNames","right","bottom","left","PopperArrow","coords","arrowClassName","placement","getRootRef","Icon","getArrowPositionData","arrowPlacement","arrowStyles","div","ref","style","className","x","y","startsWith","top","undefined"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,WAAW,QAAQ,gBAAgB;AAQ5C,IAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AASA,OAAO,IAAMC,cAAc;QACzBC,eAAAA,QACAC,uBAAAA,gBACAC,kBAAAA,WACAC,mBAAAA,gCACAC,MAAAA,gCAAOV;IAEP,IAAsCW,yCAAAA,qBAAqBH,WAAWF,aAA/DM,iBAA+BD,0BAAfE,cAAeF;IAEtC,qBACE,oBAACG;QACCC,KAAKN;QACLO,OAAOH;QACPI,WAAWlB,8BAETa,kBAAkBX,mBAAmB,CAACW,eAAe;qBAGvD,oBAACF;QAAKO,WAAWlB,kCAAsCQ;;AAG7D,EAAE;AAEF,SAASI,qBACPH,SAAoB;QACpBF,SAAAA,iEAAiB;QAAEY,GAAG;QAAGC,GAAG;IAAE;IAE9B,IAAIX,UAAUY,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLjB,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO,IAAIV,UAAUY,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKf,OAAOa,CAAC;gBACbf,MAAM;YACR;SACD;IACH,OAAO,IAAII,UAAUY,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACEnB,QAAQ;gBACRC,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKf,OAAOa,CAAC;gBACbjB,OAAO;YACT;SACD;IACH;AACF"}

package/dist/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/components/Progress/Progress.js

@@ -4,22 +4,37 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { clamp } from "../../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;
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
  */ export 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 = 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/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":["React","classNames","clamp","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","appearance","restProps","progress","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","accent","positive","negative","style","width"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAc3C,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,IAAMC,WAAW;8BACtBC,OAAAA,kCAAQ,kBACRC,oBAAAA,YACAC,mBAAAA,sCACAC,YAAAA,4CAAa,8BACVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWT,MAAMI,OAAOH,oBAAoBC;IAClD,IAAMQ,QAAQ,AAAC,GAAgBR,OAAdO,UAAS,OAAwB,OAAnBP;IAE/B,qBACE,oBAACS;QACCC,iBAAeR;QACfM,OAAOA;OACHF;QACJK,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKX;QACLC,WAAWP,2BAET;YACEkB,MAAM;YACNC,QAAQ;YACRC,QAAQ;QACV,CAAC,CAACZ,WAAW,EACbD;sBAGF,oBAACK;QAAIL,SAAS;QAA0Bc,OAAO;YAAEC,OAAO,AAAC,GAAW,OAATZ,UAAS;QAAG;;AAG7E,EAAE"}
+{"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":["React","classNames","clamp","progressCustomHeightStyle","height","borderRadius","undefined","progressStyle","styleProps","styleHeight","style","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","appearance","restProps","progress","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","accent","positive","negative","width"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAI3C,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,mBAAKD,YAAeC,eAAgBD;IAEhE,OAAOE;AACT;AAgBA,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,IAAMC,WAAW;8BACtBC,OAAAA,kCAAQ,kBACRC,oBAAAA,YACAC,mBAAAA,sCACAC,YAAAA,4CAAa,8BACbb,gBAAAA,QACAM,AAAOF,oBAAPE,OACGQ;QANHJ;QACAC;QACAC;QACAC;QACAb;QACAM;;IAGA,IAAMS,WAAWjB,MAAMY,OAAOH,oBAAoBC;IAClD,IAAMQ,QAAQ,AAAC,GAAgBR,OAAdO,UAAS,OAAwB,OAAnBP;IAE/B,IAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,oBAACa;QACCC,iBAAeR;QACfM,OAAOA;QACPV,OAAOA;OACHQ;QACJK,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKX;QACLC,WAAWf,2BAET;YACE0B,MAAM;YACNC,QAAQ;YACRC,QAAQ;QACV,CAAC,CAACZ,WAAW,EACbD;sBAGF,oBAACK;QAAIL,SAAS;QAA0BN,OAAO;YAAEoB,OAAO,AAAC,GAAW,OAATX,UAAS;QAAG;;AAG7E,EAAE"}

package/dist/components/Root/Root.js

@@ -104,10 +104,10 @@ var warn = warnOnce("Root");
     ]);
     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/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/components/Search/Search.js

@@ -12,13 +12,14 @@ import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
 import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
+import { touchEnabled } from "../../lib/touch";
 import { Button } from "../Button/Button";
 import { IconButton } from "../IconButton/IconButton";
 import { Headline } from "../Typography/Headline/Headline";
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */ export var Search = function(_param) {
-    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ React.createElement(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 ? 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(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 ? 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",
@@ -32,7 +33,8 @@ import { Headline } from "../Typography/Headline/Headline";
         "onChange",
         "value",
         "iconAriaLabel",
-        "clearAriaLabel"
+        "clearAriaLabel",
+        "noPadding"
     ]);
     var inputRef = useExternRef(getRef);
     var _useBooleanState = useBooleanState(false), isFocused = _useBooleanState.value, setFocusedTrue = _useBooleanState.setTrue, setFocusedFalse = _useBooleanState.setFalse;
@@ -72,11 +74,15 @@ import { Headline } from "../Typography/Headline/Headline";
         var _inputRef_current;
         e.originalEvent.preventDefault();
         (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        if (touchEnabled()) {
+            onCancel();
+        }
     }, [
-        inputRef
+        inputRef,
+        onCancel
     ]);
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === 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: classNames("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === 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/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":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Button","IconButton","Headline","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","disabled","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","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":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","touchEnabled","Button","IconButton","Headline","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","noPadding","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","disabled","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"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"}

package/dist/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;

package/dist/components/Snackbar/Snackbar.js

@@ -19,7 +19,7 @@ import { Subhead } from "../Typography/Subhead/Subhead";
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */ export var Snackbar = function(_param) {
-    var children = _param.children, tmp = _param.layout, layoutProps = tmp === void 0 ? "horizontal" : tmp, action = _param.action, before = _param.before, after = _param.after, _param_duration = _param.duration, duration = _param_duration === void 0 ? 4000 : _param_duration, onActionClick = _param.onActionClick, onClose = _param.onClose, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, className = _param.className, subtitle = _param.subtitle, restProps = _object_without_properties(_param, [
+    var children = _param.children, tmp = _param.layout, layoutProps = tmp === void 0 ? "horizontal" : tmp, action = _param.action, before = _param.before, after = _param.after, _param_duration = _param.duration, duration = _param_duration === void 0 ? 4000 : _param_duration, onActionClick = _param.onActionClick, onClose = _param.onClose, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, className = _param.className, subtitle = _param.subtitle, offsetY = _param.offsetY, style = _param.style, restProps = _object_without_properties(_param, [
         "children",
         "layout",
         "action",
@@ -30,7 +30,9 @@ import { Subhead } from "../Typography/Subhead/Subhead";
         "onClose",
         "mode",
         "className",
-        "subtitle"
+        "subtitle",
+        "offsetY",
+        "style"
     ]);
     var platform = usePlatform();
     var viewWidth = useAdaptivityWithJSMediaQueries().viewWidth;
@@ -120,7 +122,10 @@ import { Subhead } from "../Typography/Subhead/Subhead";
         className: classNames("vkuiSnackbar", platform === Platform.IOS && "vkuiSnackbar--ios", {
             vertical: "vkuiSnackbar--layout-vertical",
             horizontal: "vkuiSnackbar--layout-horizontal"
-        }[layout], mode === "dark" && "vkuiSnackbar--mode-dark", closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className)
+        }[layout], mode === "dark" && "vkuiSnackbar--mode-dark", closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className),
+        style: offsetY ? _object_spread_props(_object_spread({}, style), {
+            bottom: offsetY
+        }) : style
     }), /*#__PURE__*/ React.createElement(Touch, {
         className: "vkuiSnackbar__in",
         getRootRef: innerElRef,