@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/Search/Search.js

@@ -1,9 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children"],
-  _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "icon", "onIconClick", "style", "autoComplete", "onChange", "value"];
 import * as React from 'react';
 import { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';
 import { classNames, noop } from '@vkontakte/vkjs';
@@ -16,136 +10,113 @@ import { Platform } from '../../lib/platform';
 import { Touch } from '../Touch/Touch';
 import { Headline } from '../Typography/Headline/Headline';
 import { Title } from '../Typography/Title/Title';
-import "./Search.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiSearch--sizeY-none"
-}, SizeType.REGULAR, "vkuiSearch--sizeY-regular");
-var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
-  var children = _ref.children,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  switch (platform) {
-    case Platform.IOS:
-      return /*#__PURE__*/React.createElement(Title, _extends({}, restProps, {
-        level: "3",
-        weight: "3"
-      }), children);
-    default:
-      return /*#__PURE__*/React.createElement(Headline, _extends({}, restProps, {
-        weight: "3"
-      }), children);
-  }
+import styles from './Search.module.css';
+const sizeYClassNames = {
+    none: styles['Search--sizeY-none'],
+    [SizeType.REGULAR]: styles['Search--sizeY-regular']
+};
+const SearchPlaceholderTypography = ({ children , ...restProps })=>{
+    const platform = usePlatform();
+    switch(platform){
+        case Platform.IOS:
+            return /*#__PURE__*/ React.createElement(Title, {
+                ...restProps,
+                level: "3",
+                weight: "3"
+            }, children);
+        default:
+            return /*#__PURE__*/ React.createElement(Headline, {
+                ...restProps,
+                weight: "3"
+            }, children);
+    }
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
- */
-export var Search = function Search(_ref2) {
-  var _ref2$before = _ref2.before,
-    before = _ref2$before === void 0 ? /*#__PURE__*/React.createElement(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 ? 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 = _objectWithoutProperties(_ref2, _excluded2);
-  var inputRef = useExternRef(getRef);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isFocused = _React$useState2[0],
-    setFocused = _React$useState2[1];
-  var _useEnsuredControl = useEnsuredControl({
-      defaultValue: defaultValue,
-      onChange: onChangeProp,
-      value: valueProp
-    }),
-    _useEnsuredControl2 = _slicedToArray(_useEnsuredControl, 2),
-    value = _useEnsuredControl2[0],
-    onChange = _useEnsuredControl2[1];
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var platform = 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
+ */ export const Search = ({ before =/*#__PURE__*/ React.createElement(Icon16SearchOutline, null) , className , defaultValue ='' , placeholder ='Поиск' , after ='Отмена' , getRef , icon , onIconClick =noop , style , autoComplete ='off' , onChange: onChangeProp , value: valueProp , ...inputProps })=>{
+    const inputRef = useExternRef(getRef);
+    const [isFocused, setFocused] = React.useState(false);
+    const [value, onChange] = useEnsuredControl({
+        defaultValue,
+        onChange: onChangeProp,
+        value: valueProp
     });
-    (_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: classNames("vkuiSearch", platform === Platform.IOS && "vkuiSearch--ios", sizeY !== 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", _extends({
-    type: "search"
-  }, inputProps, {
-    autoComplete: autoComplete,
-    ref: inputRef,
-    className: "vkuiSearch__input",
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onChange: onChange,
-    value: value
-  })), 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.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, {
-    onStart: onIconClickStart,
-    className: "vkuiSearch__icon"
-  }, icon), !!value && /*#__PURE__*/React.createElement(Touch, {
-    onStart: onIconCancelClickStart,
-    onClick: onCancel,
-    className: "vkuiSearch__icon"
-  }, platform === Platform.IOS ? /*#__PURE__*/React.createElement(Icon16Clear, null) : /*#__PURE__*/React.createElement(Icon24Cancel, null))), platform === Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after-in",
-    onClick: onCancel
-  }, after))));
+    const { sizeY ='none'  } = useAdaptivity();
+    const platform = usePlatform();
+    const onFocus = (e)=>{
+        setFocused(true);
+        inputProps.onFocus && inputProps.onFocus(e);
+    };
+    const onBlur = (e)=>{
+        setFocused(false);
+        inputProps.onBlur && inputProps.onBlur(e);
+    };
+    const onCancel = React.useCallback(()=>{
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+        nativeInputValueSetter?.call(inputRef.current, '');
+        const ev2 = new Event('input', {
+            bubbles: true
+        });
+        inputRef.current?.dispatchEvent(ev2);
+    }, [
+        inputRef
+    ]);
+    const onIconClickStart = React.useCallback((e)=>onIconClick(e.originalEvent), [
+        onIconClick
+    ]);
+    const onIconCancelClickStart = React.useCallback((e)=>{
+        e.originalEvent.preventDefault();
+        inputRef.current?.focus();
+        onCancel();
+    }, [
+        inputRef,
+        onCancel
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['Search'], sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], isFocused && styles['Search--focused'], value && styles['Search--has-value'], after && styles['Search--has-after'], icon && styles['Search--has-icon'], className),
+        style: style
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Search__in']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Search__width']
+    }), /*#__PURE__*/ React.createElement("label", {
+        className: styles['Search__control']
+    }, /*#__PURE__*/ React.createElement("input", {
+        type: "search",
+        ...inputProps,
+        autoComplete: autoComplete,
+        ref: inputRef,
+        className: styles['Search__input'],
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onChange: onChange,
+        value: value
+    }), platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
+        className: styles['Search__after-width']
+    }, after), /*#__PURE__*/ React.createElement("div", {
+        className: styles['Search__placeholder']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Search__placeholder-in']
+    }, before, /*#__PURE__*/ React.createElement(SearchPlaceholderTypography, {
+        className: styles['Search__placeholder-text']
+    }, placeholder)), isFocused && platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
+        className: styles['Search__after-width']
+    }, after))), /*#__PURE__*/ React.createElement("div", {
+        className: styles['Search__after']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Search__icons']
+    }, icon && /*#__PURE__*/ React.createElement(Touch, {
+        onStart: onIconClickStart,
+        className: styles['Search__icon']
+    }, icon), !!value && /*#__PURE__*/ React.createElement(Touch, {
+        onStart: onIconCancelClickStart,
+        onClick: onCancel,
+        className: styles['Search__icon']
+    }, platform === Platform.IOS ? /*#__PURE__*/ React.createElement(Icon16Clear, null) : /*#__PURE__*/ React.createElement(Icon24Cancel, null))), platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
+        className: styles['Search__after-in'],
+        onClick: onCancel
+    }, after))));
 };
+
 //# sourceMappingURL=Search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Touch","Headline","Title","sizeYClassNames","none","REGULAR","SearchPlaceholderTypography","children","restProps","platform","IOS","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChangeProp","onChange","valueProp","value","inputProps","inputRef","useState","isFocused","setFocused","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","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":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,EAAEC,mBAAmB,EAAEC,YAAY,QAAQ,kBAAkB;AACjF,SAASC,UAAU,EAAEC,IAAI,QAAQ,iBAAiB;AAClD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAG7C,SAASC,KAAK,QAAoB,gBAAgB;AAClD,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,KAAK,QAAQ,2BAA2B;AAAC;AAGlD,IAAMC,eAAe;EACnBC,IAAI;AAA8B,GACjCN,QAAQ,CAACO,OAAO,8BAClB;AAED,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA2B,OAGQ;EAAA,IAFvCC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,QAAQ,GAAGZ,WAAW,EAAE;EAE9B,QAAQY,QAAQ;IACd,KAAKV,QAAQ,CAACW,GAAG;MACf,oBACE,oBAAC,KAAK,eAAKF,SAAS;QAAE,KAAK,EAAC,GAAG;QAAC,MAAM,EAAC;MAAG,IACvCD,QAAQ,CACH;IAEZ;MACE,oBACE,oBAAC,QAAQ,eAAKC,SAAS;QAAE,MAAM,EAAC;MAAG,IAChCD,QAAQ,CACA;EACX;AAER,CAAC;AAeD;AACA;AACA;AACA,OAAO,IAAMI,MAAM,GAAG,SAATA,MAAM,QAcA;EAAA,yBAbjBC,MAAM;IAANA,MAAM,0CAAG,oBAAC,mBAAmB,OAAG;IAChCC,SAAS,SAATA,SAAS;IAAA,2BACTC,YAAY;IAAZA,YAAY,mCAAG,EAAE;IAAA,0BACjBC,WAAW;IAAXA,WAAW,kCAAG,OAAO;IAAA,oBACrBC,KAAK;IAALA,KAAK,4BAAG,QAAQ;IAChBC,MAAM,SAANA,MAAM;IACNC,IAAI,SAAJA,IAAI;IAAA,0BACJC,WAAW;IAAXA,WAAW,kCAAG1B,IAAI;IAClB2B,KAAK,SAALA,KAAK;IAAA,2BACLC,YAAY;IAAZA,YAAY,mCAAG,KAAK;IACVC,YAAY,SAAtBC,QAAQ;IACDC,SAAS,SAAhBC,KAAK;IACFC,UAAU;EAEb,IAAMC,QAAQ,GAAG/B,YAAY,CAACqB,MAAM,CAAC;EACrC,sBAAgC7B,KAAK,CAACwC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,SAAS;IAAEC,UAAU;EAC5B,yBAA0BnC,iBAAiB,CAAC;MAC1CmB,YAAY,EAAZA,YAAY;MACZS,QAAQ,EAAED,YAAY;MACtBG,KAAK,EAAED;IACT,CAAC,CAAC;IAAA;IAJKC,KAAK;IAAEF,QAAQ;EAKtB,qBAA2B7B,aAAa,EAAE;IAAA,sCAAlCqC,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,IAAMtB,QAAQ,GAAGZ,WAAW,EAAE;EAE9B,IAAMmC,OAAO,GAAG,SAAVA,OAAO,CAAIC,CAAqC,EAAK;IACzDH,UAAU,CAAC,IAAI,CAAC;IAChBJ,UAAU,CAACM,OAAO,IAAIN,UAAU,CAACM,OAAO,CAACC,CAAC,CAAC;EAC7C,CAAC;EAED,IAAMC,MAAM,GAAG,SAATA,MAAM,CAAID,CAAqC,EAAK;IACxDH,UAAU,CAAC,KAAK,CAAC;IACjBJ,UAAU,CAACQ,MAAM,IAAIR,UAAU,CAACQ,MAAM,CAACD,CAAC,CAAC;EAC3C,CAAC;EAED,IAAME,QAAQ,GAAG/C,KAAK,CAACgD,WAAW,CAAC,YAAM;IAAA;IACvC;IACA,IAAMC,sBAAsB,4BAAGC,MAAM,CAACC,wBAAwB,CAC5DC,gBAAgB,CAACC,SAAS,EAC1B,OAAO,CACR,0DAH8B,sBAG5BC,GAAG;IACNL,sBAAsB,aAAtBA,sBAAsB,uBAAtBA,sBAAsB,CAAEM,IAAI,CAAChB,QAAQ,CAACiB,OAAO,EAAE,EAAE,CAAC;IAElD,IAAMC,GAAG,GAAG,IAAIC,KAAK,CAAC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAK,CAAC,CAAC;IACjD,qBAAApB,QAAQ,CAACiB,OAAO,sDAAhB,kBAAkBI,aAAa,CAACH,GAAG,CAAC;EACtC,CAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC;EAEd,IAAMsB,gBAAgB,GAAG7D,KAAK,CAACgD,WAAW,CACxC,UAACH,CAAa;IAAA,OAAKd,WAAW,CAACc,CAAC,CAACiB,aAAa,CAAC;EAAA,GAC/C,CAAC/B,WAAW,CAAC,CACd;EAED,IAAMgC,sBAAsB,GAAG/D,KAAK,CAACgD,WAAW,CAC9C,UAACH,CAAa,EAAK;IAAA;IACjBA,CAAC,CAACiB,aAAa,CAACE,cAAc,EAAE;IAChC,sBAAAzB,QAAQ,CAACiB,OAAO,uDAAhB,mBAAkBS,KAAK,EAAE;IACzBlB,QAAQ,EAAE;EACZ,CAAC,EACD,CAACR,QAAQ,EAAEQ,QAAQ,CAAC,CACrB;EAED,oBACE;IACE,SAAS,EAAE3C,UAAU,eAEnBiB,QAAQ,KAAKV,QAAQ,CAACW,GAAG,qBAAyB,EAClDqB,KAAK,KAAKjC,QAAQ,CAACwD,OAAO,IAAInD,eAAe,CAAC4B,KAAK,CAAC,EACpDF,SAAS,yBAA6B,EACtCJ,KAAK,2BAA+B,EACpCT,KAAK,2BAA+B,EACpCE,IAAI,0BAA8B,EAClCL,SAAS,CACT;IACF,KAAK,EAAEO;EAAM,gBAEb;IAAK,SAAS;EAAuB,gBACnC;IAAK,SAAS;EAA0B,EAAG,eAC3C;IAAO,SAAS;EAA4B,gBAC1C;IACE,IAAI,EAAC;EAAQ,GACTM,UAAU;IACd,YAAY,EAAEL,YAAa;IAC3B,GAAG,EAAEM,QAAS;IACd,SAAS,qBAA0B;IACnC,OAAO,EAAEK,OAAQ;IACjB,MAAM,EAAEE,MAAO;IACf,QAAQ,EAAEX,QAAS;IACnB,KAAK,EAAEE;EAAM,GACb,EACDhB,QAAQ,KAAKV,QAAQ,CAACW,GAAG,IAAIM,KAAK,iBACjC;IAAK,SAAS;EAAgC,GAAEA,KAAK,CACtD,eACD;IAAK,SAAS;EAAgC,gBAC5C;IAAK,SAAS;EAAmC,GAC9CJ,MAAM,eACP,oBAAC,2BAA2B;IAAC,SAAS;EAAqC,GACxEG,WAAW,CACgB,CAC1B,EACLc,SAAS,IAAIpB,QAAQ,KAAKV,QAAQ,CAACW,GAAG,IAAIM,KAAK,iBAC9C;IAAK,SAAS;EAAgC,GAAEA,KAAK,CACtD,CACG,CACA,eACR;IAAK,SAAS;EAA0B,gBACtC;IAAK,SAAS;EAA0B,GACrCE,IAAI,iBACH,oBAAC,KAAK;IAAC,OAAO,EAAE+B,gBAAiB;IAAC,SAAS;EAAyB,GACjE/B,IAAI,CAER,EACA,CAAC,CAACO,KAAK,iBACN,oBAAC,KAAK;IACJ,OAAO,EAAE0B,sBAAuB;IAChC,OAAO,EAAEhB,QAAS;IAClB,SAAS;EAAyB,GAEjC1B,QAAQ,KAAKV,QAAQ,CAACW,GAAG,gBAAG,oBAAC,WAAW,OAAG,gBAAG,oBAAC,YAAY,OAAG,CAElE,CACG,EACLD,QAAQ,KAAKV,QAAQ,CAACW,GAAG,IAAIM,KAAK,iBACjC;IAAK,SAAS,wBAA6B;IAAC,OAAO,EAAEmB;EAAS,GAC3DnB,KAAK,CAET,CACG,CACF,CACF;AAEV,CAAC"}
+{"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":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Touch","Headline","Title","styles","sizeYClassNames","none","REGULAR","SearchPlaceholderTypography","children","restProps","platform","IOS","level","weight","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","inputProps","inputRef","isFocused","setFocused","useState","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","label","input","type","ref","onStart","onClick"],"mappings":"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"}

package/dist/cssm/components/Search/Search.module.css

@@ -1 +1 @@
-.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:#818c99;color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 8px 8px 0;border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:32px;height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:32px;line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:#fff;background:var(--vkui--color_background_content)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:#e2e4e9;background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:#e2e4e9;color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:#d8dbe2;background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:#d8dbe2;color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:#fff;background:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--vkui--color_header_background);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_header_background)}
+.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:#818c99;color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 8px 8px 0;border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:32px;height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:32px;line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:#fff;background:var(--vkui_internal--background,var(--vkui--color_background_content))}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:#e2e4e9;background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:#e2e4e9;color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:#d8dbe2;background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:#d8dbe2;color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:#fff;background:var(--vkui_internal--background,var(--vkui--color_background_content));color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui_internal--background,var(--vkui--color_background_content))}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--vkui--color_header_background);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_header_background)}

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

package/dist/cssm/components/SegmentedControl/SegmentedControl.js

@@ -1,9 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["size", "name", "options", "getRootRef", "defaultValue", "children", "className", "onChange", "value"],
-  _excluded2 = ["label", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -13,82 +7,54 @@ import { SizeType } from '../../lib/adaptivity';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';
-import "./SegmentedControl.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiSegmentedControl--sizeY-none"
-}, SizeType.REGULAR, "vkuiSegmentedControl--sizeY-regular");
-var warn = warnOnce('SegmentedControl');
-
+import styles from './SegmentedControl.module.css';
+const sizeYClassNames = {
+    none: styles['SegmentedControl--sizeY-none'],
+    [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular']
+};
+const warn = warnOnce('SegmentedControl');
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
- */
-export var SegmentedControl = function SegmentedControl(_ref) {
-  var _options$;
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'l' : _ref$size,
-    name = _ref.name,
-    options = _ref.options,
-    getRootRef = _ref.getRootRef,
-    _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 = _objectWithoutProperties(_ref, _excluded);
-  var id = useId();
-  var _useCustomEnsuredCont = useCustomEnsuredControl({
-      onChange: onChangeProp,
-      value: valueProp,
-      defaultValue: defaultValue
-    }),
-    _useCustomEnsuredCont2 = _slicedToArray(_useCustomEnsuredCont, 2),
-    value = _useCustomEnsuredCont2[0],
-    _onChange = _useCustomEnsuredCont2[1];
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var actualIndex = options.findIndex(function (option) {
-    return option.value === value;
-  });
-  useIsomorphicLayoutEffect(function () {
-    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {
-      warn('defaultValue: такого значения нет среди опций!', 'error');
-    }
-  }, [actualIndex]);
-  var translateX = "translateX(".concat(100 * actualIndex, "%)");
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiSegmentedControl", sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], styles["SegmentedControl--size-".concat(size)], className),
-    ref: getRootRef
-  }), /*#__PURE__*/React.createElement("div", {
-    role: "radiogroup",
-    className: "vkuiSegmentedControl__in"
-  }, actualIndex > -1 && /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": true,
-    className: "vkuiSegmentedControl__slider",
-    style: {
-      width: "".concat(100 / options.length, "%"),
-      transform: translateX,
-      WebkitTransform: translateX
-    }
-  }), options.map(function (_ref2) {
-    var label = _ref2.label,
-      optionClassName = _ref2.className,
-      optionProps = _objectWithoutProperties(_ref2, _excluded2);
-    return /*#__PURE__*/React.createElement(SegmentedControlOption, _extends({
-      key: "".concat(optionProps.value)
-    }, optionProps, {
-      className: classNames("vkuiSegmentedControl__option", optionClassName),
-      name: name !== null && name !== void 0 ? name : id,
-      checked: value === optionProps.value,
-      onChange: function onChange() {
-        return _onChange(optionProps.value);
-      }
-    }), label);
-  })));
-};
-var styles = {
-  "SegmentedControl--size-l": "vkuiSegmentedControl--size-l",
-  "SegmentedControl--size-m": "vkuiSegmentedControl--size-m"
+ */ export const SegmentedControl = ({ size ='l' , name , options , getRootRef , defaultValue =options[0]?.value , children , className , onChange: onChangeProp , value: valueProp , ...restProps })=>{
+    const id = useId();
+    const [value, onChange] = useCustomEnsuredControl({
+        onChange: onChangeProp,
+        value: valueProp,
+        defaultValue
+    });
+    const { sizeY ='none'  } = useAdaptivity();
+    const actualIndex = options.findIndex((option)=>option.value === value);
+    useIsomorphicLayoutEffect(()=>{
+        if (actualIndex === -1 && process.env.NODE_ENV === 'development') {
+            warn('defaultValue: такого значения нет среди опций!', 'error');
+        }
+    }, [
+        actualIndex
+    ]);
+    const translateX = `translateX(${100 * actualIndex}%)`;
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        className: classNames(styles['SegmentedControl'], sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], size === 'l' && styles['SegmentedControl--size-l'], className),
+        ref: getRootRef
+    }, /*#__PURE__*/ React.createElement("div", {
+        role: "radiogroup",
+        className: styles['SegmentedControl__in']
+    }, actualIndex > -1 && /*#__PURE__*/ React.createElement("div", {
+        "aria-hidden": true,
+        className: styles['SegmentedControl__slider'],
+        style: {
+            width: `${100 / options.length}%`,
+            transform: translateX,
+            WebkitTransform: translateX
+        }
+    }), options.map(({ label , className: optionClassName , ...optionProps })=>/*#__PURE__*/ React.createElement(SegmentedControlOption, {
+            key: `${optionProps.value}`,
+            ...optionProps,
+            className: classNames(styles['SegmentedControl__option'], optionClassName),
+            name: name ?? id,
+            checked: value === optionProps.value,
+            onChange: ()=>onChange(optionProps.value)
+        }, label))));
 };
+
 //# sourceMappingURL=SegmentedControl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":["React","classNames","useAdaptivity","useCustomEnsuredControl","useId","SizeType","useIsomorphicLayoutEffect","warnOnce","SegmentedControlOption","sizeYClassNames","none","REGULAR","warn","SegmentedControl","size","name","options","getRootRef","defaultValue","value","children","className","onChangeProp","onChange","valueProp","restProps","id","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","COMPACT","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 { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\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 = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        styles[`SegmentedControl--size-${size}`],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -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":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,uBAAuB,QAAQ,+BAA+B;AACvE,SAASC,KAAK,QAAQ,mBAAmB;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,yBAAyB,QAAQ,qCAAqC;AAC/E,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,sBAAsB,QAAQ,iDAAiD;AAAC;AAGzF,IAAMC,eAAe;EACnBC,IAAI;AAAwC,GAC3CL,QAAQ,CAACM,OAAO,wCAClB;AAqBD,IAAMC,IAAI,GAAGL,QAAQ,CAAC,kBAAkB,CAAC;;AAEzC;AACA;AACA;AACA,OAAO,IAAMM,gBAAgB,GAAG,SAAnBA,gBAAgB,OAWA;EAAA;EAAA,qBAV3BC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IAAA,yBACVC,YAAY;IAAZA,YAAY,+CAAGF,OAAO,CAAC,CAAC,CAAC,8CAAV,UAAYG,KAAK;IAChCC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACCC,YAAY,QAAtBC,QAAQ;IACDC,SAAS,QAAhBL,KAAK;IACFM,SAAS;EAEZ,IAAMC,EAAE,GAAGtB,KAAK,EAAE;EAElB,4BAA0BD,uBAAuB,CAAC;MAChDoB,QAAQ,EAAED,YAAY;MACtBH,KAAK,EAAEK,SAAS;MAChBN,YAAY,EAAZA;IACF,CAAC,CAAC;IAAA;IAJKC,KAAK;IAAEI,SAAQ;EAMtB,qBAA2BrB,aAAa,EAAE;IAAA,sCAAlCyB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAMC,WAAW,GAAGZ,OAAO,CAACa,SAAS,CAAC,UAACC,MAAM;IAAA,OAAKA,MAAM,CAACX,KAAK,KAAKA,KAAK;EAAA,EAAC;EAEzEb,yBAAyB,CAAC,YAAM;IAC9B,IAAIsB,WAAW,KAAK,CAAC,CAAC,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;MAChErB,IAAI,CAAC,gDAAgD,EAAE,OAAO,CAAC;IACjE;EACF,CAAC,EAAE,CAACgB,WAAW,CAAC,CAAC;EAEjB,IAAMM,UAAU,wBAAiB,GAAG,GAAGN,WAAW,OAAI;EAEtD,oBACE,wCACMH,SAAS;IACb,SAAS,EAAExB,UAAU,yBAEnB0B,KAAK,KAAKtB,QAAQ,CAAC8B,OAAO,IAAI1B,eAAe,CAACkB,KAAK,CAAC,EACpDS,MAAM,kCAA2BtB,IAAI,EAAG,EACxCO,SAAS,CACT;IACF,GAAG,EAAEJ;EAAW,iBAEhB;IAAK,IAAI,EAAC,YAAY;IAAC,SAAS;EAAiC,GAC9DW,WAAW,GAAG,CAAC,CAAC,iBACf;IACE,mBAAW;IACX,SAAS,gCAAqC;IAC9C,KAAK,EAAE;MACLS,KAAK,YAAK,GAAG,GAAGrB,OAAO,CAACsB,MAAM,MAAG;MACjCC,SAAS,EAAEL,UAAU;MACrBM,eAAe,EAAEN;IACnB;EAAE,EAEL,EACAlB,OAAO,CAACyB,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAaC,eAAe,SAA1BtB,SAAS;MAAsBuB,WAAW;IAAA,oBAC/D,oBAAC,sBAAsB;MACrB,GAAG,YAAKA,WAAW,CAACzB,KAAK;IAAG,GACxByB,WAAW;MACf,SAAS,EAAE3C,UAAU,iCAAqC0C,eAAe,CAAE;MAC3E,IAAI,EAAE5B,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIW,EAAG;MACjB,OAAO,EAAEP,KAAK,KAAKyB,WAAW,CAACzB,KAAM;MACrC,QAAQ,EAAE;QAAA,OAAMI,SAAQ,CAACqB,WAAW,CAACzB,KAAK,CAAC;MAAA;IAAC,IAE3CuB,KAAK,CACiB;EAAA,CAC1B,CAAC,CACE,CACF;AAEV,CAAC;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\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 = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -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"],"names":["React","classNames","useAdaptivity","useCustomEnsuredControl","useId","SizeType","useIsomorphicLayoutEffect","warnOnce","SegmentedControlOption","styles","sizeYClassNames","none","REGULAR","warn","SegmentedControl","size","name","options","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","div","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","key","checked"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,sBAAsB,QAAQ,kDAAkD;AACzF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5C,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,kCAAkC;AAC/D;AAqBA,MAAMI,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,mBAAmB,CAAC,EAC/BC,MAAO,IAAG,EACVC,KAAI,EACJC,QAAO,EACPC,WAAU,EACVC,cAAeF,OAAO,CAAC,EAAE,EAAEG,MAAK,EAChCC,SAAQ,EACRC,UAAS,EACTC,UAAUC,aAAY,EACtBJ,OAAOK,UAAS,EAChB,GAAGC,WACmB,GAAK;IAC3B,MAAMC,KAAKvB;IAEX,MAAM,CAACgB,OAAOG,SAAS,GAAGpB,wBAAwB;QAChDoB,UAAUC;QACVJ,OAAOK;QACPN;IACF;IAEA,MAAM,EAAES,OAAQ,OAAM,EAAE,GAAG1B;IAE3B,MAAM2B,cAAcZ,QAAQa,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;IAEnEd,0BAA0B,IAAM;QAC9B,IAAIuB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChErB,KAAK,kDAAkD;QACzD,CAAC;IACH,GAAG;QAACgB;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,oBAACO;QACE,GAAGV,SAAS;QACbJ,WAAWrB,WACTQ,MAAM,CAAC,mBAAmB,EAC1BmB,UAAUvB,SAASgC,OAAO,IAAI3B,eAAe,CAACkB,MAAM,EACpDb,SAAS,OAAON,MAAM,CAAC,2BAA2B,EAClDa;QAEFgB,KAAKpB;qBAEL,oBAACkB;QAAIG,MAAK;QAAajB,WAAWb,MAAM,CAAC,uBAAuB;OAC7DoB,cAAc,CAAC,mBACd,oBAACO;QACCI,eAAAA,IAAW;QACXlB,WAAWb,MAAM,CAAC,2BAA2B;QAC7CgC,OAAO;YACLC,OAAO,CAAC,EAAE,MAAMzB,QAAQ0B,MAAM,CAAC,CAAC,CAAC;YACjCC,WAAWT;YACXU,iBAAiBV;QACnB;QAGHlB,QAAQ6B,GAAG,CAAC,CAAC,EAAEC,MAAK,EAAEzB,WAAW0B,gBAAe,EAAE,GAAGC,aAAa,iBACjE,oBAACzC;YACC0C,KAAK,CAAC,EAAED,YAAY7B,KAAK,CAAC,CAAC;YAC1B,GAAG6B,WAAW;YACf3B,WAAWrB,WAAWQ,MAAM,CAAC,2BAA2B,EAAEuC;YAC1DhC,MAAMA,QAAQW;YACdwB,SAAS/B,UAAU6B,YAAY7B,KAAK;YACpCG,UAAU,IAAMA,SAAS0B,YAAY7B,KAAK;WAEzC2B;AAMb,EAAE"}

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

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "style", "children"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
@@ -10,37 +6,29 @@ import { SizeType } from '../../../lib/adaptivity';
 import { callMultiple } from '../../../lib/callMultiple';
 import { FocusVisible } from '../../FocusVisible/FocusVisible';
 import { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
-import "./SegmentedControlOption.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiSegmentedControlOption__content--sizeY-none"
-}, SizeType.COMPACT, "vkuiSegmentedControlOption__content--sizeY-compact");
-
+import styles from './SegmentedControlOption.module.css';
+const sizeYClassNames = {
+    none: styles['SegmentedControlOption__content--sizeY-none'],
+    [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
- */
-export var SegmentedControlOption = function SegmentedControlOption(_ref) {
-  var className = _ref.className,
-    style = _ref.style,
-    children = _ref.children,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _useFocusVisible = useFocusVisible(),
-    focusVisible = _useFocusVisible.focusVisible,
-    onBlur = _useFocusVisible.onBlur,
-    onFocus = _useFocusVisible.onFocus;
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  return /*#__PURE__*/React.createElement("label", {
-    className: classNames("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", focusVisible && "vkuiSegmentedControlOption--focus-visible", className),
-    style: style
-  }, /*#__PURE__*/React.createElement(VisuallyHiddenInput, _extends({}, restProps, {
-    type: "radio",
-    onBlur: callMultiple(onBlur, restProps.onBlur),
-    onFocus: callMultiple(onFocus, restProps.onFocus)
-  })), /*#__PURE__*/React.createElement("span", {
-    className: classNames("vkuiSegmentedControlOption__content", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY])
-  }, children), /*#__PURE__*/React.createElement(FocusVisible, {
-    mode: "inside"
-  }));
+ */ export const SegmentedControlOption = ({ className , style , children , ...restProps })=>{
+    const { onBlur , onFocus  } = useFocusVisible();
+    const { sizeY ='none'  } = useAdaptivity();
+    return /*#__PURE__*/ React.createElement("label", {
+        className: classNames(styles['SegmentedControlOption'], restProps.checked && styles['SegmentedControlOption--checked'], className),
+        style: style
+    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, {
+        ...restProps,
+        type: "radio",
+        onBlur: callMultiple(onBlur, restProps.onBlur),
+        onFocus: callMultiple(onFocus, restProps.onFocus)
+    }), /*#__PURE__*/ React.createElement("span", {
+        className: classNames(styles['SegmentedControlOption__content'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY])
+    }, children), /*#__PURE__*/ React.createElement(FocusVisible, {
+        mode: "inside"
+    }));
 };
+
 //# sourceMappingURL=SegmentedControlOption.js.map