@vkontakte/vkui 5.0.2 → 5.1.0

package/dist/cjs/components/ScreenSpinner/Icon48DoneOutline.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const Icon48DoneOutline: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Icon48DoneOutline.js","names":["Icon48DoneOutline","props"],"sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M9 24L19 34L39 14\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n"],"mappings":";;;;;;;;;AAAA;AAEO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAoC;EAAA,oBACpE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,CAAC,EAAC,mBAAmB;IACrB,MAAM,EAAC,cAAc;IACrB,WAAW,EAAC,KAAK;IACjB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACE;AAAA,CACP;AAAC"}
+{"version":3,"file":"Icon48DoneOutline.js","names":["Icon48DoneOutline","props"],"sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M9 24L19 34L39 14\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n"],"mappings":";;;;;;;;;AAAA;AAEO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAoC;EAAA,oBACpE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,CAAC,EAAC,mBAAmB;IACrB,MAAM,EAAC,cAAc;IACrB,WAAW,EAAC,KAAK;IACjB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACE;AAAA,CACP;AAAC"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { SpinnerProps } from "../Spinner/Spinner";
+import { SpinnerProps } from '../Spinner/Spinner';
 export interface ScreenSpinnerProps extends SpinnerProps {
-    state?: "loading" | "cancelable" | "done" | "error";
+    state?: 'loading' | 'cancelable' | 'done' | 'error';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner

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

@@ -15,7 +15,7 @@ var _Icon48DoneOutline = require("./Icon48DoneOutline");
 var _Icon48CancelCircle = require("./Icon48CancelCircle");
 var _PopoutWrapper = require("../PopoutWrapper/PopoutWrapper");
 var _ScrollContext = require("../AppRoot/ScrollContext");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["style", "className", "state", "size", "aria-label", "onClick"];
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
@@ -24,14 +24,14 @@ var ScreenSpinner = function ScreenSpinner(_ref) {
   var style = _ref.style,
     className = _ref.className,
     _ref$state = _ref.state,
-    state = _ref$state === void 0 ? "loading" : _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,
+    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 hideSpinner = state === 'done' || state === 'error';
   var Icon = {
     loading: function loading() {
       return null;
@@ -43,7 +43,7 @@ var ScreenSpinner = function ScreenSpinner(_ref) {
   (0, _ScrollContext.useScrollLock)();
   return /*#__PURE__*/React.createElement(_PopoutWrapper.PopoutWrapper, {
     hasMask: false,
-    className: (0, _classNames.classNamesString)("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", styles["ScreenSpinner--state-".concat(state)], className),
+    className: (0, _vkjs.classNames)("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", styles["ScreenSpinner--state-".concat(state)], className),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiScreenSpinner__container",

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","classNamesString","styles"],"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Spinner, SpinnerProps } from \"../Spinner/Spinner\";\nimport { Icon24Cancel } from \"@vkontakte/icons\";\nimport { Icon48DoneOutline } from \"./Icon48DoneOutline\";\nimport { Icon48CancelCircle } from \"./Icon48CancelCircle\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { useScrollLock } from \"../AppRoot/ScrollContext\";\nimport { classNamesString } from \"../../lib/classNames\";\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={classNamesString(\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,4BAAgB,uBAEzBV,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,"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 { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { classNames } from '@vkontakte/vkjs';\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;AAA6C;AAO7C;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"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { HasRef } from "../../types";
-import { VKUITouchEvent } from "../../lib/touch";
+import * as React from 'react';
+import { HasRef } from '../../types';
+import { VKUITouchEvent } from '../../lib/touch';
 export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
     /**
      * iOS only. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
@@ -14,4 +14,4 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, ...inputProps }: SearchProps) => JSX.Element;
+export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, ...inputProps }: SearchProps) => JSX.Element;

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

@@ -10,12 +10,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _icons = require("@vkontakte/icons");
 var _platform = require("../../lib/platform");
 var _Touch = require("../Touch/Touch");
-var _utils = require("../../lib/utils");
 var _Title = require("../Typography/Title/Title");
 var _Headline = require("../Typography/Headline/Headline");
 var _useExternRef = require("../../hooks/useExternRef");
@@ -23,7 +22,7 @@ var _useEnsuredControl3 = require("../../hooks/useEnsuredControl");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _excluded = ["children"],
-  _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "icon", "onIconClick", "style", "autoComplete"];
+  _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "icon", "onIconClick", "style", "autoComplete", "onChange", "value"];
 var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
   var children = _ref.children,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -48,26 +47,30 @@ var Search = function Search(_ref2) {
     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,
+    defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
     _ref2$placeholder = _ref2.placeholder,
-    placeholder = _ref2$placeholder === void 0 ? "Поиск" : _ref2$placeholder,
+    placeholder = _ref2$placeholder === void 0 ? 'Поиск' : _ref2$placeholder,
     _ref2$after = _ref2.after,
-    after = _ref2$after === void 0 ? "Отмена" : _ref2$after,
+    after = _ref2$after === void 0 ? 'Отмена' : _ref2$after,
     getRef = _ref2.getRef,
     icon = _ref2.icon,
     _ref2$onIconClick = _ref2.onIconClick,
-    onIconClick = _ref2$onIconClick === void 0 ? _utils.noop : _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,
+    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)(inputProps, {
-      defaultValue: defaultValue
+  var _useEnsuredControl = (0, _useEnsuredControl3.useEnsuredControl)({
+      defaultValue: defaultValue,
+      onChange: onChangeProp,
+      value: valueProp
     }),
     _useEnsuredControl2 = (0, _slicedToArray2.default)(_useEnsuredControl, 2),
     value = _useEnsuredControl2[0],
@@ -86,9 +89,9 @@ var Search = function Search(_ref2) {
   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", {
+    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);
@@ -103,7 +106,7 @@ var Search = function Search(_ref2) {
     onCancel();
   }, [inputRef, onCancel]);
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiSearch", platform === _platform.Platform.IOS && "vkuiSearch--ios", (0, _getSizeYClassName.getSizeYClassName)("vkuiSearch", sizeY), isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
+    className: (0, _vkjs.classNames)("vkuiSearch", platform === _platform.Platform.IOS && "vkuiSearch--ios", (0, _getSizeYClassName.getSizeYClassName)("vkuiSearch", 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"
@@ -132,8 +135,7 @@ var Search = function Search(_ref2) {
   }, placeholder)), isFocused && platform === _platform.Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
     className: "vkuiSearch__after-width"
   }, after))), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after",
-    onClick: onCancel
+    className: "vkuiSearch__after"
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiSearch__icons"
   }, icon && /*#__PURE__*/React.createElement(_Touch.Touch, {
@@ -141,9 +143,11 @@ var Search = function Search(_ref2) {
     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"
+    className: "vkuiSearch__after-in",
+    onClick: onCancel
   }, after))));
 };
 exports.Search = Search;

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":["SearchPlaceholderTypography","children","restProps","platform","usePlatform","Platform","IOS","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","inputProps","inputRef","useExternRef","React","useState","isFocused","setFocused","useEnsuredControl","value","onChange","useAdaptivity","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","classNamesString","getSizeYClassName"],"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  Icon16SearchOutline,\n  Icon16Clear,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef } from \"../../types\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { VKUITouchEvent } from \"../../lib/touch\";\nimport { noop } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Search.module.css\";\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  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\n  const { sizeY } = 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={classNamesString(\n        styles[\"Search\"],\n        platform === Platform.IOS && styles[\"Search--ios\"],\n        getSizeYClassName(styles[\"Search\"], 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\n                className={styles[\"Search__placeholder-text\"]}\n              >\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\"]} onClick={onCancel}>\n          <div className={styles[\"Search__icons\"]}>\n            {icon && (\n              <Touch\n                onStart={onIconClickStart}\n                className={styles[\"Search__icon\"]}\n              >\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch\n                onStart={onIconCancelClickStart}\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\"]}>{after}</div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Search.js","names":["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","getSizeYClassName"],"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from '@vkontakte/icons';\nimport { Platform } from '../../lib/platform';\nimport { HasRef } from '../../types';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { Title } from '../Typography/Title/Title';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Search.module.css';\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 } = 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        getSizeYClassName(styles['Search'], 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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"}

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

@@ -1,13 +1,13 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export declare type SegmentedControlValue = string | number | undefined;
-export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, "label"> {
+export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {
     label: React.ReactChild;
     value: SegmentedControlValue;
 }
-export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, HasRootRef<HTMLDivElement> {
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, HasRootRef<HTMLDivElement> {
     options: SegmentedControlOptionInterface[];
-    size?: "m" | "l";
+    size?: 'm' | 'l';
     name?: string;
     onChange?: (value: SegmentedControlValue) => void;
     value?: SegmentedControlValue;
@@ -16,4 +16,4 @@ export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDiv
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export declare const SegmentedControl: ({ size, name, options, getRootRef, onChange, value: valueProp, defaultValue, children, className, ...restProps }: SegmentedControlProps) => JSX.Element;
+export declare const SegmentedControl: ({ size, name, options, getRootRef, defaultValue, children, className, onChange: onChangeProp, value: valueProp, ...restProps }: SegmentedControlProps) => JSX.Element;

package/dist/cjs/components/SegmentedControl/SegmentedControl.js

@@ -10,17 +10,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _utils = require("../../lib/utils");
 var _useId = require("../../hooks/useId");
 var _warnOnce = require("../../lib/warnOnce");
 var _SegmentedControlOption = require("./SegmentedControlOption/SegmentedControlOption");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-var _excluded = ["size", "name", "options", "getRootRef", "onChange", "value", "defaultValue", "children", "className"],
+var _useEnsuredControl = require("../../hooks/useEnsuredControl");
+var _excluded = ["size", "name", "options", "getRootRef", "defaultValue", "children", "className", "onChange", "value"],
   _excluded2 = ["label", "className"];
-var warn = (0, _warnOnce.warnOnce)("SegmentedControl");
+var warn = (0, _warnOnce.warnOnce)('SegmentedControl');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
@@ -28,59 +28,50 @@ var warn = (0, _warnOnce.warnOnce)("SegmentedControl");
 var SegmentedControl = function SegmentedControl(_ref) {
   var _options$;
   var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "l" : _ref$size,
+    size = _ref$size === void 0 ? 'l' : _ref$size,
     name = _ref.name,
     options = _ref.options,
     getRootRef = _ref.getRootRef,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? _utils.noop : _ref$onChange,
-    valueProp = _ref.value,
-    defaultValue = _ref.defaultValue,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value : _ref$defaultValue,
     children = _ref.children,
     className = _ref.className,
+    onChangeProp = _ref.onChange,
+    valueProp = _ref.value,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var id = (0, _useId.useId)();
+  var _useCustomEnsuredCont = (0, _useEnsuredControl.useCustomEnsuredControl)({
+      onChange: onChangeProp,
+      value: valueProp,
+      defaultValue: defaultValue
+    }),
+    _useCustomEnsuredCont2 = (0, _slicedToArray2.default)(_useCustomEnsuredCont, 2),
+    value = _useCustomEnsuredCont2[0],
+    _onChange = _useCustomEnsuredCont2[1];
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
     sizeY = _useAdaptivity.sizeY;
-  var initialValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value;
-  if (process.env.NODE_ENV === "development") {
-    if (valueProp !== undefined && defaultValue !== undefined) {
-      warn("SegmentedControl должен быть либо управляемым, либо неуправляемым" + "(укажите либо свойство value, либо свойство defaultValue, но не оба).", "error");
-    }
-  }
   var _React$useState = React.useState(0),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     activeOptionIdx = _React$useState2[0],
     updateActiveOptionIdx = _React$useState2[1];
-  var _React$useState3 = React.useState(initialValue),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    valueLocal = _React$useState4[0],
-    updateValueLocal = _React$useState4[1];
-  var value = valueProp !== null && valueProp !== void 0 ? valueProp : valueLocal;
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     var _activeOptionIdx = options.findIndex(function (option) {
       return option.value === value;
     });
-    if (_activeOptionIdx === -1 && process.env.NODE_ENV === "development") {
-      warn("defaultValue: такого значения нет среди опций!", "error");
+    if (_activeOptionIdx === -1 && process.env.NODE_ENV === 'development') {
+      warn('defaultValue: такого значения нет среди опций!', 'error');
     }
     updateActiveOptionIdx(_activeOptionIdx);
   }, [value, options]);
   var translateX = "translateX(".concat(100 * activeOptionIdx, "%)");
-  var handleOnChange = function handleOnChange(value) {
-    if (valueProp === undefined) {
-      updateValueLocal(value);
-    }
-    onChange(value);
-  };
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiSegmentedControl", (0, _getSizeYClassName.getSizeYClassName)("vkuiSegmentedControl", sizeY), styles["SegmentedControl--size-".concat(size)], className),
+    className: (0, _vkjs.classNames)("vkuiSegmentedControl", (0, _getSizeYClassName.getSizeYClassName)("vkuiSegmentedControl", sizeY), styles["SegmentedControl--size-".concat(size)], className),
     ref: getRootRef
   }), /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
     className: "vkuiSegmentedControl__in"
   }, activeOptionIdx > -1 && /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": "true",
+    "aria-hidden": true,
     className: "vkuiSegmentedControl__slider",
     style: {
       width: "".concat(100 / options.length, "%"),
@@ -94,11 +85,11 @@ var SegmentedControl = function SegmentedControl(_ref) {
     return /*#__PURE__*/React.createElement(_SegmentedControlOption.SegmentedControlOption, (0, _extends2.default)({
       key: "".concat(optionProps.value)
     }, optionProps, {
-      className: (0, _classNames.classNamesString)("vkuiSegmentedControl__option", optionClassName),
+      className: (0, _vkjs.classNames)("vkuiSegmentedControl__option", optionClassName),
       name: name !== null && name !== void 0 ? name : id,
       checked: value === optionProps.value,
       onChange: function onChange() {
-        return handleOnChange(optionProps.value);
+        return _onChange(optionProps.value);
       }
     }), label);
   })));

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":["warn","warnOnce","SegmentedControl","size","name","options","getRootRef","onChange","noop","valueProp","value","defaultValue","children","className","restProps","id","useId","useAdaptivity","sizeY","initialValue","process","env","NODE_ENV","undefined","React","useState","activeOptionIdx","updateActiveOptionIdx","valueLocal","updateValueLocal","useIsomorphicLayoutEffect","_activeOptionIdx","findIndex","option","translateX","handleOnChange","classNamesString","getSizeYClassName","styles","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps"],"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { noop } from \"../../lib/utils\";\nimport { useId } from \"../../hooks/useId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { SegmentedControlOption } from \"./SegmentedControlOption/SegmentedControlOption\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"label\"> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: \"m\" | \"l\";\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce(\"SegmentedControl\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = \"l\",\n  name,\n  options,\n  getRootRef,\n  onChange = noop,\n  value: valueProp,\n  defaultValue,\n  children,\n  className,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const { sizeY } = useAdaptivity();\n  const initialValue = defaultValue ?? options[0]?.value;\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (valueProp !== undefined && defaultValue !== undefined) {\n      warn(\n        \"SegmentedControl должен быть либо управляемым, либо неуправляемым\" +\n          \"(укажите либо свойство value, либо свойство defaultValue, но не оба).\",\n        \"error\"\n      );\n    }\n  }\n\n  const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);\n  const [valueLocal, updateValueLocal] =\n    React.useState<SegmentedControlValue>(initialValue);\n\n  const value = valueProp ?? valueLocal;\n\n  useIsomorphicLayoutEffect(() => {\n    const _activeOptionIdx = options.findIndex(\n      (option) => option.value === value\n    );\n\n    if (_activeOptionIdx === -1 && process.env.NODE_ENV === \"development\") {\n      warn(\"defaultValue: такого значения нет среди опций!\", \"error\");\n    }\n\n    updateActiveOptionIdx(_activeOptionIdx);\n  }, [value, options]);\n\n  const translateX = `translateX(${100 * activeOptionIdx}%)`;\n\n  const handleOnChange = (value: SegmentedControlValue) => {\n    if (valueProp === undefined) {\n      updateValueLocal(value);\n    }\n    onChange(value);\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"SegmentedControl\"],\n        getSizeYClassName(styles[\"SegmentedControl\"], sizeY),\n        styles[`SegmentedControl--size-${size}`],\n        className\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles[\"SegmentedControl__in\"]}>\n        {activeOptionIdx > -1 && (\n          <div\n            aria-hidden=\"true\"\n            className={styles[\"SegmentedControl__slider\"]}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(\n          ({ label, className: optionClassName, ...optionProps }) => (\n            <SegmentedControlOption\n              key={`${optionProps.value}`}\n              {...optionProps}\n              className={classNamesString(\n                styles[\"SegmentedControl__option\"],\n                optionClassName\n              )}\n              name={name ?? id}\n              checked={value === optionProps.value}\n              onChange={() => handleOnChange(optionProps.value)}\n            >\n              {label}\n            </SegmentedControlOption>\n          )\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","names":["warn","warnOnce","SegmentedControl","size","name","options","getRootRef","defaultValue","value","children","className","onChangeProp","onChange","valueProp","restProps","id","useId","useCustomEnsuredControl","useAdaptivity","sizeY","React","useState","activeOptionIdx","updateActiveOptionIdx","useIsomorphicLayoutEffect","_activeOptionIdx","findIndex","option","process","env","NODE_ENV","translateX","classNames","getSizeYClassName","styles","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps"],"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useId } from '../../hooks/useId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport { HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport styles from './SegmentedControl.module.css';\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  getRootRef,\n  defaultValue = options[0]?.value,\n  children,\n  className,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY } = useAdaptivity();\n\n  const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const _activeOptionIdx = options.findIndex((option) => option.value === value);\n\n    if (_activeOptionIdx === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n\n    updateActiveOptionIdx(_activeOptionIdx);\n  }, [value, options]);\n\n  const translateX = `translateX(${100 * activeOptionIdx}%)`;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        getSizeYClassName(styles['SegmentedControl'], sizeY),\n        styles[`SegmentedControl--size-${size}`],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {activeOptionIdx > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { VisuallyHiddenInputProps } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
+import { VisuallyHiddenInputProps } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */

package/dist/cjs/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useAdaptivity2 = require("../../../hooks/useAdaptivity");
 var _useFocusVisible2 = require("../../../hooks/useFocusVisible");
 var _callMultiple = require("../../../lib/callMultiple");
-var _classNames = require("../../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _FocusVisible = require("../../FocusVisible/FocusVisible");
 var _VisuallyHiddenInput = require("../../VisuallyHiddenInput/VisuallyHiddenInput");
 var _getSizeYClassName = require("../../../helpers/getSizeYClassName");
@@ -32,14 +32,14 @@ var SegmentedControlOption = function SegmentedControlOption(_ref) {
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
     sizeY = _useAdaptivity.sizeY;
   return /*#__PURE__*/React.createElement("label", {
-    className: (0, _classNames.classNamesString)("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", focusVisible && "vkuiSegmentedControlOption--focus-visible", className),
+    className: (0, _vkjs.classNames)("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", focusVisible && "vkuiSegmentedControlOption--focus-visible", className),
     style: style
   }, /*#__PURE__*/React.createElement(_VisuallyHiddenInput.VisuallyHiddenInput, (0, _extends2.default)({}, restProps, {
     type: "radio",
     onBlur: (0, _callMultiple.callMultiple)(onBlur, restProps.onBlur),
     onFocus: (0, _callMultiple.callMultiple)(onFocus, restProps.onFocus)
   })), /*#__PURE__*/React.createElement("span", {
-    className: (0, _classNames.classNamesString)("vkuiSegmentedControlOption__content", (0, _getSizeYClassName.getSizeYClassName)("vkuiSegmentedControlOption__content", sizeY))
+    className: (0, _vkjs.classNames)("vkuiSegmentedControlOption__content", (0, _getSizeYClassName.getSizeYClassName)("vkuiSegmentedControlOption__content", sizeY))
   }, children), /*#__PURE__*/React.createElement(_FocusVisible.FocusVisible, {
     mode: "inside"
   }));

package/dist/cjs/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlOption.js","names":["SegmentedControlOption","className","style","children","restProps","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeY","classNamesString","checked","callMultiple","getSizeYClassName"],"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { useFocusVisible } from \"../../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../../lib/callMultiple\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport { FocusVisible } from \"../../FocusVisible/FocusVisible\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { getSizeYClassName } from \"../../../helpers/getSizeYClassName\";\nimport styles from \"./SegmentedControlOption.module.css\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <label\n      className={classNamesString(\n        styles[\"SegmentedControlOption\"],\n        restProps.checked && styles[\"SegmentedControlOption--checked\"],\n        focusVisible && styles[\"SegmentedControlOption--focus-visible\"],\n        className\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNamesString(\n          styles[\"SegmentedControlOption__content\"],\n          getSizeYClassName(styles[\"SegmentedControlOption__content\"], sizeY)\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AAAuE;AAGvE;AACA;AACA;AACO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKH;EAAA,IAJ9BC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,uBAA0C,IAAAC,iCAAe,GAAE;IAAnDC,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EACrC,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAE,IAAAC,4BAAgB,gCAEzBP,SAAS,CAACQ,OAAO,yCAA6C,EAC9DN,YAAY,+CAAmD,EAC/DL,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,wCAAmB,6BACdE,SAAS;IACb,IAAI,EAAC,OAAO;IACZ,MAAM,EAAE,IAAAS,0BAAY,EAACN,MAAM,EAAEH,SAAS,CAACG,MAAM,CAAE;IAC/C,OAAO,EAAE,IAAAM,0BAAY,EAACL,OAAO,EAAEJ,SAAS,CAACI,OAAO;EAAE,GAClD,eACF;IACE,SAAS,EAAE,IAAAG,4BAAgB,yCAEzB,IAAAG,oCAAiB,yCAA4CJ,KAAK,CAAC;EACnE,GAEDP,QAAQ,CACJ,eACP,oBAAC,0BAAY;IAAC,IAAI,EAAC;EAAQ,EAAG,CACxB;AAEZ,CAAC;AAAC"}
+{"version":3,"file":"SegmentedControlOption.js","names":["SegmentedControlOption","className","style","children","restProps","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeY","classNames","checked","callMultiple","getSizeYClassName"],"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { getSizeYClassName } from '../../../helpers/getSizeYClassName';\nimport styles from './SegmentedControlOption.module.css';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        focusVisible && styles['SegmentedControlOption--focus-visible'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          getSizeYClassName(styles['SegmentedControlOption__content'], sizeY),\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AAAuE;AAGvE;AACA;AACA;AACO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKH;EAAA,IAJ9BC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,uBAA0C,IAAAC,iCAAe,GAAE;IAAnDC,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EACrC,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,gCAEnBP,SAAS,CAACQ,OAAO,yCAA6C,EAC9DN,YAAY,+CAAmD,EAC/DL,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,wCAAmB,6BACdE,SAAS;IACb,IAAI,EAAC,OAAO;IACZ,MAAM,EAAE,IAAAS,0BAAY,EAACN,MAAM,EAAEH,SAAS,CAACG,MAAM,CAAE;IAC/C,OAAO,EAAE,IAAAM,0BAAY,EAACL,OAAO,EAAEJ,SAAS,CAACI,OAAO;EAAE,GAClD,eACF;IACE,SAAS,EAAE,IAAAG,gBAAU,yCAEnB,IAAAG,oCAAiB,yCAA4CJ,KAAK,CAAC;EACnE,GAEDP,QAAQ,CACJ,eACP,oBAAC,0BAAY;IAAC,IAAI,EAAC;EAAQ,EAAG,CACxB;AAEZ,CAAC;AAAC"}

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { SelectProps } from "../CustomSelect/CustomSelect";
-export declare type SelectType = "default" | "plain" | "accent";
+import * as React from 'react';
+import { SelectProps } from '../CustomSelect/CustomSelect';
+export declare type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectTypography
  */
-export declare const SelectTypography: ({ selectType, children, className, ...restProps }: React.PropsWithChildren<Pick<SelectProps, "selectType" | "className">>) => JSX.Element;
+export declare const SelectTypography: ({ selectType, children, className, ...restProps }: React.PropsWithChildren<Pick<SelectProps, 'selectType' | 'className'>>) => JSX.Element;
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */

package/dist/cjs/components/Select/Select.js

@@ -14,7 +14,7 @@ var _CustomSelect = require("../CustomSelect/CustomSelect");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
 var _usePlatform = require("../../hooks/usePlatform");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _excluded = ["selectType", "children", "className"],
@@ -24,7 +24,7 @@ var _excluded = ["selectType", "children", "className"],
  */
 var SelectTypography = function SelectTypography(_ref) {
   var _ref$selectType = _ref.selectType,
-    selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
+    selectType = _ref$selectType === void 0 ? 'default' : _ref$selectType,
     children = _ref.children,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -32,7 +32,7 @@ var SelectTypography = function SelectTypography(_ref) {
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
     sizeY = _useAdaptivity.sizeY;
   return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiSelectTypography", (0, _getPlatformClassName.getPlatformClassName)("vkuiSelectTypography", platform), (0, _getSizeYClassName.getSizeYClassName)("vkuiSelectTypography", sizeY), styles["SelectTypography--selectType-".concat(selectType)], className)
+    className: (0, _vkjs.classNames)("vkuiSelectTypography", (0, _getPlatformClassName.getPlatformClassName)("vkuiSelectTypography", platform), (0, _getSizeYClassName.getSizeYClassName)("vkuiSelectTypography", sizeY), styles["SelectTypography--selectType-".concat(selectType)], className)
   }, restProps), children);
 };
 
@@ -50,12 +50,12 @@ var Select = function Select(_ref2) {
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
   return /*#__PURE__*/React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/React.createElement(_CustomSelect.CustomSelect, (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiSelect__custom", className),
+    className: (0, _vkjs.classNames)("vkuiSelect__custom", className),
     options: options,
     popupDirection: popupDirection,
     renderOption: renderOption
   }, props)), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/React.createElement(_NativeSelect.NativeSelect, (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiSelect__native", className)
+    className: (0, _vkjs.classNames)("vkuiSelect__native", className)
   }, props), options.map(function (_ref3) {
     var label = _ref3.label,
       value = _ref3.value;