@vkontakte/vkui 4.37.0 → 5.0.0

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

@@ -8,16 +8,15 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { withPlatform } from "../../hoc/withPlatform";
 import { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from "@vkontakte/icons";
-import { IOS, VKCOM, ANDROID } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { Touch } from "../Touch/Touch";
 import { noop } from "../../lib/utils";
-import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
 import { Headline } from "../Typography/Headline/Headline";
-import { Separator } from "../Separator/Separator";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 import "./Search.css";
 
 var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
@@ -26,16 +25,12 @@ var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   switch (platform) {
-    case IOS:
+    case Platform.IOS:
       return createScopedElement(Title, _extends({}, restProps, {
         level: "3",
         weight: "3"
       }), children);
 
-    case VKCOM:
-      return createScopedElement(Text, restProps, children);
-
-    case ANDROID:
     default:
       return createScopedElement(Headline, _extends({}, restProps, {
         weight: "3"
@@ -117,8 +112,7 @@ var SearchComponent = function SearchComponent(_ref2) {
     onCancel();
   }, [inputRef, onCancel]);
   return createScopedElement("div", {
-    vkuiClass: classNames("Search", platform === VKCOM && "Search--vkcom", platform === IOS && "Search--ios", // TODO: V5 перенести на новую адаптивность
-    "Search--sizeY-".concat(sizeY), isFocused && "Search--focused", value && "Search--has-value", icon && "Search--has-after", after && "Search--has-icon"),
+    vkuiClass: classNames("Search", platform === Platform.IOS && "Search--ios", getSizeYClassName("Search", sizeY), isFocused && "Search--focused", value && "Search--has-value", icon && "Search--has-after", after && "Search--has-icon"),
     className: className,
     style: style
   }, createScopedElement("div", {
@@ -137,7 +131,7 @@ var SearchComponent = function SearchComponent(_ref2) {
     onBlur: onBlur,
     onChange: onChange,
     value: value
-  })), platform === IOS && after && createScopedElement("div", {
+  })), platform === Platform.IOS && after && createScopedElement("div", {
     vkuiClass: "Search__after-width"
   }, after), createScopedElement("div", {
     vkuiClass: "Search__placeholder"
@@ -146,7 +140,7 @@ var SearchComponent = function SearchComponent(_ref2) {
   }, before, createScopedElement(SearchPlaceholderTypography, {
     vkuiClass: "Search__placeholder-text",
     platform: platform
-  }, placeholder)), isFocused && platform === IOS && after && createScopedElement("div", {
+  }, placeholder)), isFocused && platform === Platform.IOS && after && createScopedElement("div", {
     vkuiClass: "Search__after-width"
   }, after))), createScopedElement("div", {
     vkuiClass: "Search__after",
@@ -159,12 +153,9 @@ var SearchComponent = function SearchComponent(_ref2) {
   }, icon), !!value && createScopedElement(Touch, {
     onStart: onIconCancelClickStart,
     vkuiClass: "Search__icon"
-  }, platform === IOS ? createScopedElement(Icon16Clear, null) : createScopedElement(Icon24Cancel, null))), platform === IOS && after && createScopedElement("div", {
+  }, platform === Platform.IOS ? createScopedElement(Icon16Clear, null) : createScopedElement(Icon24Cancel, null))), platform === Platform.IOS && after && createScopedElement("div", {
     vkuiClass: "Search__after-in"
-  }, after))), platform === VKCOM && createScopedElement(Separator, {
-    vkuiClass: "Search__separator",
-    wide: true
-  }));
+  }, after))));
 };
 
 export var Search = withPlatform(SearchComponent);

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":["React","classNames","withPlatform","Icon16SearchOutline","Icon16Clear","Icon24Cancel","IOS","VKCOM","ANDROID","Touch","noop","Text","Title","Headline","Separator","useExternRef","useEnsuredControl","useAdaptivity","SearchPlaceholderTypography","platform","children","restProps","SearchComponent","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","inputProps","inputRef","useState","isFocused","setFocused","value","onChange","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","Search","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 { 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 { useAdaptivity } from \"../../hooks/useAdaptivity\";\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 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 = ({\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 === VKCOM && \"Search--vkcom\",\n        platform === IOS && \"Search--ios\",\n        // TODO: V5 перенести на новую адаптивность\n        `Search--sizeY-${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 === 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"],"mappings":"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"}
+{"version":3,"file":"Search.js","names":["React","classNames","withPlatform","Icon16SearchOutline","Icon16Clear","Icon24Cancel","Platform","Touch","noop","Title","Headline","useExternRef","useEnsuredControl","useAdaptivity","getSizeYClassName","SearchPlaceholderTypography","platform","children","restProps","IOS","SearchComponent","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","inputProps","inputRef","useState","isFocused","setFocused","value","onChange","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","Search","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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"}

package/dist/cssm/components/SegmentedControl/SegmentedControl.css

@@ -1 +1 @@
-.vkuiSegmentedControl{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary,#f5f5f5);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);box-sizing:border-box;height:30px;padding:2px}.vkuiSegmentedControl--l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:#fff;background-color:var(--vkui--color_segmented_control,#fff);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha,rgba(0,0,0,.08)),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative;z-index:1}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--l{height:44px}
+.vkuiSegmentedControl{background-color:var(--vkui--color_background_secondary);border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;height:30px;padding:2px}.vkuiSegmentedControl--size-l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:var(--vkui--color_segmented_control);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;transform-origin:0 0;transition:transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative;z-index:1}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--size-l{height:44px}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSegmentedControl--sizeY-none{height:36px}.vkuiSegmentedControl--sizeY-none.vkuiSegmentedControl--size-l{height:44px}}

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

@@ -11,6 +11,7 @@ import { generateRandomId, noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { SegmentedControlOption } from "./SegmentedControlOption/SegmentedControlOption";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 import "./SegmentedControl.css";
 var warn = warnOnce("SegmentedControl");
 /**
@@ -77,8 +78,7 @@ export var SegmentedControl = function SegmentedControl(_ref) {
   };
 
   return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames("SegmentedControl", // TODO v5.0.0 поправить под новую адаптивность
-    "SegmentedControl--sizeY-".concat(sizeY), "SegmentedControl--".concat(size)),
+    vkuiClass: classNames("SegmentedControl", getSizeYClassName("SegmentedControl", sizeY), "SegmentedControl--size-".concat(size)),
     ref: getRootRef
   }), createScopedElement("div", {
     role: "radiogroup",

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":["React","classNames","useIsomorphicLayoutEffect","generateRandomId","noop","warnOnce","SegmentedControlOption","useAdaptivity","warn","SegmentedControl","size","name","options","getRootRef","onChange","valueProp","value","defaultValue","children","restProps","sizeY","initialValue","process","env","NODE_ENV","undefined","useState","activeOptionIdx","updateActiveOptionIdx","valueLocal","updateValueLocal","nameRef","useRef","_activeOptionIdx","findIndex","option","translateX","handleOnChange","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 \"./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        // 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"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","names":["React","classNames","useIsomorphicLayoutEffect","generateRandomId","noop","warnOnce","SegmentedControlOption","useAdaptivity","getSizeYClassName","warn","SegmentedControl","size","name","options","getRootRef","onChange","valueProp","value","defaultValue","children","restProps","sizeY","initialValue","process","env","NODE_ENV","undefined","useState","activeOptionIdx","updateActiveOptionIdx","valueLocal","updateValueLocal","nameRef","useRef","_activeOptionIdx","findIndex","option","translateX","handleOnChange","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":"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"}

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

@@ -1 +1 @@
-.vkuiSegmentedControlOption{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:inherit;box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary,#000);cursor:pointer;height:100%;transition:color .1s ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSegmentedControlOption .vkuiIcon{color:#2c2d2e;color:var(--vkui--color_icon_primary,#2c2d2e)}.vkuiSegmentedControlOption:not(.vkuiSegmentedControlOption--checked):hover{opacity:.5}.vkuiSegmentedControlOption__content{align-content:center;align-items:center;border-radius:inherit;display:flex;height:100%;justify-content:center;width:100%}
+.vkuiSegmentedControlOption{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:inherit;box-sizing:border-box;color:var(--vkui--color_text_primary);cursor:pointer;height:100%;transition:color .1s ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSegmentedControlOption .vkuiIcon{color:var(--vkui--color_icon_primary)}.vkuiSegmentedControlOption:not(.vkuiSegmentedControlOption--checked):hover{opacity:.5}.vkuiSegmentedControlOption__content{align-content:center;align-items:center;border-radius:inherit;display:flex;font-size:var(--vkui--font_text--font_size--regular);font-weight:var(--vkui--font_weight_accent2);height:100%;justify-content:center;line-height:var(--vkui--font_text--line_height--regular);width:100%}.vkuiSegmentedControlOption__content--sizeY-compact.vkuiSegmentedControlOption__content{font-size:var(--vkui--font_footnote--font_size--regular);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_footnote--line_height--regular)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSegmentedControlOption__content--sizeY-none.vkuiSegmentedControlOption__content{font-size:var(--vkui--font_footnote--font_size--regular);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_footnote--line_height--regular)}}

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

@@ -6,11 +6,9 @@ import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { useFocusVisible } from "../../../hooks/useFocusVisible";
 import { callMultiple } from "../../../lib/callMultiple";
 import { classNames } from "../../../lib/classNames";
-import { SizeType } from "../../AdaptivityProvider/AdaptivityContext";
 import { FocusVisible } from "../../FocusVisible/FocusVisible";
-import { Text } from "../../Typography/Text/Text";
-import { Caption } from "../../Typography/Caption/Caption";
 import { VisuallyHiddenInput } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
+import { getSizeYClassName } from "../../../helpers/getSizeYClassName";
 import "./SegmentedControlOption.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
@@ -38,13 +36,8 @@ export var SegmentedControlOption = function SegmentedControlOption(_ref) {
     type: "radio",
     onBlur: callMultiple(onBlur, restProps.onBlur),
     onFocus: callMultiple(onFocus, restProps.onFocus)
-  })), sizeY === SizeType.COMPACT ? createScopedElement(Caption, {
-    level: "1",
-    vkuiClass: "SegmentedControlOption__content",
-    weight: "3"
-  }, children) : createScopedElement(Text, {
-    vkuiClass: "SegmentedControlOption__content",
-    weight: "2"
+  })), createScopedElement("span", {
+    vkuiClass: classNames("SegmentedControlOption__content", getSizeYClassName("SegmentedControlOption__content", sizeY))
   }, children), createScopedElement(FocusVisible, {
     mode: "inside"
   }));

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlOption.js","names":["useAdaptivity","useFocusVisible","callMultiple","classNames","SizeType","FocusVisible","Text","Caption","VisuallyHiddenInput","SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","checked","COMPACT"],"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import { 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 = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <label\n      className={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"],"mappings":";;;;AAAA,SAASA,aAAT;AACA,SAASC,eAAT;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AACA,SAASC,YAAT;AACA,SAASC,IAAT;AACA,SAASC,OAAT;AACA,SACEC,mBADF;AAIA;AAEA;AACA;AACA;;AACA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,OAKN;EAAA,IAJ9BC,SAI8B,QAJ9BA,SAI8B;EAAA,IAH9BC,KAG8B,QAH9BA,KAG8B;EAAA,IAF9BC,QAE8B,QAF9BA,QAE8B;EAAA,IAD3BC,SAC2B;;EAC9B,uBAA0CZ,eAAe,EAAzD;EAAA,IAAQa,YAAR,oBAAQA,YAAR;EAAA,IAAsBC,MAAtB,oBAAsBA,MAAtB;EAAA,IAA8BC,OAA9B,oBAA8BA,OAA9B;;EACA,qBAAkBhB,aAAa,EAA/B;EAAA,IAAQiB,KAAR,kBAAQA,KAAR;;EAEA,OACE;IACE,SAAS,EAAEP,SADb;IAEE,KAAK,EAAEC,KAFT;IAGE,SAAS,EAAER,UAAU,CACnB,wBADmB,EAEnBU,SAAS,CAACK,OAAV,IAAqB,iCAFF,EAGnBJ,YAAY,IAAI,uCAHG;EAHvB,GASE,oBAAC,mBAAD,eACMD,SADN;IAEE,IAAI,EAAC,OAFP;IAGE,MAAM,EAAEX,YAAY,CAACa,MAAD,EAASF,SAAS,CAACE,MAAnB,CAHtB;IAIE,OAAO,EAAEb,YAAY,CAACc,OAAD,EAAUH,SAAS,CAACG,OAApB;EAJvB,GATF,EAgBGC,KAAK,KAAKb,QAAQ,CAACe,OAAnB,GACC,oBAAC,OAAD;IACE,KAAK,EAAC,GADR;IAEE,SAAS,EAAC,iCAFZ;IAGE,MAAM,EAAC;EAHT,GAKGP,QALH,CADD,GASC,oBAAC,IAAD;IAAM,SAAS,EAAC,iCAAhB;IAAkD,MAAM,EAAC;EAAzD,GACGA,QADH,CAzBJ,EA6BE,oBAAC,YAAD;IAAc,IAAI,EAAC;EAAnB,EA7BF,CADF;AAiCD,CA1CM"}
+{"version":3,"file":"SegmentedControlOption.js","names":["useAdaptivity","useFocusVisible","callMultiple","classNames","FocusVisible","VisuallyHiddenInput","getSizeYClassName","SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","checked"],"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { useFocusVisible } from \"../../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../../lib/callMultiple\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { FocusVisible } from \"../../FocusVisible/FocusVisible\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { getSizeYClassName } from \"../../../helpers/getSizeYClassName\";\nimport \"./SegmentedControlOption.css\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <label\n      className={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      <span\n        vkuiClass={classNames(\n          \"SegmentedControlOption__content\",\n          getSizeYClassName(\"SegmentedControlOption__content\", sizeY)\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;AAAA,SAASA,aAAT;AACA,SAASC,eAAT;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SACEC,mBADF;AAIA,SAASC,iBAAT;AACA;AAEA;AACA;AACA;;AACA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,OAKN;EAAA,IAJ9BC,SAI8B,QAJ9BA,SAI8B;EAAA,IAH9BC,KAG8B,QAH9BA,KAG8B;EAAA,IAF9BC,QAE8B,QAF9BA,QAE8B;EAAA,IAD3BC,SAC2B;;EAC9B,uBAA0CV,eAAe,EAAzD;EAAA,IAAQW,YAAR,oBAAQA,YAAR;EAAA,IAAsBC,MAAtB,oBAAsBA,MAAtB;EAAA,IAA8BC,OAA9B,oBAA8BA,OAA9B;;EACA,qBAAkBd,aAAa,EAA/B;EAAA,IAAQe,KAAR,kBAAQA,KAAR;;EAEA,OACE;IACE,SAAS,EAAEP,SADb;IAEE,KAAK,EAAEC,KAFT;IAGE,SAAS,EAAEN,UAAU,CACnB,wBADmB,EAEnBQ,SAAS,CAACK,OAAV,IAAqB,iCAFF,EAGnBJ,YAAY,IAAI,uCAHG;EAHvB,GASE,oBAAC,mBAAD,eACMD,SADN;IAEE,IAAI,EAAC,OAFP;IAGE,MAAM,EAAET,YAAY,CAACW,MAAD,EAASF,SAAS,CAACE,MAAnB,CAHtB;IAIE,OAAO,EAAEX,YAAY,CAACY,OAAD,EAAUH,SAAS,CAACG,OAApB;EAJvB,GATF,EAeE;IACE,SAAS,EAAEX,UAAU,CACnB,iCADmB,EAEnBG,iBAAiB,CAAC,iCAAD,EAAoCS,KAApC,CAFE;EADvB,GAMGL,QANH,CAfF,EAuBE,oBAAC,YAAD;IAAc,IAAI,EAAC;EAAnB,EAvBF,CADF;AA2BD,CApCM"}

package/dist/cssm/components/Select/Select.css

@@ -1 +1 @@
-.vkuiSelect{box-sizing:border-box;cursor:pointer;position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:7}.vkuiSelect__container{box-sizing:border-box;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:6}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSelect--empty .vkuiSelect__title{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary))}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiCalendarHeader__picker .vkuiSelect__container{padding-right:4px}
+.vkuiSelect{box-sizing:border-box;cursor:pointer;position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:7}.vkuiSelect__container{box-sizing:border-box;color:var(--vkui--color_text_primary);flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:6}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSelect--sizeY-none.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSelect--empty .vkuiSelect__title{color:var(--vkui--color_text_secondary)}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiSelect__native--mouse-has.vkuiSelect__native{display:none}@media (pointer:fine){.vkuiSelect__native--mouse-none.vkuiSelect__native{display:none}}.vkuiSelect__custom--mouse-has-not.vkuiSelect__custom{display:none}@media (pointer:coarse),(pointer:none){.vkuiSelect__custom--mouse-none.vkuiSelect__custom{display:none}}.vkuiCalendarHeader__picker .vkuiSelect__container{padding-right:4px}.vkuiSelectTypography--selectType-accent{font-size:var(--vkui--font_paragraph--font_size--regular);font-weight:var(--vkui--font_weight_accent1);line-height:var(--vkui--font_paragraph--line_height--regular)}:not(.vkuiSelectTypography--selectType-accent).vkuiSelectTypography{font-size:var(--vkui--font_headline1--font_size--regular);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_headline1--line_height--regular)}.vkuiSelectTypography--selectType-accent.vkuiSelectTypography--android{font-weight:var(--vkui--font_weight_accent2)}.vkuiSelectTypography--sizeY-compact:not(.vkuiSelectTypography--selectType-accent),.vkuiSelectTypography--vkcom:not(.vkuiSelectTypography--selectType-accent){font-size:var(--vkui--font_text--font_size--compact);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_text--line_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiSelectTypography--sizeY-none:not(.vkuiSelectTypography--selectType-accent){font-size:var(--vkui--font_text--font_size--compact);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_text--line_height--compact)}}

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

@@ -1,18 +1,11 @@
 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";
-};
+import { SelectProps } from "../CustomSelect/CustomSelect";
+export declare type SelectType = "default" | "plain" | "accent";
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectTypography
  */
-export declare const SelectTypography: ({ selectType, children, ...restProps }: React.PropsWithChildren<Pick<CustomSelectProps, "selectType">>) => JSX.Element;
-export interface SelectProps extends CustomSelectProps, AdaptivityProps {
-}
+export declare const SelectTypography: ({ selectType, children, ...restProps }: React.PropsWithChildren<Pick<SelectProps, "selectType">>) => JSX.Element;
 /**
  * @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" | "status" | "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" | "searchable" | "emptyText" | "filterFn" | "renderOption" | "renderDropdown" | "fetching" | "dropdownOffsetDistance" | "fixDropdownWidth" | "forceDropdownPortal" | "autoHideScrollbar" | "autoHideScrollbarDelay"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Select: React.FC<SelectProps>;

package/dist/cssm/components/Select/Select.js

@@ -1,33 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["selectType", "children"],
-    _excluded2 = ["hasMouse"],
-    _excluded3 = ["children"],
-    _excluded4 = ["options", "popupDirection", "renderOption"];
+    _excluded2 = ["children", "options", "popupDirection", "renderOption"];
 import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
 import { NativeSelect } from "../NativeSelect/NativeSelect";
 import { CustomSelect } from "../CustomSelect/CustomSelect";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
-import { Platform, VKCOM } from "../../lib/platform";
-import { SizeType } from "../AdaptivityProvider/AdaptivityContext";
-import { Paragraph } from "../Typography/Paragraph/Paragraph";
-import { Text } from "../Typography/Text/Text";
-import { Headline } from "../Typography/Headline/Headline";
-export var SelectType = {
-  default: "default",
-  plain: "plain",
-  accent: "accent"
-}; // TODO v5.0.0 поправить под новую адаптивность
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import { getMouseClassName } from "../../helpers/getMouseClassName";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectTypography
  */
-
 export var SelectTypography = function SelectTypography(_ref) {
   var _ref$selectType = _ref.selectType,
-      selectType = _ref$selectType === void 0 ? SelectType.default : _ref$selectType,
+      selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
       children = _ref.children,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -36,52 +27,39 @@ export var SelectTypography = function SelectTypography(_ref) {
   var _useAdaptivity = useAdaptivity(),
       sizeY = _useAdaptivity.sizeY;
 
-  if (selectType === SelectType.accent) {
-    return createScopedElement(Paragraph, _extends({
-      weight: platform === Platform.ANDROID ? "2" : "1"
-    }, restProps), children);
-  }
-
-  var Component = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
-  return createScopedElement(Component, _extends({
-    Component: "span"
+  return createScopedElement("span", _extends({
+    vkuiClass: classNames(getClassName("SelectTypography", platform), getSizeYClassName("SelectTypography", sizeY), "SelectTypography--selectType-".concat(selectType))
   }, restProps), children);
 };
+/**
+ * @see https://vkcom.github.io/VKUI/#/Select
+ */
 
-var SelectComponent = function SelectComponent(_ref2) {
-  var hasMouse = _ref2.hasMouse,
+export var Select = function Select(_ref2) {
+  var children = _ref2.children,
+      _ref2$options = _ref2.options,
+      options = _ref2$options === void 0 ? [] : _ref2$options,
+      popupDirection = _ref2.popupDirection,
+      renderOption = _ref2.renderOption,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
-  // Use custom select if device has connected a mouse
-  if (hasMouse) {
-    var children = props.children,
-        _restProps = _objectWithoutProperties(props, _excluded3);
-
-    return createScopedElement(CustomSelect, _restProps);
-  }
+  var _useAdaptivity2 = useAdaptivity(),
+      hasMouse = _useAdaptivity2.hasMouse;
 
-  var _props$options = props.options,
-      options = _props$options === void 0 ? [] : _props$options,
-      popupDirection = props.popupDirection,
-      renderOption = props.renderOption,
-      restProps = _objectWithoutProperties(props, _excluded4);
-
-  return createScopedElement(NativeSelect, restProps, options.map(function (_ref3) {
+  return createScopedElement(React.Fragment, null, (hasMouse === undefined || hasMouse === true) && createScopedElement(CustomSelect, _extends({
+    vkuiClass: classNames("Select__custom", getMouseClassName("Select__custom", hasMouse)),
+    options: options,
+    popupDirection: popupDirection,
+    renderOption: renderOption
+  }, props)), (hasMouse === undefined || hasMouse === false) && createScopedElement(NativeSelect, _extends({
+    vkuiClass: classNames("Select__native", getMouseClassName("Select__native", hasMouse))
+  }, props), options.map(function (_ref3) {
     var label = _ref3.label,
         value = _ref3.value;
     return createScopedElement("option", {
       value: value,
       key: "".concat(value)
     }, label);
-  }));
+  })));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Select
- */
-
-
-export var Select = withAdaptivity(SelectComponent, {
-  hasMouse: true
-});
-Select.displayName = "Select";
 //# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["NativeSelect","CustomSelect","withAdaptivity","useAdaptivity","usePlatform","Platform","VKCOM","SizeType","Paragraph","Text","Headline","SelectType","default","plain","accent","SelectTypography","selectType","children","restProps","platform","sizeY","ANDROID","Component","COMPACT","SelectComponent","hasMouse","props","options","popupDirection","renderOption","map","label","value","Select","displayName"],"sources":["../../../../src/components/Select/Select.tsx"],"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 = ({\n  selectType = SelectType.default,\n  children,\n  ...restProps\n}: React.PropsWithChildren<Pick<CustomSelectProps, \"selectType\">>) => {\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 = ({\n  hasMouse,\n  ...props\n}: SelectProps & AdaptivityContextInterface) => {\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\nSelect.displayName = \"Select\";\n"],"mappings":";;;;;;;AACA,SAASA,YAAT;AACA,SAASC,YAAT;AACA,SAASC,cAAT;AACA,SAASC,aAAT;AACA,SAASC,WAAT;AACA,SAASC,QAAT,EAAmBC,KAAnB;AACA,SAGEC,QAHF;AAKA,SAASC,SAAT;AACA,SAASC,IAAT;AACA,SAASC,QAAT;AAEA,OAAO,IAAMC,UAAU,GAAG;EACxBC,OAAO,EAAE,SADe;EAExBC,KAAK,EAAE,OAFiB;EAGxBC,MAAM,EAAE;AAHgB,CAAnB,C,CAMP;;AACA;AACA;AACA;;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAIsC;EAAA,2BAHpEC,UAGoE;EAAA,IAHpEA,UAGoE,gCAHvDL,UAAU,CAACC,OAG4C;EAAA,IAFpEK,QAEoE,QAFpEA,QAEoE;EAAA,IADjEC,SACiE;;EACpE,IAAMC,QAAQ,GAAGf,WAAW,EAA5B;;EACA,qBAAkBD,aAAa,EAA/B;EAAA,IAAQiB,KAAR,kBAAQA,KAAR;;EAEA,IAAIJ,UAAU,KAAKL,UAAU,CAACG,MAA9B,EAAsC;IACpC,OACE,oBAAC,SAAD;MACE,MAAM,EAAEK,QAAQ,KAAKd,QAAQ,CAACgB,OAAtB,GAAgC,GAAhC,GAAsC;IADhD,GAEMH,SAFN,GAIGD,QAJH,CADF;EAQD;;EAED,IAAMK,SAAS,GACbH,QAAQ,KAAKb,KAAb,IAAsBc,KAAK,KAAKb,QAAQ,CAACgB,OAAzC,GAAmDd,IAAnD,GAA0DC,QAD5D;EAGA,OACE,oBAAC,SAAD;IAAW,SAAS,EAAC;EAArB,GAAgCQ,SAAhC,GACGD,QADH,CADF;AAKD,CA3BM;;AA+BP,IAAMO,eAAe,GAAG,SAAlBA,eAAkB,QAGwB;EAAA,IAF9CC,QAE8C,SAF9CA,QAE8C;EAAA,IAD3CC,KAC2C;;EAC9C;EACA,IAAID,QAAJ,EAAc;IACZ,IAAQR,QAAR,GAAmCS,KAAnC,CAAQT,QAAR;IAAA,IAAqBC,UAArB,4BAAmCQ,KAAnC;;IAEA,OAAO,oBAAC,YAAD,EAAkBR,UAAlB,CAAP;EACD;;EAED,qBAAqEQ,KAArE,CAAQC,OAAR;EAAA,IAAQA,OAAR,+BAAkB,EAAlB;EAAA,IAAsBC,cAAtB,GAAqEF,KAArE,CAAsBE,cAAtB;EAAA,IAAsCC,YAAtC,GAAqEH,KAArE,CAAsCG,YAAtC;EAAA,IAAuDX,SAAvD,4BAAqEQ,KAArE;;EAEA,OACE,oBAAC,YAAD,EAAkBR,SAAlB,EACGS,OAAO,CAACG,GAAR,CAAY;IAAA,IAAGC,KAAH,SAAGA,KAAH;IAAA,IAAUC,KAAV,SAAUA,KAAV;IAAA,OACX;MAAQ,KAAK,EAAEA,KAAf;MAAsB,GAAG,YAAKA,KAAL;IAAzB,GACGD,KADH,CADW;EAAA,CAAZ,CADH,CADF;AASD,CAtBD;AAwBA;AACA;AACA;;;AACA,OAAO,IAAME,MAAM,GAAG/B,cAAc,CAACsB,eAAD,EAAkB;EACpDC,QAAQ,EAAE;AAD0C,CAAlB,CAA7B;AAIPQ,MAAM,CAACC,WAAP,GAAqB,QAArB"}
+{"version":3,"file":"Select.js","names":["React","NativeSelect","CustomSelect","useAdaptivity","usePlatform","classNames","getClassName","getSizeYClassName","getMouseClassName","SelectTypography","selectType","children","restProps","platform","sizeY","Select","options","popupDirection","renderOption","props","hasMouse","undefined","map","label","value"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { NativeSelect } from \"../NativeSelect/NativeSelect\";\nimport { CustomSelect, SelectProps } from \"../CustomSelect/CustomSelect\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { getMouseClassName } from \"../../helpers/getMouseClassName\";\n\nexport type SelectType = \"default\" | \"plain\" | \"accent\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectTypography\n */\nexport const SelectTypography = ({\n  selectType = \"default\",\n  children,\n  ...restProps\n}: React.PropsWithChildren<Pick<SelectProps, \"selectType\">>) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <span\n      vkuiClass={classNames(\n        getClassName(\"SelectTypography\", platform),\n        getSizeYClassName(\"SelectTypography\", sizeY),\n        `SelectTypography--selectType-${selectType}`\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select: React.FC<SelectProps> = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  ...props\n}) => {\n  const { hasMouse } = useAdaptivity();\n\n  return (\n    <React.Fragment>\n      {(hasMouse === undefined || hasMouse === true) && (\n        <CustomSelect\n          vkuiClass={classNames(\n            \"Select__custom\",\n            getMouseClassName(\"Select__custom\", hasMouse)\n          )}\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasMouse === undefined || hasMouse === false) && (\n        <NativeSelect\n          vkuiClass={classNames(\n            \"Select__native\",\n            getMouseClassName(\"Select__native\", hasMouse)\n          )}\n          {...props}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,YAAT;AACA,SAASC,aAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,iBAAT;AACA,SAASC,iBAAT;;AAIA;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAIgC;EAAA,2BAH9DC,UAG8D;EAAA,IAH9DA,UAG8D,gCAHjD,SAGiD;EAAA,IAF9DC,QAE8D,QAF9DA,QAE8D;EAAA,IAD3DC,SAC2D;;EAC9D,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;;EACA,qBAAkBD,aAAa,EAA/B;EAAA,IAAQW,KAAR,kBAAQA,KAAR;;EAEA,OACE;IACE,SAAS,EAAET,UAAU,CACnBC,YAAY,CAAC,kBAAD,EAAqBO,QAArB,CADO,EAEnBN,iBAAiB,CAAC,kBAAD,EAAqBO,KAArB,CAFE,yCAGaJ,UAHb;EADvB,GAMME,SANN,GAQGD,QARH,CADF;AAYD,CApBM;AAsBP;AACA;AACA;;AACA,OAAO,IAAMI,MAA6B,GAAG,SAAhCA,MAAgC,QAMvC;EAAA,IALJJ,QAKI,SALJA,QAKI;EAAA,0BAJJK,OAII;EAAA,IAJJA,OAII,8BAJM,EAIN;EAAA,IAHJC,cAGI,SAHJA,cAGI;EAAA,IAFJC,YAEI,SAFJA,YAEI;EAAA,IADDC,KACC;;EACJ,sBAAqBhB,aAAa,EAAlC;EAAA,IAAQiB,QAAR,mBAAQA,QAAR;;EAEA,OACE,oBAAC,KAAD,CAAO,QAAP,QACG,CAACA,QAAQ,KAAKC,SAAb,IAA0BD,QAAQ,KAAK,IAAxC,KACC,oBAAC,YAAD;IACE,SAAS,EAAEf,UAAU,CACnB,gBADmB,EAEnBG,iBAAiB,CAAC,gBAAD,EAAmBY,QAAnB,CAFE,CADvB;IAKE,OAAO,EAAEJ,OALX;IAME,cAAc,EAAEC,cANlB;IAOE,YAAY,EAAEC;EAPhB,GAQMC,KARN,EAFJ,EAaG,CAACC,QAAQ,KAAKC,SAAb,IAA0BD,QAAQ,KAAK,KAAxC,KACC,oBAAC,YAAD;IACE,SAAS,EAAEf,UAAU,CACnB,gBADmB,EAEnBG,iBAAiB,CAAC,gBAAD,EAAmBY,QAAnB,CAFE;EADvB,GAKMD,KALN,GAOGH,OAAO,CAACM,GAAR,CAAY;IAAA,IAAGC,KAAH,SAAGA,KAAH;IAAA,IAAUC,KAAV,SAAUA,KAAV;IAAA,OACX;MAAQ,KAAK,EAAEA,KAAf;MAAsB,GAAG,YAAKA,KAAL;IAAzB,GACGD,KADH,CADW;EAAA,CAAZ,CAPH,CAdJ,CADF;AA+BD,CAxCM"}

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

@@ -1,15 +1,14 @@
 import * as React from "react";
 import { FormFieldProps } from "../FormField/FormField";
 import { HasAlign, HasRootRef } from "../../types";
-import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import { SelectType } from "../Select/Select";
 import "../Select/Select.css";
-export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, AdaptivityProps, Pick<FormFieldProps, "before" | "after" | "status"> {
+export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, Pick<FormFieldProps, "before" | "after" | "status"> {
     multiline?: boolean;
     disabled?: boolean;
-    selectType?: keyof typeof SelectType;
+    selectType?: SelectType;
 }
 /**
  * @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" | "status" | "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 declare const SelectMimicry: ({ tabIndex, placeholder, children, align, getRootRef, multiline, disabled, onClick, before, after, selectType, status, ...restProps }: SelectMimicryProps) => JSX.Element;

package/dist/cssm/components/SelectMimicry/SelectMimicry.js

@@ -1,18 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["tabIndex", "placeholder", "children", "align", "getRootRef", "multiline", "disabled", "onClick", "sizeX", "sizeY", "before", "after", "selectType", "status"];
+var _excluded = ["tabIndex", "placeholder", "children", "align", "getRootRef", "multiline", "disabled", "onClick", "before", "after", "selectType", "status"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { classNames } from "../../lib/classNames";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { getFormFieldModeFromSelectType } from "../../lib/select";
-import { SelectType, SelectTypography } from "../Select/Select";
+import { SelectTypography } from "../Select/Select";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 import "../Select/Select.css";
 
-var SelectMimicryComponent = function SelectMimicryComponent(_ref) {
+/**
+ * @see https://vkcom.github.io/VKUI/#/SelectMimicry
+ */
+export var SelectMimicry = function SelectMimicry(_ref) {
   var _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
       placeholder = _ref.placeholder,
@@ -22,23 +27,24 @@ var SelectMimicryComponent = function SelectMimicryComponent(_ref) {
       multiline = _ref.multiline,
       disabled = _ref.disabled,
       onClick = _ref.onClick,
-      sizeX = _ref.sizeX,
-      sizeY = _ref.sizeY,
       before = _ref.before,
       _ref$after = _ref.after,
       after = _ref$after === void 0 ? createScopedElement(DropdownIcon, null) : _ref$after,
       _ref$selectType = _ref.selectType,
-      selectType = _ref$selectType === void 0 ? SelectType.default : _ref$selectType,
+      selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
       status = _ref.status,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
+
+  var _useAdaptivity = useAdaptivity(),
+      sizeX = _useAdaptivity.sizeX,
+      sizeY = _useAdaptivity.sizeY;
+
   var title = children || placeholder;
   return createScopedElement(FormField, _extends({}, restProps, {
     tabIndex: disabled ? undefined : tabIndex,
-    vkuiClass: classNames(getClassName("Select", platform), "Select--".concat(selectType), !children && "Select--empty", multiline && "Select--multiline", align && "Select--align-".concat(align), "Select--sizeX-".concat(sizeX), // TODO v5.0.0 поправить под новую адаптивность
-    "Select--sizeY-".concat(sizeY), // TODO v5.0.0 поправить под новую адаптивность
-    before && "Select--hasBefore", after && "Select--hasAfter"),
+    vkuiClass: classNames(getClassName("Select", platform), getSizeXClassName("Select", sizeX), getSizeYClassName("Select", sizeY), multiline && "Select--multiline", align && "Select--align-".concat(align), before && "Select--hasBefore", after && "Select--hasAfter"),
     getRootRef: getRootRef,
     onClick: disabled ? undefined : onClick,
     disabled: disabled,
@@ -53,14 +59,4 @@ var SelectMimicryComponent = function SelectMimicryComponent(_ref) {
     vkuiClass: "Select__title"
   }, title)));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/SelectMimicry
- */
-
-
-export var SelectMimicry = withAdaptivity(SelectMimicryComponent, {
-  sizeX: true,
-  sizeY: true
-});
-SelectMimicry.displayName = "SelectMimicry";
 //# sourceMappingURL=SelectMimicry.js.map