@vkontakte/vkui 4.30.0 → 4.33.0

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

@@ -7,7 +7,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Search = void 0;
 
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
@@ -33,20 +33,20 @@ var _Touch = require("../Touch/Touch");
 
 var _utils = require("../../lib/utils");
 
-var _Text = _interopRequireDefault(require("../Typography/Text/Text"));
+var _Text = require("../Typography/Text/Text");
 
 var _Title = require("../Typography/Title/Title");
 
-var _Headline = _interopRequireDefault(require("../Typography/Headline/Headline"));
+var _Headline = require("../Typography/Headline/Headline");
 
-var _Separator = _interopRequireDefault(require("../Separator/Separator"));
+var _Separator = require("../Separator/Separator");
 
 var _useExternRef = require("../../hooks/useExternRef");
 
 var _useEnsuredControl3 = require("../../hooks/useEnsuredControl");
 
 var _excluded = ["platform", "children"],
-    _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "platform", "icon", "onIconClick", "style"];
+    _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "platform", "icon", "onIconClick", "style", "autoComplete"];
 
 var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
   var platform = _ref.platform,
@@ -61,30 +61,39 @@ var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
       }), children);
 
     case _platform.VKCOM:
-      return (0, _jsxRuntime.createScopedElement)(_Text.default, (0, _extends2.default)({}, restProps, {
-        weight: "regular"
-      }), children);
+      return (0, _jsxRuntime.createScopedElement)(_Text.Text, restProps, children);
 
     case _platform.ANDROID:
     default:
-      return (0, _jsxRuntime.createScopedElement)(_Headline.default, (0, _extends2.default)({}, restProps, {
-        weight: "regular"
+      return (0, _jsxRuntime.createScopedElement)(_Headline.Headline, (0, _extends2.default)({}, restProps, {
+        weight: "3"
       }), children);
   }
 };
 
-var Search = function Search(_ref2) {
-  var before = _ref2.before,
+/**
+ * @see https://vkcom.github.io/VKUI/#/Search
+ */
+var SearchComponent = function SearchComponent(_ref2) {
+  var _ref2$before = _ref2.before,
+      before = _ref2$before === void 0 ? (0, _jsxRuntime.createScopedElement)(_icons.Icon16SearchOutline, {
+    "aria-hidden": true
+  }) : _ref2$before,
       className = _ref2.className,
-      defaultValue = _ref2.defaultValue,
-      placeholder = _ref2.placeholder,
-      after = _ref2.after,
+      _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);
   var inputRef = (0, _useExternRef.useExternRef)(getRef);
 
@@ -150,6 +159,7 @@ var Search = function Search(_ref2) {
   }, (0, _jsxRuntime.createScopedElement)("input", (0, _extends2.default)({
     type: "search"
   }, inputProps, {
+    autoComplete: autoComplete,
     ref: inputRef,
     vkuiClass: "Search__input",
     onFocus: onFocus,
@@ -180,21 +190,13 @@ var Search = function Search(_ref2) {
     vkuiClass: "Search__icon"
   }, platform === _platform.IOS ? (0, _jsxRuntime.createScopedElement)(_icons.Icon16Clear, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24Cancel, null))), platform === _platform.IOS && after && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Search__after-in"
-  }, after))), platform === _platform.VKCOM && (0, _jsxRuntime.createScopedElement)(_Separator.default, {
+  }, after))), platform === _platform.VKCOM && (0, _jsxRuntime.createScopedElement)(_Separator.Separator, {
     vkuiClass: "Search__separator",
     wide: true
   }));
 };
 
-Search.defaultProps = {
-  autoComplete: "off",
-  defaultValue: "",
-  placeholder: "Поиск",
-  after: "Отмена",
-  before: (0, _jsxRuntime.createScopedElement)(_icons.Icon16SearchOutline, null)
-}; // eslint-disable-next-line import/no-default-export
-
-var _default = (0, _withPlatform.withPlatform)(Search);
-
-exports.default = _default;
+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,"sources":["../../../../src/components/Search/Search.tsx"],"names":["SearchPlaceholderTypography","platform","children","restProps","IOS","VKCOM","ANDROID","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","inputProps","inputRef","React","useState","isFocused","setFocused","value","onChange","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","defaultProps","autoComplete"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport {\n  Icon16SearchOutline,\n  Icon16Clear,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { IOS, VKCOM, ANDROID } 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 Text from \"../Typography/Text/Text\";\nimport { Title } from \"../Typography/Title/Title\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport Separator from \"../Separator/Separator\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport \"./Search.css\";\n\nexport type InputRef = (element: HTMLInputElement) => void;\n\ninterface SearchPlaceholderTypographyProps\n  extends HasPlatform,\n    React.HTMLAttributes<HTMLElement> {}\n\nconst SearchPlaceholderTypography: React.FC<\n  SearchPlaceholderTypographyProps\n> = ({ platform, children, ...restProps }) => {\n  switch (platform) {\n    case IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    case VKCOM:\n      return (\n        <Text {...restProps} weight=\"regular\">\n          {children}\n        </Text>\n      );\n    case ANDROID:\n    default:\n      return (\n        <Headline {...restProps} weight=\"regular\">\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\nconst Search: React.FC<SearchProps> = ({\n  before,\n  className,\n  defaultValue,\n  placeholder,\n  after,\n  getRef,\n  platform,\n  icon,\n  onIconClick = noop,\n  style,\n  ...inputProps\n}) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\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      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(getClassName(\"Search\", platform), {\n        \"Search--focused\": isFocused,\n        \"Search--has-value\": !!value,\n        \"Search--has-after\": !!after,\n        \"Search--has-icon\": !!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            ref={inputRef}\n            vkuiClass=\"Search__input\"\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {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 === 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 === IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === IOS && after && (\n            <div vkuiClass=\"Search__after-in\">{after}</div>\n          )}\n        </div>\n      </div>\n      {platform === VKCOM && <Separator vkuiClass=\"Search__separator\" wide />}\n    </div>\n  );\n};\n\nSearch.defaultProps = {\n  autoComplete: \"off\",\n  defaultValue: \"\",\n  placeholder: \"Поиск\",\n  after: \"Отмена\",\n  before: <Icon16SearchOutline />,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withPlatform(Search);\n"],"file":"Search.js"}
+{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"names":["SearchPlaceholderTypography","platform","children","restProps","IOS","VKCOM","ANDROID","SearchComponent","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","inputProps","inputRef","React","useState","isFocused","setFocused","value","onChange","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","Search","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport {\n  Icon16SearchOutline,\n  Icon16Clear,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { IOS, VKCOM, ANDROID } 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 { Text } from \"../Typography/Text/Text\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Separator } from \"../Separator/Separator\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport \"./Search.css\";\n\nexport type InputRef = (element: HTMLInputElement) => void;\n\ninterface SearchPlaceholderTypographyProps\n  extends HasPlatform,\n    React.HTMLAttributes<HTMLElement> {}\n\nconst SearchPlaceholderTypography: React.FC<\n  SearchPlaceholderTypographyProps\n> = ({ platform, children, ...restProps }) => {\n  switch (platform) {\n    case IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    case VKCOM:\n      return <Text {...restProps}>{children}</Text>;\n    case ANDROID:\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: React.FC<SearchProps> = ({\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}) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\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      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(getClassName(\"Search\", platform), {\n        \"Search--focused\": isFocused,\n        \"Search--has-value\": !!value,\n        \"Search--has-after\": !!after,\n        \"Search--has-icon\": !!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 === 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 === 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 === IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === IOS && after && (\n            <div vkuiClass=\"Search__after-in\">{after}</div>\n          )}\n        </div>\n      </div>\n      {platform === VKCOM && <Separator vkuiClass=\"Search__separator\" wide />}\n    </div>\n  );\n};\n\nexport const Search = withPlatform(SearchComponent);\n\nSearch.displayName = \"Search\";\n"],"file":"Search.js"}

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

@@ -14,4 +14,7 @@ export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDiv
     value?: SegmentedControlValue;
     defaultValue?: SegmentedControlValue;
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/SegmentedControl
+ */
 export declare const SegmentedControl: React.FC<SegmentedControlProps>;

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

@@ -29,9 +29,14 @@ var _warnOnce = require("../../lib/warnOnce");
 
 var _SegmentedControlOption = require("./SegmentedControlOption/SegmentedControlOption");
 
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+
 var _excluded = ["size", "name", "options", "getRootRef", "onChange", "value", "defaultValue", "children"],
     _excluded2 = ["label"];
 var warn = (0, _warnOnce.warnOnce)("SegmentedControl");
+/**
+ * @see https://vkcom.github.io/VKUI/#/SegmentedControl
+ */
 
 var SegmentedControl = function SegmentedControl(_ref) {
   var _options$;
@@ -47,6 +52,10 @@ var SegmentedControl = function SegmentedControl(_ref) {
       defaultValue = _ref.defaultValue,
       children = _ref.children,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
   var initialValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value;
 
   if (process.env.NODE_ENV === "development") {
@@ -89,7 +98,8 @@ var SegmentedControl = function SegmentedControl(_ref) {
   };
 
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
-    vkuiClass: (0, _classNames.classNames)("SegmentedControl", "SegmentedControl--".concat(size)),
+    vkuiClass: (0, _classNames.classNames)("SegmentedControl", // TODO v5.0.0 поправить под новую адаптивность
+    "SegmentedControl--sizeY-".concat(sizeY), "SegmentedControl--".concat(size)),
     ref: getRootRef
   }), (0, _jsxRuntime.createScopedElement)("div", {
     role: "radiogroup",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":["warn","SegmentedControl","size","name","options","getRootRef","onChange","noop","valueProp","value","defaultValue","children","restProps","initialValue","process","env","NODE_ENV","undefined","React","useState","activeOptionIdx","updateActiveOptionIdx","valueLocal","updateValueLocal","nameRef","useRef","_activeOptionIdx","findIndex","option","translateX","handleOnChange","width","length","transform","WebkitTransform","map","label","optionProps","current"],"mappings":"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","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 \"./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\");\nexport const SegmentedControl: React.FC<SegmentedControlProps> = ({\n  size = \"l\",\n  name,\n  options,\n  getRootRef,\n  onChange = noop,\n  value: valueProp,\n  defaultValue,\n  children,\n  ...restProps\n}) => {\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(\"SegmentedControl\", `SegmentedControl--${size}`)}\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"],"file":"SegmentedControl.js"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":["warn","SegmentedControl","size","name","options","getRootRef","onChange","noop","valueProp","value","defaultValue","children","restProps","sizeY","initialValue","process","env","NODE_ENV","undefined","React","useState","activeOptionIdx","updateActiveOptionIdx","valueLocal","updateValueLocal","nameRef","useRef","_activeOptionIdx","findIndex","option","translateX","handleOnChange","width","length","transform","WebkitTransform","map","label","optionProps","current"],"mappings":"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","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 \"./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: React.FC<SegmentedControlProps> = ({\n  size = \"l\",\n  name,\n  options,\n  getRootRef,\n  onChange = noop,\n  value: valueProp,\n  defaultValue,\n  children,\n  ...restProps\n}) => {\n  const { sizeY } = useAdaptivity();\n  const initialValue = defaultValue ?? options[0]?.value;\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (valueProp !== undefined && defaultValue !== undefined) {\n      warn(\n        \"SegmentedControl должен быть либо управляемым, либо неуправляемым\" +\n          \"(укажите либо свойство value, либо свойство defaultValue, но не оба).\",\n        \"error\"\n      );\n    }\n  }\n\n  const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);\n  const [valueLocal, updateValueLocal] =\n    React.useState<SegmentedControlValue>(initialValue);\n\n  const value = valueProp ?? valueLocal;\n\n  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        // TODO v5.0.0 поправить под новую адаптивность\n        `SegmentedControl--sizeY-${sizeY}`,\n        `SegmentedControl--${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"],"file":"SegmentedControl.js"}

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

@@ -1,4 +1,7 @@
 import * as React from "react";
 import { VisuallyHiddenInputProps } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
 import "./SegmentedControlOption.css";
+/**
+ * @see https://vkcom.github.io/VKUI/#/SegmentedControl
+ */
 export declare const SegmentedControlOption: React.FC<VisuallyHiddenInputProps>;

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

@@ -13,20 +13,29 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _useAdaptivity2 = require("../../../hooks/useAdaptivity");
+
 var _useFocusVisible2 = require("../../../hooks/useFocusVisible");
 
 var _callMultiple = require("../../../lib/callMultiple");
 
 var _classNames = require("../../../lib/classNames");
 
+var _AdaptivityContext = require("../../AdaptivityProvider/AdaptivityContext");
+
 var _FocusVisible = require("../../FocusVisible/FocusVisible");
 
-var _Text = _interopRequireDefault(require("../../Typography/Text/Text"));
+var _Text = require("../../Typography/Text/Text");
+
+var _Caption = require("../../Typography/Caption/Caption");
 
 var _VisuallyHiddenInput = require("../../VisuallyHiddenInput/VisuallyHiddenInput");
 
 var _excluded = ["className", "style", "children"];
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/SegmentedControl
+ */
 var SegmentedControlOption = function SegmentedControlOption(_ref) {
   var className = _ref.className,
       style = _ref.style,
@@ -38,21 +47,24 @@ var SegmentedControlOption = function SegmentedControlOption(_ref) {
       onBlur = _useFocusVisible.onBlur,
       onFocus = _useFocusVisible.onFocus;
 
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
   return (0, _jsxRuntime.createScopedElement)("label", {
     className: className,
-    style: style // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    ,
-    vkuiClass: (0, _classNames.classNames)("SegmentedControlOption", {
-      "SegmentedControlOption--checked": restProps.checked,
-      "SegmentedControlOption--focus-visible": focusVisible
-    })
+    style: style,
+    vkuiClass: (0, _classNames.classNames)("SegmentedControlOption", restProps.checked && "SegmentedControlOption--checked", focusVisible && "SegmentedControlOption--focus-visible")
   }, (0, _jsxRuntime.createScopedElement)(_VisuallyHiddenInput.VisuallyHiddenInput, (0, _extends2.default)({}, restProps, {
     type: "radio",
     onBlur: (0, _callMultiple.callMultiple)(onBlur, restProps.onBlur),
     onFocus: (0, _callMultiple.callMultiple)(onFocus, restProps.onFocus)
-  })), (0, _jsxRuntime.createScopedElement)(_Text.default, {
+  })), sizeY === _AdaptivityContext.SizeType.COMPACT ? (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
+    level: "1",
+    vkuiClass: "SegmentedControlOption__content",
+    weight: "3"
+  }, children) : (0, _jsxRuntime.createScopedElement)(_Text.Text, {
     vkuiClass: "SegmentedControlOption__content",
-    weight: "medium"
+    weight: "2"
   }, children), (0, _jsxRuntime.createScopedElement)(_FocusVisible.FocusVisible, {
     mode: "inside"
   }));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"names":["SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","checked"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAMO,IAAMA,sBAA0D,GAAG,SAA7DA,sBAA6D,OAKpE;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,SACC;;AACJ,yBAA0C,wCAA1C;AAAA,MAAQC,YAAR,oBAAQA,YAAR;AAAA,MAAsBC,MAAtB,oBAAsBA,MAAtB;AAAA,MAA8BC,OAA9B,oBAA8BA,OAA9B;;AAEA,SACE;AACE,IAAA,SAAS,EAAEN,SADb;AAEE,IAAA,KAAK,EAAEC,KAFT,CAGE;AAHF;AAIE,IAAA,SAAS,EAAE,4BAAW,wBAAX,EAAqC;AAC9C,yCAAmCE,SAAS,CAACI,OADC;AAE9C,+CAAyCH;AAFK,KAArC;AAJb,KASE,qCAAC,wCAAD,6BACMD,SADN;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,MAAM,EAAE,gCAAaE,MAAb,EAAqBF,SAAS,CAACE,MAA/B,CAHV;AAIE,IAAA,OAAO,EAAE,gCAAaC,OAAb,EAAsBH,SAAS,CAACG,OAAhC;AAJX,KATF,EAeE,qCAAC,aAAD;AAAM,IAAA,SAAS,EAAC,iCAAhB;AAAkD,IAAA,MAAM,EAAC;AAAzD,KACGJ,QADH,CAfF,EAkBE,qCAAC,0BAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IAlBF,CADF;AAsBD,CA9BM","sourcesContent":["import * as React from \"react\";\nimport { useFocusVisible } from \"../../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../../lib/callMultiple\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { FocusVisible } from \"../../FocusVisible/FocusVisible\";\nimport Text from \"../../Typography/Text/Text\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport \"./SegmentedControlOption.css\";\n\nexport const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({\n  className,\n  style,\n  children,\n  ...restProps\n}) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={className}\n      style={style}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(\"SegmentedControlOption\", {\n        \"SegmentedControlOption--checked\": restProps.checked,\n        \"SegmentedControlOption--focus-visible\": focusVisible,\n      })}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <Text vkuiClass=\"SegmentedControlOption__content\" weight=\"medium\">\n        {children}\n      </Text>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"file":"SegmentedControlOption.js"}
+{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"names":["SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","checked","SizeType","COMPACT"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAMA;AACA;AACA;AACO,IAAMA,sBAA0D,GAAG,SAA7DA,sBAA6D,OAKpE;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,SACC;;AACJ,yBAA0C,wCAA1C;AAAA,MAAQC,YAAR,oBAAQA,YAAR;AAAA,MAAsBC,MAAtB,oBAAsBA,MAAtB;AAAA,MAA8BC,OAA9B,oBAA8BA,OAA9B;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,SACE;AACE,IAAA,SAAS,EAAEP,SADb;AAEE,IAAA,KAAK,EAAEC,KAFT;AAGE,IAAA,SAAS,EAAE,4BACT,wBADS,EAETE,SAAS,CAACK,OAAV,IAAqB,iCAFZ,EAGTJ,YAAY,IAAI,uCAHP;AAHb,KASE,qCAAC,wCAAD,6BACMD,SADN;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,MAAM,EAAE,gCAAaE,MAAb,EAAqBF,SAAS,CAACE,MAA/B,CAHV;AAIE,IAAA,OAAO,EAAE,gCAAaC,OAAb,EAAsBH,SAAS,CAACG,OAAhC;AAJX,KATF,EAgBGC,KAAK,KAAKE,4BAASC,OAAnB,GACC,qCAAC,gBAAD;AACE,IAAA,KAAK,EAAC,GADR;AAEE,IAAA,SAAS,EAAC,iCAFZ;AAGE,IAAA,MAAM,EAAC;AAHT,KAKGR,QALH,CADD,GASC,qCAAC,UAAD;AAAM,IAAA,SAAS,EAAC,iCAAhB;AAAkD,IAAA,MAAM,EAAC;AAAzD,KACGA,QADH,CAzBJ,EA6BE,qCAAC,0BAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IA7BF,CADF;AAiCD,CA1CM","sourcesContent":["import * as React from \"react\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { useFocusVisible } from \"../../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../../lib/callMultiple\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { SizeType } from \"../../AdaptivityProvider/AdaptivityContext\";\nimport { FocusVisible } from \"../../FocusVisible/FocusVisible\";\nimport { Text } from \"../../Typography/Text/Text\";\nimport { Caption } from \"../../Typography/Caption/Caption\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport \"./SegmentedControlOption.css\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({\n  className,\n  style,\n  children,\n  ...restProps\n}) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <label\n      className={className}\n      style={style}\n      vkuiClass={classNames(\n        \"SegmentedControlOption\",\n        restProps.checked && \"SegmentedControlOption--checked\",\n        focusVisible && \"SegmentedControlOption--focus-visible\"\n      )}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      {/* TODO v5.0.0 поправить под новую адаптивность */}\n      {sizeY === SizeType.COMPACT ? (\n        <Caption\n          level=\"1\"\n          vkuiClass=\"SegmentedControlOption__content\"\n          weight=\"3\"\n        >\n          {children}\n        </Caption>\n      ) : (\n        <Text vkuiClass=\"SegmentedControlOption__content\" weight=\"2\">\n          {children}\n        </Text>\n      )}\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"file":"SegmentedControlOption.js"}

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

@@ -1,6 +1,18 @@
 import * as React from "react";
 import { CustomSelectProps } from "../CustomSelect/CustomSelect";
 import { AdaptivityContextInterface, AdaptivityProps } from "../AdaptivityProvider/AdaptivityContext";
+export declare const SelectType: {
+    readonly default: "default";
+    readonly plain: "plain";
+    readonly accent: "accent";
+};
+/**
+ * @see https://vkcom.github.io/VKUI/#/SelectTypography
+ */
+export declare const SelectTypography: React.FC<Pick<CustomSelectProps, "selectType">>;
 export interface SelectProps extends CustomSelectProps, AdaptivityProps {
 }
-export declare const Select: React.FC<Pick<SelectProps & AdaptivityContextInterface, "platform" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "size" | "icon" | "after" | "multiple" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "align" | "getRootRef" | "getRef" | "onOpen" | "onClose" | "before" | "options" | "popupDirection" | "multiline" | "onInputChange" | "selectType" | "fetching" | "searchable" | "emptyText" | "filterFn" | "renderOption" | "renderDropdown" | "dropdownOffsetDistance" | "fixDropdownWidth" | "forceDropdownPortal"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+/**
+ * @see https://vkcom.github.io/VKUI/#/Select
+ */
+export declare const Select: React.FC<Pick<SelectProps & AdaptivityContextInterface, "platform" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "size" | "icon" | "after" | "multiple" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "align" | "getRootRef" | "getRef" | "onOpen" | "onClose" | "before" | "options" | "popupDirection" | "multiline" | "onInputChange" | "selectType" | "fetching" | "searchable" | "emptyText" | "filterFn" | "renderOption" | "renderDropdown" | "dropdownOffsetDistance" | "fixDropdownWidth" | "forceDropdownPortal"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

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

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Select = void 0;
+exports.SelectTypography = exports.SelectType = exports.Select = void 0;
 
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _NativeSelect = require("../NativeSelect/NativeSelect");
@@ -17,18 +19,68 @@ var _CustomSelect = require("../CustomSelect/CustomSelect");
 
 var _withAdaptivity = require("../../hoc/withAdaptivity");
 
-var _excluded = ["hasMouse"],
-    _excluded2 = ["children"],
-    _excluded3 = ["options", "popupDirection", "renderOption"];
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+
+var _usePlatform = require("../../hooks/usePlatform");
+
+var _platform = require("../../lib/platform");
+
+var _AdaptivityContext = require("../AdaptivityProvider/AdaptivityContext");
+
+var _Paragraph = require("../Typography/Paragraph/Paragraph");
+
+var _Text = require("../Typography/Text/Text");
+
+var _Headline = require("../Typography/Headline/Headline");
+
+var _excluded = ["selectType", "children"],
+    _excluded2 = ["hasMouse"],
+    _excluded3 = ["children"],
+    _excluded4 = ["options", "popupDirection", "renderOption"];
+var SelectType = {
+  default: "default",
+  plain: "plain",
+  accent: "accent"
+}; // TODO v5.0.0 поправить под новую адаптивность
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/SelectTypography
+ */
 
-var SelectComponent = function SelectComponent(_ref) {
-  var hasMouse = _ref.hasMouse,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+exports.SelectType = SelectType;
+
+var SelectTypography = function SelectTypography(_ref) {
+  var _ref$selectType = _ref.selectType,
+      selectType = _ref$selectType === void 0 ? SelectType.default : _ref$selectType,
+      children = _ref.children,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var platform = (0, _usePlatform.usePlatform)();
+
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
+  if (selectType === SelectType.accent) {
+    return (0, _jsxRuntime.createScopedElement)(_Paragraph.Paragraph, (0, _extends2.default)({
+      weight: platform === _platform.Platform.ANDROID ? "2" : "1"
+    }, restProps), children);
+  }
+
+  var Component = platform === _platform.VKCOM || sizeY === _AdaptivityContext.SizeType.COMPACT ? _Text.Text : _Headline.Headline;
+  return (0, _jsxRuntime.createScopedElement)(Component, (0, _extends2.default)({
+    Component: "span"
+  }, restProps), children);
+};
+
+exports.SelectTypography = SelectTypography;
+
+var SelectComponent = function SelectComponent(_ref2) {
+  var hasMouse = _ref2.hasMouse,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
 
   // Use custom select if device has connected a mouse
   if (hasMouse) {
     var children = props.children,
-        _restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+        _restProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
 
     return (0, _jsxRuntime.createScopedElement)(_CustomSelect.CustomSelect, _restProps);
   }
@@ -37,16 +89,20 @@ var SelectComponent = function SelectComponent(_ref) {
       options = _props$options === void 0 ? [] : _props$options,
       popupDirection = props.popupDirection,
       renderOption = props.renderOption,
-      restProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
-  return (0, _jsxRuntime.createScopedElement)(_NativeSelect.NativeSelect, restProps, options.map(function (_ref2) {
-    var label = _ref2.label,
-        value = _ref2.value;
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded4);
+  return (0, _jsxRuntime.createScopedElement)(_NativeSelect.NativeSelect, restProps, options.map(function (_ref3) {
+    var label = _ref3.label,
+        value = _ref3.value;
     return (0, _jsxRuntime.createScopedElement)("option", {
       value: value,
       key: "".concat(value)
     }, label);
   }));
 };
+/**
+ * @see https://vkcom.github.io/VKUI/#/Select
+ */
+
 
 var Select = (0, _withAdaptivity.withAdaptivity)(SelectComponent, {
   hasMouse: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"names":["SelectComponent","hasMouse","props","children","restProps","options","popupDirection","renderOption","map","label","value","Select"],"mappings":";;;;;;;;;;;;;AACA;;AACA;;AACA;;;;;;AAQA,IAAMA,eAAmE,GAAG,SAAtEA,eAAsE,OAGzD;AAAA,MAFjBC,QAEiB,QAFjBA,QAEiB;AAAA,MADdC,KACc;;AACjB;AACA,MAAID,QAAJ,EAAc;AACZ,QAAQE,QAAR,GAAmCD,KAAnC,CAAQC,QAAR;AAAA,QAAqBC,UAArB,0CAAmCF,KAAnC;;AAEA,WAAO,qCAAC,0BAAD,EAAkBE,UAAlB,CAAP;AACD;;AAED,uBAAqEF,KAArE,CAAQG,OAAR;AAAA,MAAQA,OAAR,+BAAkB,EAAlB;AAAA,MAAsBC,cAAtB,GAAqEJ,KAArE,CAAsBI,cAAtB;AAAA,MAAsCC,YAAtC,GAAqEL,KAArE,CAAsCK,YAAtC;AAAA,MAAuDH,SAAvD,0CAAqEF,KAArE;AAEA,SACE,qCAAC,0BAAD,EAAkBE,SAAlB,EACGC,OAAO,CAACG,GAAR,CAAY;AAAA,QAAGC,KAAH,SAAGA,KAAH;AAAA,QAAUC,KAAV,SAAUA,KAAV;AAAA,WACX;AAAQ,MAAA,KAAK,EAAEA,KAAf;AAAsB,MAAA,GAAG,YAAKA,KAAL;AAAzB,OACGD,KADH,CADW;AAAA,GAAZ,CADH,CADF;AASD,CAtBD;;AAwBO,IAAME,MAAM,GAAG,oCAAeX,eAAf,EAAgC;AACpDC,EAAAA,QAAQ,EAAE;AAD0C,CAAhC,CAAf","sourcesContent":["import * as React from \"react\";\nimport { NativeSelect } from \"../NativeSelect/NativeSelect\";\nimport { CustomSelect, CustomSelectProps } from \"../CustomSelect/CustomSelect\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\n\nexport interface SelectProps extends CustomSelectProps, AdaptivityProps {}\n\nconst SelectComponent: React.FC<SelectProps & AdaptivityContextInterface> = ({\n  hasMouse,\n  ...props\n}: SelectProps) => {\n  // Use custom select if device has connected a mouse\n  if (hasMouse) {\n    const { children, ...restProps } = props;\n\n    return <CustomSelect {...restProps} />;\n  }\n\n  const { options = [], popupDirection, renderOption, ...restProps } = props;\n\n  return (\n    <NativeSelect {...restProps}>\n      {options.map(({ label, value }) => (\n        <option value={value} key={`${value}`}>\n          {label}\n        </option>\n      ))}\n    </NativeSelect>\n  );\n};\n\nexport const Select = withAdaptivity(SelectComponent, {\n  hasMouse: true,\n});\n"],"file":"Select.js"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"names":["SelectType","default","plain","accent","SelectTypography","selectType","children","restProps","platform","sizeY","Platform","ANDROID","Component","VKCOM","SizeType","COMPACT","Text","Headline","SelectComponent","hasMouse","props","options","popupDirection","renderOption","map","label","value","Select"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;;;;;AAEO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,OAAO,EAAE,SADe;AAExBC,EAAAA,KAAK,EAAE,OAFiB;AAGxBC,EAAAA,MAAM,EAAE;AAHgB,CAAnB,C,CAMP;;AACA;AACA;AACA;;;;AACO,IAAMC,gBAEZ,GAAG,SAFSA,gBAET,OAAiE;AAAA,6BAA9DC,UAA8D;AAAA,MAA9DA,UAA8D,gCAAjDL,UAAU,CAACC,OAAsC;AAAA,MAA7BK,QAA6B,QAA7BA,QAA6B;AAAA,MAAhBC,SAAgB;AACnE,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,MAAIJ,UAAU,KAAKL,UAAU,CAACG,MAA9B,EAAsC;AACpC,WACE,qCAAC,oBAAD;AACE,MAAA,MAAM,EAAEK,QAAQ,KAAKE,mBAASC,OAAtB,GAAgC,GAAhC,GAAsC;AADhD,OAEMJ,SAFN,GAIGD,QAJH,CADF;AAQD;;AAED,MAAMM,SAAS,GACbJ,QAAQ,KAAKK,eAAb,IAAsBJ,KAAK,KAAKK,4BAASC,OAAzC,GAAmDC,UAAnD,GAA0DC,kBAD5D;AAGA,SACE,qCAAC,SAAD;AAAW,IAAA,SAAS,EAAC;AAArB,KAAgCV,SAAhC,GACGD,QADH,CADF;AAKD,CAzBM;;;;AA6BP,IAAMY,eAAmE,GAAG,SAAtEA,eAAsE,QAGzD;AAAA,MAFjBC,QAEiB,SAFjBA,QAEiB;AAAA,MADdC,KACc;;AACjB;AACA,MAAID,QAAJ,EAAc;AACZ,QAAQb,QAAR,GAAmCc,KAAnC,CAAQd,QAAR;AAAA,QAAqBC,UAArB,0CAAmCa,KAAnC;;AAEA,WAAO,qCAAC,0BAAD,EAAkBb,UAAlB,CAAP;AACD;;AAED,uBAAqEa,KAArE,CAAQC,OAAR;AAAA,MAAQA,OAAR,+BAAkB,EAAlB;AAAA,MAAsBC,cAAtB,GAAqEF,KAArE,CAAsBE,cAAtB;AAAA,MAAsCC,YAAtC,GAAqEH,KAArE,CAAsCG,YAAtC;AAAA,MAAuDhB,SAAvD,0CAAqEa,KAArE;AAEA,SACE,qCAAC,0BAAD,EAAkBb,SAAlB,EACGc,OAAO,CAACG,GAAR,CAAY;AAAA,QAAGC,KAAH,SAAGA,KAAH;AAAA,QAAUC,KAAV,SAAUA,KAAV;AAAA,WACX;AAAQ,MAAA,KAAK,EAAEA,KAAf;AAAsB,MAAA,GAAG,YAAKA,KAAL;AAAzB,OACGD,KADH,CADW;AAAA,GAAZ,CADH,CADF;AASD,CAtBD;AAwBA;AACA;AACA;;;AACO,IAAME,MAAM,GAAG,oCAAeT,eAAf,EAAgC;AACpDC,EAAAA,QAAQ,EAAE;AAD0C,CAAhC,CAAf","sourcesContent":["import * as React from \"react\";\nimport { NativeSelect } from \"../NativeSelect/NativeSelect\";\nimport { CustomSelect, CustomSelectProps } from \"../CustomSelect/CustomSelect\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform, VKCOM } from \"../../lib/platform\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n  SizeType,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Headline } from \"../Typography/Headline/Headline\";\n\nexport const SelectType = {\n  default: \"default\",\n  plain: \"plain\",\n  accent: \"accent\",\n} as const;\n\n// TODO v5.0.0 поправить под новую адаптивность\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectTypography\n */\nexport const SelectTypography: React.FC<\n  Pick<CustomSelectProps, \"selectType\">\n> = ({ selectType = SelectType.default, children, ...restProps }) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  if (selectType === SelectType.accent) {\n    return (\n      <Paragraph\n        weight={platform === Platform.ANDROID ? \"2\" : \"1\"}\n        {...restProps}\n      >\n        {children}\n      </Paragraph>\n    );\n  }\n\n  const Component =\n    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <Component Component=\"span\" {...restProps}>\n      {children}\n    </Component>\n  );\n};\n\nexport interface SelectProps extends CustomSelectProps, AdaptivityProps {}\n\nconst SelectComponent: React.FC<SelectProps & AdaptivityContextInterface> = ({\n  hasMouse,\n  ...props\n}: SelectProps) => {\n  // Use custom select if device has connected a mouse\n  if (hasMouse) {\n    const { children, ...restProps } = props;\n\n    return <CustomSelect {...restProps} />;\n  }\n\n  const { options = [], popupDirection, renderOption, ...restProps } = props;\n\n  return (\n    <NativeSelect {...restProps}>\n      {options.map(({ label, value }) => (\n        <option value={value} key={`${value}`}>\n          {label}\n        </option>\n      ))}\n    </NativeSelect>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = withAdaptivity(SelectComponent, {\n  hasMouse: true,\n});\n"],"file":"Select.js"}

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

@@ -2,13 +2,14 @@ import * as React from "react";
 import { FormFieldProps } from "../FormField/FormField";
 import { HasAlign, HasRootRef } from "../../types";
 import { AdaptivityProps } from "../../hoc/withAdaptivity";
-import { SelectType } from "../CustomSelect/CustomSelect";
+import { SelectType } from "../Select/Select";
 import "../Select/Select.css";
-import "./SelectMimicry.css";
 export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, AdaptivityProps, Pick<FormFieldProps, "before" | "after"> {
     multiline?: boolean;
     disabled?: boolean;
-    selectType?: SelectType;
+    selectType?: keyof typeof SelectType;
 }
-declare const _default: React.FC<Pick<SelectMimicryProps, "disabled" | "hidden" | "dir" | "slot" | "style" | "title" | "color" | "after" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "align" | "getRootRef" | "before" | "multiline" | "selectType"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
-export default _default;
+/**
+ * @see https://vkcom.github.io/VKUI/#/SelectMimicry
+ */
+export declare const SelectMimicry: React.FC<Pick<SelectMimicryProps, "disabled" | "hidden" | "dir" | "slot" | "style" | "title" | "color" | "after" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "align" | "getRootRef" | "before" | "multiline" | "selectType"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;