@vkontakte/vkui 5.0.0 → 5.0.1

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

@@ -1,124 +1,90 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Search = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _classNames = require("../../lib/classNames");
-
-var _withPlatform = require("../../hoc/withPlatform");
-
+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");
-
 var _useEnsuredControl3 = require("../../hooks/useEnsuredControl");
-
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-
-var _excluded = ["platform", "children"],
-    _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "platform", "icon", "onIconClick", "style", "autoComplete"];
-
+var _excluded = ["children"],
+  _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "icon", "onIconClick", "style", "autoComplete"];
 var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
-  var platform = _ref.platform,
-      children = _ref.children,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+  var children = _ref.children,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var platform = (0, _usePlatform.usePlatform)();
   switch (platform) {
     case _platform.Platform.IOS:
-      return (0, _jsxRuntime.createScopedElement)(_Title.Title, (0, _extends2.default)({}, restProps, {
+      return /*#__PURE__*/React.createElement(_Title.Title, (0, _extends2.default)({}, restProps, {
         level: "3",
         weight: "3"
       }), children);
-
     default:
-      return (0, _jsxRuntime.createScopedElement)(_Headline.Headline, (0, _extends2.default)({}, restProps, {
+      return /*#__PURE__*/React.createElement(_Headline.Headline, (0, _extends2.default)({}, restProps, {
         weight: "3"
       }), children);
   }
 };
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-var SearchComponent = function SearchComponent(_ref2) {
+var Search = function Search(_ref2) {
   var _ref2$before = _ref2.before,
-      before = _ref2$before === void 0 ? (0, _jsxRuntime.createScopedElement)(_icons.Icon16SearchOutline, {
-    "aria-hidden": true
-  }) : _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,
-      platform = _ref2.platform,
-      icon = _ref2.icon,
-      _ref2$onIconClick = _ref2.onIconClick,
-      onIconClick = _ref2$onIconClick === void 0 ? _utils.noop : _ref2$onIconClick,
-      style = _ref2.style,
-      _ref2$autoComplete = _ref2.autoComplete,
-      autoComplete = _ref2$autoComplete === void 0 ? "off" : _ref2$autoComplete,
-      inputProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+    before = _ref2$before === void 0 ? /*#__PURE__*/React.createElement(_icons.Icon16SearchOutline, null) : _ref2$before,
+    className = _ref2.className,
+    _ref2$defaultValue = _ref2.defaultValue,
+    defaultValue = _ref2$defaultValue === void 0 ? "" : _ref2$defaultValue,
+    _ref2$placeholder = _ref2.placeholder,
+    placeholder = _ref2$placeholder === void 0 ? "Поиск" : _ref2$placeholder,
+    _ref2$after = _ref2.after,
+    after = _ref2$after === void 0 ? "Отмена" : _ref2$after,
+    getRef = _ref2.getRef,
+    icon = _ref2.icon,
+    _ref2$onIconClick = _ref2.onIconClick,
+    onIconClick = _ref2$onIconClick === void 0 ? _utils.noop : _ref2$onIconClick,
+    style = _ref2.style,
+    _ref2$autoComplete = _ref2.autoComplete,
+    autoComplete = _ref2$autoComplete === void 0 ? "off" : _ref2$autoComplete,
+    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];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isFocused = _React$useState2[0],
+    setFocused = _React$useState2[1];
   var _useEnsuredControl = (0, _useEnsuredControl3.useEnsuredControl)(inputProps, {
-    defaultValue: defaultValue
-  }),
-      _useEnsuredControl2 = (0, _slicedToArray2.default)(_useEnsuredControl, 2),
-      value = _useEnsuredControl2[0],
-      onChange = _useEnsuredControl2[1];
-
+      defaultValue: defaultValue
+    }),
+    _useEnsuredControl2 = (0, _slicedToArray2.default)(_useEnsuredControl, 2),
+    value = _useEnsuredControl2[0],
+    onChange = _useEnsuredControl2[1];
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-      sizeY = _useAdaptivity.sizeY;
-
+    sizeY = _useAdaptivity.sizeY;
+  var platform = (0, _usePlatform.usePlatform)();
   var onFocus = function onFocus(e) {
     setFocused(true);
     inputProps.onFocus && inputProps.onFocus(e);
   };
-
   var onBlur = function onBlur(e) {
     setFocused(false);
     inputProps.onBlur && inputProps.onBlur(e);
   };
-
   var onCancel = React.useCallback(function () {
     var _Object$getOwnPropert, _inputRef$current;
-
     // eslint-disable-next-line @typescript-eslint/unbound-method
     var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
     nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(inputRef.current, "");
@@ -132,59 +98,53 @@ var SearchComponent = function SearchComponent(_ref2) {
   }, [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 (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: (0, _classNames.classNames)("Search", platform === _platform.Platform.IOS && "Search--ios", (0, _getSizeYClassName.getSizeYClassName)("Search", sizeY), isFocused && "Search--focused", value && "Search--has-value", icon && "Search--has-after", after && "Search--has-icon"),
-    className: className,
+  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),
     style: style
-  }, (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Search__in"
-  }, (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Search__width"
-  }), (0, _jsxRuntime.createScopedElement)("label", {
-    vkuiClass: "Search__control"
-  }, (0, _jsxRuntime.createScopedElement)("input", (0, _extends2.default)({
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vkuiSearch__in"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vkuiSearch__width"
+  }), /*#__PURE__*/React.createElement("label", {
+    className: "vkuiSearch__control"
+  }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
     type: "search"
   }, inputProps, {
     autoComplete: autoComplete,
     ref: inputRef,
-    vkuiClass: "Search__input",
+    className: "vkuiSearch__input",
     onFocus: onFocus,
     onBlur: onBlur,
     onChange: onChange,
     value: value
-  })), platform === _platform.Platform.IOS && after && (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Search__after-width"
-  }, after), (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Search__placeholder"
-  }, (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Search__placeholder-in"
-  }, before, (0, _jsxRuntime.createScopedElement)(SearchPlaceholderTypography, {
-    vkuiClass: "Search__placeholder-text",
-    platform: platform
-  }, placeholder)), isFocused && platform === _platform.Platform.IOS && after && (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Search__after-width"
-  }, after))), (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Search__after",
+  })), platform === _platform.Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
+    className: "vkuiSearch__after-width"
+  }, after), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiSearch__placeholder"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vkuiSearch__placeholder-in"
+  }, before, /*#__PURE__*/React.createElement(SearchPlaceholderTypography, {
+    className: "vkuiSearch__placeholder-text"
+  }, placeholder)), isFocused && platform === _platform.Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
+    className: "vkuiSearch__after-width"
+  }, after))), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiSearch__after",
     onClick: onCancel
-  }, (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Search__icons"
-  }, icon && (0, _jsxRuntime.createScopedElement)(_Touch.Touch, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vkuiSearch__icons"
+  }, icon && /*#__PURE__*/React.createElement(_Touch.Touch, {
     onStart: onIconClickStart,
-    vkuiClass: "Search__icon"
-  }, icon), !!value && (0, _jsxRuntime.createScopedElement)(_Touch.Touch, {
+    className: "vkuiSearch__icon"
+  }, icon), !!value && /*#__PURE__*/React.createElement(_Touch.Touch, {
     onStart: onIconCancelClickStart,
-    vkuiClass: "Search__icon"
-  }, platform === _platform.Platform.IOS ? (0, _jsxRuntime.createScopedElement)(_icons.Icon16Clear, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24Cancel, null))), platform === _platform.Platform.IOS && after && (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Search__after-in"
+    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"
   }, after))));
 };
-
-var Search = (0, _withPlatform.withPlatform)(SearchComponent);
 exports.Search = Search;
-Search.displayName = "Search";
 //# sourceMappingURL=Search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":["SearchPlaceholderTypography","platform","children","restProps","Platform","IOS","SearchComponent","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","classNames","getSizeYClassName","Search","withPlatform","displayName"],"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport {\n  Icon16SearchOutline,\n  Icon16Clear,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasPlatform, 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 \"./Search.css\";\n\nexport type InputRef = (element: HTMLInputElement) => void;\n\ninterface SearchPlaceholderTypographyProps\n  extends HasPlatform,\n    React.HTMLAttributes<HTMLElement> {}\n\nconst SearchPlaceholderTypography = ({\n  platform,\n  children,\n  ...restProps\n}: SearchPlaceholderTypographyProps) => {\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    HasPlatform {\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 */\nconst SearchComponent = ({\n  before = <Icon16SearchOutline aria-hidden />,\n  className,\n  defaultValue = \"\",\n  placeholder = \"Поиск\",\n  after = \"Отмена\",\n  getRef,\n  platform,\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\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      vkuiClass={classNames(\n        \"Search\",\n        platform === Platform.IOS && \"Search--ios\",\n        getSizeYClassName(\"Search\", sizeY),\n        isFocused && \"Search--focused\",\n        value && \"Search--has-value\",\n        icon && \"Search--has-after\",\n        after && \"Search--has-icon\"\n      )}\n      className={className}\n      style={style}\n    >\n      <div vkuiClass=\"Search__in\">\n        <div vkuiClass=\"Search__width\" />\n        <label vkuiClass=\"Search__control\">\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            vkuiClass=\"Search__input\"\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === Platform.IOS && after && (\n            <div vkuiClass=\"Search__after-width\">{after}</div>\n          )}\n          <div vkuiClass=\"Search__placeholder\">\n            <div vkuiClass=\"Search__placeholder-in\">\n              {before}\n              <SearchPlaceholderTypography\n                vkuiClass=\"Search__placeholder-text\"\n                platform={platform}\n              >\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === Platform.IOS && after && (\n              <div vkuiClass=\"Search__after-width\">{after}</div>\n            )}\n          </div>\n        </label>\n        <div vkuiClass=\"Search__after\" onClick={onCancel}>\n          <div vkuiClass=\"Search__icons\">\n            {icon && (\n              <Touch onStart={onIconClickStart} vkuiClass=\"Search__icon\">\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch onStart={onIconCancelClickStart} vkuiClass=\"Search__icon\">\n                {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === Platform.IOS && after && (\n            <div vkuiClass=\"Search__after-in\">{after}</div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const Search = withPlatform(SearchComponent);\n\nSearch.displayName = \"Search\";\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","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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"}

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

@@ -0,0 +1,19 @@
+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"> {
+    label: React.ReactChild;
+    value: SegmentedControlValue;
+}
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, HasRootRef<HTMLDivElement> {
+    options: SegmentedControlOptionInterface[];
+    size?: "m" | "l";
+    name?: string;
+    onChange?: (value: SegmentedControlValue) => void;
+    value?: SegmentedControlValue;
+    defaultValue?: SegmentedControlValue;
+}
+/**
+ * @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;

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

@@ -1,113 +1,86 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SegmentedControl = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 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 _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-
 var _utils = require("../../lib/utils");
-
 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"],
-    _excluded2 = ["label"];
+var _excluded = ["size", "name", "options", "getRootRef", "onChange", "value", "defaultValue", "children", "className"],
+  _excluded2 = ["label", "className"];
 var warn = (0, _warnOnce.warnOnce)("SegmentedControl");
+
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-
 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$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? _utils.noop : _ref$onChange,
-      valueProp = _ref.value,
-      defaultValue = _ref.defaultValue,
-      children = _ref.children,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    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,
+    children = _ref.children,
+    className = _ref.className,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-      sizeY = _useAdaptivity.sizeY;
-
+    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];
-
+    _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];
-
+    _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;
   var nameRef = React.useRef(name !== null && name !== void 0 ? name : (0, _utils.generateRandomId)());
   (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");
     }
-
     updateActiveOptionIdx(_activeOptionIdx);
   }, [value, options]);
   var translateX = "translateX(".concat(100 * activeOptionIdx, "%)");
-
   var handleOnChange = function handleOnChange(value) {
     if (valueProp === undefined) {
       updateValueLocal(value);
     }
-
     onChange(value);
   };
-
-  return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
-    vkuiClass: (0, _classNames.classNames)("SegmentedControl", (0, _getSizeYClassName.getSizeYClassName)("SegmentedControl", sizeY), "SegmentedControl--size-".concat(size)),
+  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),
     ref: getRootRef
-  }), (0, _jsxRuntime.createScopedElement)("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
-    vkuiClass: "SegmentedControl__in"
-  }, activeOptionIdx > -1 && (0, _jsxRuntime.createScopedElement)("div", {
+    className: "vkuiSegmentedControl__in"
+  }, activeOptionIdx > -1 && /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true",
-    vkuiClass: "SegmentedControl__slider",
+    className: "vkuiSegmentedControl__slider",
     style: {
       width: "".concat(100 / options.length, "%"),
       transform: translateX,
@@ -115,11 +88,12 @@ var SegmentedControl = function SegmentedControl(_ref) {
     }
   }), options.map(function (_ref2) {
     var label = _ref2.label,
-        optionProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-    return (0, _jsxRuntime.createScopedElement)(_SegmentedControlOption.SegmentedControlOption, (0, _extends2.default)({
+      optionClassName = _ref2.className,
+      optionProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+    return /*#__PURE__*/React.createElement(_SegmentedControlOption.SegmentedControlOption, (0, _extends2.default)({
       key: "".concat(optionProps.value)
     }, optionProps, {
-      vkuiClass: "SegmentedControl__option",
+      className: (0, _classNames.classNamesString)("vkuiSegmentedControl__option", optionClassName),
       name: nameRef.current,
       checked: value === optionProps.value,
       onChange: function onChange() {
@@ -128,6 +102,9 @@ var SegmentedControl = function SegmentedControl(_ref) {
     }), label);
   })));
 };
-
 exports.SegmentedControl = SegmentedControl;
+var styles = {
+  "SegmentedControl--size-l": "vkuiSegmentedControl--size-l",
+  "SegmentedControl--size-m": "vkuiSegmentedControl--size-m"
+};
 //# sourceMappingURL=SegmentedControl.js.map

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","restProps","useAdaptivity","sizeY","initialValue","process","env","NODE_ENV","undefined","React","useState","activeOptionIdx","updateActiveOptionIdx","valueLocal","updateValueLocal","nameRef","useRef","generateRandomId","useIsomorphicLayoutEffect","_activeOptionIdx","findIndex","option","translateX","handleOnChange","classNames","getSizeYClassName","width","length","transform","WebkitTransform","map","label","optionProps","current"],"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { generateRandomId, noop } from \"../../lib/utils\";\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 \"./SegmentedControl.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  ...restProps\n}: SegmentedControlProps) => {\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  const nameRef = React.useRef<string>(name ?? generateRandomId());\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      vkuiClass={classNames(\n        \"SegmentedControl\",\n        getSizeYClassName(\"SegmentedControl\", sizeY),\n        `SegmentedControl--size-${size}`\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" vkuiClass=\"SegmentedControl__in\">\n        {activeOptionIdx > -1 && (\n          <div\n            aria-hidden=\"true\"\n            vkuiClass=\"SegmentedControl__slider\"\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            vkuiClass=\"SegmentedControl__option\"\n            name={nameRef.current}\n            checked={value === optionProps.value}\n            onChange={() => handleOnChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAsBA,IAAMA,IAAI,GAAG,IAAAC,kBAAA,EAAS,kBAAT,CAAb;AAEA;AACA;AACA;;AACO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAUH;EAAA;;EAAA,qBAT3BC,IAS2B;EAAA,IAT3BA,IAS2B,0BATpB,GASoB;EAAA,IAR3BC,IAQ2B,QAR3BA,IAQ2B;EAAA,IAP3BC,OAO2B,QAP3BA,OAO2B;EAAA,IAN3BC,UAM2B,QAN3BA,UAM2B;EAAA,yBAL3BC,QAK2B;EAAA,IAL3BA,QAK2B,8BALhBC,WAKgB;EAAA,IAJpBC,SAIoB,QAJ3BC,KAI2B;EAAA,IAH3BC,YAG2B,QAH3BA,YAG2B;EAAA,IAF3BC,QAE2B,QAF3BA,QAE2B;EAAA,IADxBC,SACwB;;EAC3B,qBAAkB,IAAAC,6BAAA,GAAlB;EAAA,IAAQC,KAAR,kBAAQA,KAAR;;EACA,IAAMC,YAAY,GAAGL,YAAH,aAAGA,YAAH,cAAGA,YAAH,gBAAmBN,OAAO,CAAC,CAAD,CAA1B,8CAAmB,UAAYK,KAAjD;;EAEA,IAAIO,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAA7B,EAA4C;IAC1C,IAAIV,SAAS,KAAKW,SAAd,IAA2BT,YAAY,KAAKS,SAAhD,EAA2D;MACzDpB,IAAI,CACF,sEACE,uEAFA,EAGF,OAHE,CAAJ;IAKD;EACF;;EAED,sBAAiDqB,KAAK,CAACC,QAAN,CAAuB,CAAvB,CAAjD;EAAA;EAAA,IAAOC,eAAP;EAAA,IAAwBC,qBAAxB;;EACA,uBACEH,KAAK,CAACC,QAAN,CAAsCN,YAAtC,CADF;EAAA;EAAA,IAAOS,UAAP;EAAA,IAAmBC,gBAAnB;;EAGA,IAAMhB,KAAK,GAAGD,SAAH,aAAGA,SAAH,cAAGA,SAAH,GAAgBgB,UAA3B;EAEA,IAAME,OAAO,GAAGN,KAAK,CAACO,MAAN,CAAqBxB,IAArB,aAAqBA,IAArB,cAAqBA,IAArB,GAA6B,IAAAyB,uBAAA,GAA7B,CAAhB;EAEA,IAAAC,oDAAA,EAA0B,YAAM;IAC9B,IAAMC,gBAAgB,GAAG1B,OAAO,CAAC2B,SAAR,CACvB,UAACC,MAAD;MAAA,OAAYA,MAAM,CAACvB,KAAP,KAAiBA,KAA7B;IAAA,CADuB,CAAzB;;IAIA,IAAIqB,gBAAgB,KAAK,CAAC,CAAtB,IAA2Bd,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAxD,EAAuE;MACrEnB,IAAI,CAAC,gDAAD,EAAmD,OAAnD,CAAJ;IACD;;IAEDwB,qBAAqB,CAACO,gBAAD,CAArB;EACD,CAVD,EAUG,CAACrB,KAAD,EAAQL,OAAR,CAVH;EAYA,IAAM6B,UAAU,wBAAiB,MAAMX,eAAvB,OAAhB;;EAEA,IAAMY,cAAc,GAAG,SAAjBA,cAAiB,CAACzB,KAAD,EAAkC;IACvD,IAAID,SAAS,KAAKW,SAAlB,EAA6B;MAC3BM,gBAAgB,CAAChB,KAAD,CAAhB;IACD;;IACDH,QAAQ,CAACG,KAAD,CAAR;EACD,CALD;;EAOA,OACE,uEACMG,SADN;IAEE,SAAS,EAAE,IAAAuB,sBAAA,EACT,kBADS,EAET,IAAAC,oCAAA,EAAkB,kBAAlB,EAAsCtB,KAAtC,CAFS,mCAGiBZ,IAHjB,EAFb;IAOE,GAAG,EAAEG;EAPP,IASE;IAAK,IAAI,EAAC,YAAV;IAAuB,SAAS,EAAC;EAAjC,GACGiB,eAAe,GAAG,CAAC,CAAnB,IACC;IACE,eAAY,MADd;IAEE,SAAS,EAAC,0BAFZ;IAGE,KAAK,EAAE;MACLe,KAAK,YAAK,MAAMjC,OAAO,CAACkC,MAAnB,MADA;MAELC,SAAS,EAAEN,UAFN;MAGLO,eAAe,EAAEP;IAHZ;EAHT,EAFJ,EAYG7B,OAAO,CAACqC,GAAR,CAAY;IAAA,IAAGC,KAAH,SAAGA,KAAH;IAAA,IAAaC,WAAb;IAAA,OACX,qCAAC,8CAAD;MACE,GAAG,YAAKA,WAAW,CAAClC,KAAjB;IADL,GAEMkC,WAFN;MAGE,SAAS,EAAC,0BAHZ;MAIE,IAAI,EAAEjB,OAAO,CAACkB,OAJhB;MAKE,OAAO,EAAEnC,KAAK,KAAKkC,WAAW,CAAClC,KALjC;MAME,QAAQ,EAAE;QAAA,OAAMyB,cAAc,CAACS,WAAW,CAAClC,KAAb,CAApB;MAAA;IANZ,IAQGiC,KARH,CADW;EAAA,CAAZ,CAZH,CATF,CADF;AAqCD,CA1FM"}
+{"version":3,"file":"SegmentedControl.js","names":["warn","warnOnce","SegmentedControl","size","name","options","getRootRef","onChange","noop","valueProp","value","defaultValue","children","className","restProps","useAdaptivity","sizeY","initialValue","process","env","NODE_ENV","undefined","React","useState","activeOptionIdx","updateActiveOptionIdx","valueLocal","updateValueLocal","nameRef","useRef","generateRandomId","useIsomorphicLayoutEffect","_activeOptionIdx","findIndex","option","translateX","handleOnChange","classNamesString","getSizeYClassName","styles","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","current"],"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { generateRandomId, noop } from \"../../lib/utils\";\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 { 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  const nameRef = React.useRef<string>(name ?? generateRandomId());\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={nameRef.current}\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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"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { VisuallyHiddenInputProps } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
+/**
+ * @see https://vkcom.github.io/VKUI/#/SegmentedControl
+ */
+export declare const SegmentedControlOption: ({ className, style, children, ...restProps }: VisuallyHiddenInputProps) => JSX.Element;