@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cjs/components/ScreenSpinner/ScreenSpinner.js

@@ -1,66 +1,57 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "ScreenSpinner", {
+    enumerable: true,
+    get: function() {
+        return ScreenSpinner;
+    }
 });
-exports.ScreenSpinner = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
-var _ScrollContext = require("../AppRoot/ScrollContext");
-var _PopoutWrapper = require("../PopoutWrapper/PopoutWrapper");
-var _Spinner = require("../Spinner/Spinner");
-var _Icon48CancelCircle = require("./Icon48CancelCircle");
-var _Icon48DoneOutline = require("./Icon48DoneOutline");
-var _excluded = ["style", "className", "state", "size", "aria-label", "onClick"];
-/**
- * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
- */
-var ScreenSpinner = function ScreenSpinner(_ref) {
-  var style = _ref.style,
-    className = _ref.className,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? 'loading' : _ref$state,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'large' : _ref$size,
-    _ref$ariaLabel = _ref['aria-label'],
-    ariaLabel = _ref$ariaLabel === void 0 ? 'Пожалуйста, подождите...' : _ref$ariaLabel,
-    onClick = _ref.onClick,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var hideSpinner = state === 'done' || state === 'error';
-  var Icon = {
-    loading: function loading() {
-      return null;
-    },
-    cancelable: _icons.Icon24Cancel,
-    done: _Icon48DoneOutline.Icon48DoneOutline,
-    error: _Icon48CancelCircle.Icon48CancelCircle
-  }[state];
-  (0, _ScrollContext.useScrollLock)();
-  return /*#__PURE__*/React.createElement(_PopoutWrapper.PopoutWrapper, {
-    hasMask: false,
-    className: (0, _vkjs.classNames)("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", styles["ScreenSpinner--state-".concat(state)], className),
-    style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiScreenSpinner__container",
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(_Spinner.Spinner, (0, _extends2.default)({
-    className: "vkuiScreenSpinner__spinner",
-    size: size,
-    "aria-label": ariaLabel
-  }, restProps)), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiScreenSpinner__icon"
-  }, /*#__PURE__*/React.createElement(Icon, null))));
-};
-exports.ScreenSpinner = ScreenSpinner;
-var styles = {
-  "ScreenSpinner--state-cancelable": "vkuiScreenSpinner--state-cancelable",
-  "ScreenSpinner--state-done": "vkuiScreenSpinner--state-done",
-  "ScreenSpinner--state-loading": "vkuiScreenSpinner--state-loading",
-  "ScreenSpinner--state-error": "vkuiScreenSpinner--state-error"
+var _scrollContext = require("../AppRoot/ScrollContext");
+var _popoutWrapper = require("../PopoutWrapper/PopoutWrapper");
+var _spinner = require("../Spinner/Spinner");
+var _icon48CancelCircle = require("./Icon48CancelCircle");
+var _icon48DoneOutline = require("./Icon48DoneOutline");
+var ScreenSpinner = function(_param) {
+    var style = _param.style, className = _param.className, _param_state = _param.state, state = _param_state === void 0 ? "loading" : _param_state, _param_size = _param.size, size = _param_size === void 0 ? "large" : _param_size, tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Пожалуйста, подождите..." : tmp, onClick = _param.onClick, restProps = _objectWithoutProperties(_param, [
+        "style",
+        "className",
+        "state",
+        "size",
+        "aria-label",
+        "onClick"
+    ]);
+    var hideSpinner = state === "done" || state === "error";
+    var Icon = {
+        loading: function() {
+            return null;
+        },
+        cancelable: _icons.Icon24Cancel,
+        done: _icon48DoneOutline.Icon48DoneOutline,
+        error: _icon48CancelCircle.Icon48CancelCircle
+    }[state];
+    (0, _scrollContext.useScrollLock)();
+    return /*#__PURE__*/ _react.createElement(_popoutWrapper.PopoutWrapper, {
+        hasMask: false,
+        className: (0, _vkjs.classNames)("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", state === "cancelable" && "vkuiScreenSpinner--state-cancelable", state === "done" && "vkuiScreenSpinner--state-done", className),
+        style: style
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiScreenSpinner__container",
+        onClick: onClick
+    }, /*#__PURE__*/ _react.createElement(_spinner.Spinner, _objectSpread({
+        className: "vkuiScreenSpinner__spinner",
+        size: size,
+        "aria-label": ariaLabel
+    }, restProps)), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiScreenSpinner__icon"
+    }, /*#__PURE__*/ _react.createElement(Icon, null))));
 };
+
 //# sourceMappingURL=ScreenSpinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenSpinner.js","names":["ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","Icon24Cancel","done","Icon48DoneOutline","error","Icon48CancelCircle","useScrollLock","classNames","styles"],"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  onClick,\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      className={classNames(\n        styles['ScreenSpinner'],\n        hideSpinner && styles['ScreenSpinner--hideSpinner'],\n        styles[`ScreenSpinner--state-${state}`],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={styles['ScreenSpinner__spinner']}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div className={styles['ScreenSpinner__icon']}>\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAwD;AAOxD;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAQA;EAAA,IAPxBC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IAAA,kBACTC,KAAK;IAALA,KAAK,2BAAG,SAAS;IAAA,iBACjBC,IAAI;IAAJA,IAAI,0BAAG,OAAO;IAAA,sBACd,YAAY;IAAEC,SAAS,+BAAG,0BAA0B;IACpDC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,WAAW,GAAGL,KAAK,KAAK,MAAM,IAAIA,KAAK,KAAK,OAAO;EAEzD,IAAMM,IAAI,GAAG;IACXC,OAAO,EAAE;MAAA,OAAM,IAAI;IAAA;IACnBC,UAAU,EAAEC,mBAAY;IACxBC,IAAI,EAAEC,oCAAiB;IACvBC,KAAK,EAAEC;EACT,CAAC,CAACb,KAAK,CAAC;EAER,IAAAc,4BAAa,GAAE;EAEf,oBACE,oBAAC,4BAAa;IACZ,OAAO,EAAE,KAAM;IACf,SAAS,EAAE,IAAAC,gBAAU,uBAEnBV,WAAW,oCAAwC,EACnDW,MAAM,gCAAyBhB,KAAK,EAAG,EACvCD,SAAS,CACT;IACF,KAAK,EAAED;EAAM,gBAEb;IAAK,SAAS,gCAAqC;IAAC,OAAO,EAAEK;EAAQ,gBACnE,oBAAC,gBAAO;IACN,SAAS,8BAAmC;IAC5C,IAAI,EAAEF,IAAK;IACX,cAAYC;EAAU,GAClBE,SAAS,EACb,eACF;IAAK,SAAS;EAAgC,gBAC5C,oBAAC,IAAI,OAAG,CACJ,CACF,CACQ;AAEpB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  onClick,\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      className={classNames(\n        styles['ScreenSpinner'],\n        hideSpinner && styles['ScreenSpinner--hideSpinner'],\n        state === 'cancelable' && styles['ScreenSpinner--state-cancelable'],\n        state === 'done' && styles['ScreenSpinner--state-done'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={styles['ScreenSpinner__spinner']}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div className={styles['ScreenSpinner__icon']}>\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","Icon24Cancel","done","Icon48DoneOutline","error","Icon48CancelCircle","useScrollLock","PopoutWrapper","hasMask","classNames","div","Spinner","aria-label"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;2DAjBU;qBACM;oBACF;6BACG;6BACA;uBACQ;kCACH;iCACD;AAU3B,IAAMA,gBAAgB,iBAQH;QAPxBC,eAAAA,OACAC,mBAAAA,iCACAC,OAAAA,kCAAQ,+CACRC,MAAAA,gCAAO,uBACOC,aAAd,eAAcA,YAAAA,iBAAY,6BAAZA,KACdC,iBAAAA,SACGC;QANHN;QACAC;QACAC;QACAC;QACA;QACAE;;IAGA,IAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,IAAMM,OAAO;QACXC,SAAS;mBAAM,IAAI;;QACnBC,YAAYC,mBAAY;QACxBC,MAAMC,oCAAiB;QACvBC,OAAOC,sCAAkB;IAC3B,CAAC,CAACb,MAAM;IAERc,IAAAA,4BAAa;IAEb,qBACE,qBAACC,4BAAa;QACZC,SAAS,KAAK;QACdjB,WAAWkB,IAAAA,gBAAU,uBAEnBZ,iDACAL,UAAU,uDACVA,UAAU,2CACVD;QAEFD,OAAOA;qBAEP,qBAACoB;QAAInB,SAAS;QAAsCI,SAASA;qBAC3D,qBAACgB,gBAAO;QACNpB,SAAS;QACTE,MAAMA;QACNmB,cAAYlB;OACRE,2BAEN,qBAACc;QAAInB,SAAS;qBACZ,qBAACO;AAKX"}

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

@@ -1,159 +1,153 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "Search", {
+    enumerable: true,
+    get: function() {
+        return Search;
+    }
 });
-exports.Search = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var React = _interopRequireWildcard(require("react"));
+var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _useEnsuredControl3 = require("../../hooks/useEnsuredControl");
+var _useAdaptivity = require("../../hooks/useAdaptivity");
+var _useEnsuredControl = require("../../hooks/useEnsuredControl");
 var _useExternRef = require("../../hooks/useExternRef");
 var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
-var _Touch = require("../Touch/Touch");
-var _Headline = require("../Typography/Headline/Headline");
-var _Title = require("../Typography/Title/Title");
-var _excluded = ["children"],
-  _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "icon", "onIconClick", "style", "autoComplete", "onChange", "value"];
-var sizeYClassNames = (0, _defineProperty2.default)({
-  none: "vkuiSearch--sizeY-none"
+var _touch = require("../Touch/Touch");
+var _headline = require("../Typography/Headline/Headline");
+var _title = require("../Typography/Title/Title");
+var sizeYClassNames = _defineProperty({
+    none: "vkuiSearch--sizeY-none"
 }, _adaptivity.SizeType.REGULAR, "vkuiSearch--sizeY-regular");
-var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
-  var children = _ref.children,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-  switch (platform) {
-    case _platform.Platform.IOS:
-      return /*#__PURE__*/React.createElement(_Title.Title, (0, _extends2.default)({}, restProps, {
-        level: "3",
-        weight: "3"
-      }), children);
-    default:
-      return /*#__PURE__*/React.createElement(_Headline.Headline, (0, _extends2.default)({}, restProps, {
-        weight: "3"
-      }), children);
-  }
+var SearchPlaceholderTypography = function(_param) {
+    var children = _param.children, restProps = _objectWithoutProperties(_param, [
+        "children"
+    ]);
+    var platform = (0, _usePlatform.usePlatform)();
+    switch(platform){
+        case _platform.Platform.IOS:
+            return /*#__PURE__*/ _react.createElement(_title.Title, _objectSpreadProps(_objectSpread({}, restProps), {
+                level: "3",
+                weight: "3"
+            }), children);
+        default:
+            return /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpreadProps(_objectSpread({}, restProps), {
+                weight: "3"
+            }), children);
+    }
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Search
- */
-var Search = function Search(_ref2) {
-  var _ref2$before = _ref2.before,
-    before = _ref2$before === void 0 ? /*#__PURE__*/React.createElement(_icons.Icon16SearchOutline, null) : _ref2$before,
-    className = _ref2.className,
-    _ref2$defaultValue = _ref2.defaultValue,
-    defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
-    _ref2$placeholder = _ref2.placeholder,
-    placeholder = _ref2$placeholder === void 0 ? 'Поиск' : _ref2$placeholder,
-    _ref2$after = _ref2.after,
-    after = _ref2$after === void 0 ? 'Отмена' : _ref2$after,
-    getRef = _ref2.getRef,
-    icon = _ref2.icon,
-    _ref2$onIconClick = _ref2.onIconClick,
-    onIconClick = _ref2$onIconClick === void 0 ? _vkjs.noop : _ref2$onIconClick,
-    style = _ref2.style,
-    _ref2$autoComplete = _ref2.autoComplete,
-    autoComplete = _ref2$autoComplete === void 0 ? 'off' : _ref2$autoComplete,
-    onChangeProp = _ref2.onChange,
-    valueProp = _ref2.value,
-    inputProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  var inputRef = (0, _useExternRef.useExternRef)(getRef);
-  var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    isFocused = _React$useState2[0],
-    setFocused = _React$useState2[1];
-  var _useEnsuredControl = (0, _useEnsuredControl3.useEnsuredControl)({
-      defaultValue: defaultValue,
-      onChange: onChangeProp,
-      value: valueProp
-    }),
-    _useEnsuredControl2 = (0, _slicedToArray2.default)(_useEnsuredControl, 2),
-    value = _useEnsuredControl2[0],
-    onChange = _useEnsuredControl2[1];
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var platform = (0, _usePlatform.usePlatform)();
-  var onFocus = function onFocus(e) {
-    setFocused(true);
-    inputProps.onFocus && inputProps.onFocus(e);
-  };
-  var onBlur = function onBlur(e) {
-    setFocused(false);
-    inputProps.onBlur && inputProps.onBlur(e);
-  };
-  var onCancel = React.useCallback(function () {
-    var _Object$getOwnPropert, _inputRef$current;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
-    nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(inputRef.current, '');
-    var ev2 = new Event('input', {
-      bubbles: true
-    });
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.dispatchEvent(ev2);
-  }, [inputRef]);
-  var onIconClickStart = React.useCallback(function (e) {
-    return onIconClick(e.originalEvent);
-  }, [onIconClick]);
-  var onIconCancelClickStart = React.useCallback(function (e) {
-    var _inputRef$current2;
-    e.originalEvent.preventDefault();
-    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-    onCancel();
-  }, [inputRef, onCancel]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _vkjs.classNames)("vkuiSearch", platform === _platform.Platform.IOS && "vkuiSearch--ios", sizeY !== _adaptivity.SizeType.COMPACT && sizeYClassNames[sizeY], isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
-    style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__in"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__width"
-  }), /*#__PURE__*/React.createElement("label", {
-    className: "vkuiSearch__control"
-  }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
-    type: "search"
-  }, inputProps, {
-    autoComplete: autoComplete,
-    ref: inputRef,
-    className: "vkuiSearch__input",
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onChange: onChange,
-    value: value
-  })), platform === _platform.Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after-width"
-  }, after), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__placeholder"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__placeholder-in"
-  }, before, /*#__PURE__*/React.createElement(SearchPlaceholderTypography, {
-    className: "vkuiSearch__placeholder-text"
-  }, placeholder)), isFocused && platform === _platform.Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after-width"
-  }, after))), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__icons"
-  }, icon && /*#__PURE__*/React.createElement(_Touch.Touch, {
-    onStart: onIconClickStart,
-    className: "vkuiSearch__icon"
-  }, icon), !!value && /*#__PURE__*/React.createElement(_Touch.Touch, {
-    onStart: onIconCancelClickStart,
-    onClick: onCancel,
-    className: "vkuiSearch__icon"
-  }, platform === _platform.Platform.IOS ? /*#__PURE__*/React.createElement(_icons.Icon16Clear, null) : /*#__PURE__*/React.createElement(_icons.Icon24Cancel, null))), platform === _platform.Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after-in",
-    onClick: onCancel
-  }, after))));
+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, inputProps = _objectWithoutProperties(_param, [
+        "before",
+        "className",
+        "defaultValue",
+        "placeholder",
+        "after",
+        "getRef",
+        "icon",
+        "onIconClick",
+        "style",
+        "autoComplete",
+        "onChange",
+        "value"
+    ]);
+    var inputRef = (0, _useExternRef.useExternRef)(getRef);
+    var _React_useState = _slicedToArray(_react.useState(false), 2), isFocused = _React_useState[0], setFocused = _React_useState[1];
+    var _useEnsuredControl1 = _slicedToArray((0, _useEnsuredControl.useEnsuredControl)({
+        defaultValue: defaultValue,
+        onChange: onChangeProp,
+        value: valueProp
+    }), 2), value = _useEnsuredControl1[0], onChange = _useEnsuredControl1[1];
+    var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var platform = (0, _usePlatform.usePlatform)();
+    var onFocus = function(e) {
+        setFocused(true);
+        inputProps.onFocus && inputProps.onFocus(e);
+    };
+    var onBlur = function(e) {
+        setFocused(false);
+        inputProps.onBlur && inputProps.onBlur(e);
+    };
+    var onCancel = _react.useCallback(function() {
+        var _Object_getOwnPropertyDescriptor, _inputRef_current;
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        var nativeInputValueSetter = (_Object_getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) === null || _Object_getOwnPropertyDescriptor === void 0 ? void 0 : _Object_getOwnPropertyDescriptor.set;
+        nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(inputRef.current, "");
+        var ev2 = new Event("input", {
+            bubbles: true
+        });
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.dispatchEvent(ev2);
+    }, [
+        inputRef
+    ]);
+    var onIconClickStart = _react.useCallback(function(e) {
+        return onIconClick(e.originalEvent);
+    }, [
+        onIconClick
+    ]);
+    var onIconCancelClickStart = _react.useCallback(function(e) {
+        var _inputRef_current;
+        e.originalEvent.preventDefault();
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        onCancel();
+    }, [
+        inputRef,
+        onCancel
+    ]);
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiSearch", sizeY !== _adaptivity.SizeType.COMPACT && sizeYClassNames[sizeY], isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
+        style: style
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSearch__in"
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSearch__width"
+    }), /*#__PURE__*/ _react.createElement("label", {
+        className: "vkuiSearch__control"
+    }, /*#__PURE__*/ _react.createElement("input", _objectSpreadProps(_objectSpread({
+        type: "search"
+    }, inputProps), {
+        autoComplete: autoComplete,
+        ref: inputRef,
+        className: "vkuiSearch__input",
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onChange: onChange,
+        value: value
+    })), platform === _platform.Platform.IOS && after && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSearch__after-width"
+    }, after), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSearch__placeholder"
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSearch__placeholder-in"
+    }, before, /*#__PURE__*/ _react.createElement(SearchPlaceholderTypography, {
+        className: "vkuiSearch__placeholder-text"
+    }, placeholder)), isFocused && platform === _platform.Platform.IOS && after && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSearch__after-width"
+    }, after))), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSearch__after"
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSearch__icons"
+    }, icon && /*#__PURE__*/ _react.createElement(_touch.Touch, {
+        onStart: onIconClickStart,
+        className: "vkuiSearch__icon"
+    }, icon), !!value && /*#__PURE__*/ _react.createElement(_touch.Touch, {
+        onStart: onIconCancelClickStart,
+        onClick: onCancel,
+        className: "vkuiSearch__icon"
+    }, platform === _platform.Platform.IOS ? /*#__PURE__*/ _react.createElement(_icons.Icon16Clear, null) : /*#__PURE__*/ _react.createElement(_icons.Icon24Cancel, null))), platform === _platform.Platform.IOS && after && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSearch__after-in",
+        onClick: onCancel
+    }, after))));
 };
-exports.Search = Search;
+
 //# sourceMappingURL=Search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":["sizeYClassNames","none","SizeType","REGULAR","SearchPlaceholderTypography","children","restProps","platform","usePlatform","Platform","IOS","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChangeProp","onChange","valueProp","value","inputProps","inputRef","useExternRef","React","useState","isFocused","setFocused","useEnsuredControl","useAdaptivity","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","classNames","COMPACT"],"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 { 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 { Touch, TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Search.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Search--sizeY-none'],\n  [SizeType.REGULAR]: styles['Search--sizeY-regular'],\n};\n\nconst SearchPlaceholderTypography = ({\n  children,\n  ...restProps\n}: React.HTMLAttributes<HTMLElement>) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    default:\n      return (\n        <Headline {...restProps} weight=\"3\">\n          {children}\n        </Headline>\n      );\n  }\n};\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}\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  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\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    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\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      onCancel();\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        styles['Search'],\n        platform === Platform.IOS && styles['Search--ios'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__in']}>\n        <div className={styles['Search__width']} />\n        <label className={styles['Search__control']}>\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-width']}>{after}</div>\n          )}\n          <div className={styles['Search__placeholder']}>\n            <div className={styles['Search__placeholder-in']}>\n              {before}\n              <SearchPlaceholderTypography className={styles['Search__placeholder-text']}>\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === Platform.IOS && after && (\n              <div className={styles['Search__after-width']}>{after}</div>\n            )}\n          </div>\n        </label>\n        <div className={styles['Search__after']}>\n          <div className={styles['Search__icons']}>\n            {icon && (\n              <Touch onStart={onIconClickStart} className={styles['Search__icon']}>\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch\n                onStart={onIconCancelClickStart}\n                onClick={onCancel}\n                className={styles['Search__icon']}\n              >\n                {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-in']} onClick={onCancel}>\n              {after}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"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 { 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 { Touch, TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Search.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Search--sizeY-none'],\n  [SizeType.REGULAR]: styles['Search--sizeY-regular'],\n};\n\nconst SearchPlaceholderTypography = ({\n  children,\n  ...restProps\n}: React.HTMLAttributes<HTMLElement>) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    default:\n      return (\n        <Headline {...restProps} weight=\"3\">\n          {children}\n        </Headline>\n      );\n  }\n};\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}\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  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\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    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\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      onCancel();\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        styles['Search'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__in']}>\n        <div className={styles['Search__width']} />\n        <label className={styles['Search__control']}>\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-width']}>{after}</div>\n          )}\n          <div className={styles['Search__placeholder']}>\n            <div className={styles['Search__placeholder-in']}>\n              {before}\n              <SearchPlaceholderTypography className={styles['Search__placeholder-text']}>\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === Platform.IOS && after && (\n              <div className={styles['Search__after-width']}>{after}</div>\n            )}\n          </div>\n        </label>\n        <div className={styles['Search__after']}>\n          <div className={styles['Search__icons']}>\n            {icon && (\n              <Touch onStart={onIconClickStart} className={styles['Search__icon']}>\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch\n                onStart={onIconCancelClickStart}\n                onClick={onCancel}\n                className={styles['Search__icon']}\n              >\n                {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-in']} onClick={onCancel}>\n              {after}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["Search","sizeYClassNames","none","SizeType","REGULAR","SearchPlaceholderTypography","children","restProps","platform","usePlatform","Platform","IOS","Title","level","weight","Headline","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","inputProps","inputRef","useExternRef","React","useState","isFocused","setFocused","useEnsuredControl","useAdaptivity","sizeY","onFocus","e","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","classNames","COMPACT","label","input","type","ref","Touch","onStart","onClick","Icon16Clear","Icon24Cancel"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HasRootRef } from '../../types';
-export declare type SegmentedControlValue = string | number | undefined;
+export type SegmentedControlValue = string | number | undefined;
 export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {
     label: React.ReactChild;
     value: SegmentedControlValue;