@vkontakte/vkui 5.3.2 → 5.4.1

package/dist/components/Search/Search.js

@@ -1,4 +1,3 @@
-import _define_property from "@swc/helpers/src/_define_property.mjs";
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
@@ -7,38 +6,19 @@ import * as React from "react";
 import { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from "@vkontakte/icons";
 import { classNames, noop } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useBooleanState } from "../../hooks/useBooleanState";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
 import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
-import { Touch } from "../Touch/Touch";
+import { Button } from "../Button/Button";
+import { IconButton } from "../IconButton/IconButton";
 import { Headline } from "../Typography/Headline/Headline";
-import { Title } from "../Typography/Title/Title";
-var sizeYClassNames = _define_property({
-    none: "vkuiSearch--sizeY-none"
-}, SizeType.REGULAR, "vkuiSearch--sizeY-regular");
-var SearchPlaceholderTypography = function(_param) {
-    var children = _param.children, restProps = _object_without_properties(_param, [
-        "children"
-    ]);
-    var platform = usePlatform();
-    switch(platform){
-        case Platform.IOS:
-            return /*#__PURE__*/ React.createElement(Title, _object_spread_props(_object_spread({}, restProps), {
-                level: "3",
-                weight: "3"
-            }), children);
-        default:
-            return /*#__PURE__*/ React.createElement(Headline, _object_spread_props(_object_spread({}, restProps), {
-                weight: "3"
-            }), children);
-    }
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */ export var Search = function(_param) {
-    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ React.createElement(Icon16SearchOutline, null) : _param_before, className = _param.className, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Поиск" : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? "Отмена" : _param_after, getRef = _param.getRef, icon = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? "off" : _param_autoComplete, onChangeProp = _param.onChange, valueProp = _param.value, inputProps = _object_without_properties(_param, [
+    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ React.createElement(Icon16SearchOutline, null) : _param_before, className = _param.className, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Поиск" : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? "Отмена" : _param_after, getRef = _param.getRef, icon = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? "off" : _param_autoComplete, onChangeProp = _param.onChange, valueProp = _param.value, iconAriaLabel = _param.iconAriaLabel, _param_clearAriaLabel = _param.clearAriaLabel, clearAriaLabel = _param_clearAriaLabel === void 0 ? "Очистить" : _param_clearAriaLabel, inputProps = _object_without_properties(_param, [
         "before",
         "className",
         "defaultValue",
@@ -50,10 +30,12 @@ var SearchPlaceholderTypography = function(_param) {
         "style",
         "autoComplete",
         "onChange",
-        "value"
+        "value",
+        "iconAriaLabel",
+        "clearAriaLabel"
     ]);
     var inputRef = useExternRef(getRef);
-    var _React_useState = _sliced_to_array(React.useState(false), 2), isFocused = _React_useState[0], setFocused = _React_useState[1];
+    var _useBooleanState = useBooleanState(false), isFocused = _useBooleanState.value, setFocusedTrue = _useBooleanState.setTrue, setFocusedFalse = _useBooleanState.setFalse;
     var _useEnsuredControl = _sliced_to_array(useEnsuredControl({
         defaultValue: defaultValue,
         onChange: onChangeProp,
@@ -62,11 +44,11 @@ var SearchPlaceholderTypography = function(_param) {
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var platform = usePlatform();
     var onFocus = function(e) {
-        setFocused(true);
+        setFocusedTrue();
         inputProps.onFocus && inputProps.onFocus(e);
     };
     var onBlur = function(e) {
-        setFocused(false);
+        setFocusedFalse();
         inputProps.onBlur && inputProps.onBlur(e);
     };
     var onCancel = React.useCallback(function() {
@@ -96,49 +78,52 @@ var SearchPlaceholderTypography = function(_param) {
         onCancel
     ]);
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames("vkuiSearch", sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
+        className: classNames("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === SizeType.COMPACT && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
         style: style
     }, /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiSearch__in"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiSearch__width"
-    }), /*#__PURE__*/ React.createElement("label", {
+        className: "vkuiSearch__field"
+    }, /*#__PURE__*/ React.createElement("label", {
         className: "vkuiSearch__control"
-    }, /*#__PURE__*/ React.createElement("input", _object_spread_props(_object_spread({
-        type: "search"
+    }, before, /*#__PURE__*/ React.createElement(Headline, _object_spread_props(_object_spread({
+        Component: "input",
+        type: "search",
+        level: "1",
+        weight: "3"
     }, inputProps), {
+        placeholder: placeholder,
         autoComplete: autoComplete,
-        ref: inputRef,
+        getRootRef: inputRef,
         className: "vkuiSearch__input",
         onFocus: onFocus,
         onBlur: onBlur,
         onChange: onChange,
         value: value
-    })), platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiSearch__after-width"
-    }, after), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiSearch__placeholder"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiSearch__placeholder-in"
-    }, before, /*#__PURE__*/ React.createElement(SearchPlaceholderTypography, {
-        className: "vkuiSearch__placeholder-text"
-    }, placeholder)), isFocused && platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiSearch__after-width"
-    }, after))), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiSearch__after"
-    }, /*#__PURE__*/ React.createElement("div", {
+    }))), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiSearch__icons"
-    }, icon && /*#__PURE__*/ React.createElement(Touch, {
+    }, icon && /*#__PURE__*/ React.createElement(IconButton, {
+        hoverMode: "opacity",
         onStart: onIconClickStart,
-        className: "vkuiSearch__icon"
-    }, icon), !!value && /*#__PURE__*/ React.createElement(Touch, {
+        className: "vkuiSearch__icon",
+        onFocus: setFocusedTrue,
+        onBlur: setFocusedFalse,
+        "aria-label": iconAriaLabel
+    }, icon), !!value && /*#__PURE__*/ React.createElement(IconButton, {
+        hoverMode: "opacity",
         onStart: onIconCancelClickStart,
         onClick: onCancel,
-        className: "vkuiSearch__icon"
-    }, platform === Platform.IOS ? /*#__PURE__*/ React.createElement(Icon16Clear, null) : /*#__PURE__*/ React.createElement(Icon24Cancel, null))), platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiSearch__after-in",
-        onClick: onCancel
-    }, after))));
+        className: "vkuiSearch__icon",
+        "aria-label": clearAriaLabel
+    }, platform === Platform.IOS ? /*#__PURE__*/ React.createElement(Icon16Clear, null) : /*#__PURE__*/ React.createElement(Icon24Cancel, null)))), platform === Platform.IOS && after && /*#__PURE__*/ React.createElement(Button, {
+        mode: "tertiary",
+        size: "m",
+        className: "vkuiSearch__after",
+        focusVisibleMode: "inside",
+        onClick: onCancel,
+        onFocus: setFocusedTrue,
+        onBlur: setFocusedFalse
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: "vkuiSearch__afterText"
+    }, after)));
 };
 
 //# sourceMappingURL=Search.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Search.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Search--sizeY-none'],\n  [SizeType.REGULAR]: styles['Search--sizeY-regular'],\n};\n\nconst SearchPlaceholderTypography = ({\n  children,\n  ...restProps\n}: React.HTMLAttributes<HTMLElement>) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    default:\n      return (\n        <Headline {...restProps} weight=\"3\">\n          {children}\n        </Headline>\n      );\n  }\n};\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      onCancel();\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        styles['Search'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__in']}>\n        <div className={styles['Search__width']} />\n        <label className={styles['Search__control']}>\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-width']}>{after}</div>\n          )}\n          <div className={styles['Search__placeholder']}>\n            <div className={styles['Search__placeholder-in']}>\n              {before}\n              <SearchPlaceholderTypography className={styles['Search__placeholder-text']}>\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === Platform.IOS && after && (\n              <div className={styles['Search__after-width']}>{after}</div>\n            )}\n          </div>\n        </label>\n        <div className={styles['Search__after']}>\n          <div className={styles['Search__icons']}>\n            {icon && (\n              <Touch onStart={onIconClickStart} className={styles['Search__icon']}>\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch\n                onStart={onIconCancelClickStart}\n                onClick={onCancel}\n                className={styles['Search__icon']}\n              >\n                {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-in']} onClick={onCancel}>\n              {after}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Touch","Headline","Title","sizeYClassNames","none","REGULAR","SearchPlaceholderTypography","children","restProps","platform","IOS","level","weight","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","inputProps","inputRef","useState","isFocused","setFocused","sizeY","onFocus","e","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","label","input","type","ref","onStart","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      onCancel();\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Button","IconButton","Headline","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"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"}

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

@@ -1,6 +1,8 @@
-/// <reference types="react" />
-import { VisuallyHiddenInputProps } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
+import * as React from 'react';
+import { HasRef } from '../../../types';
+export interface SegmentedControlOptionProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+}
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export declare const SegmentedControlOption: ({ className, style, children, ...restProps }: VisuallyHiddenInputProps) => JSX.Element;
+export declare const SegmentedControlOption: ({ getRef, className, style, children, ...restProps }: SegmentedControlOptionProps) => JSX.Element;

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

@@ -9,30 +9,34 @@ import { useFocusVisible } from "../../../hooks/useFocusVisible";
 import { SizeType } from "../../../lib/adaptivity";
 import { callMultiple } from "../../../lib/callMultiple";
 import { FocusVisible } from "../../FocusVisible/FocusVisible";
-import { VisuallyHiddenInput } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
+import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden";
 var sizeYClassNames = _define_property({
     none: "vkuiSegmentedControlOption__content--sizeY-none"
 }, SizeType.COMPACT, "vkuiSegmentedControlOption__content--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */ export var SegmentedControlOption = function(_param) {
-    var className = _param.className, style = _param.style, children = _param.children, restProps = _object_without_properties(_param, [
+    var getRef = _param.getRef, className = _param.className, style = _param.style, children = _param.children, restProps = _object_without_properties(_param, [
+        "getRef",
         "className",
         "style",
         "children"
     ]);
-    var _useFocusVisible = useFocusVisible(), onBlur = _useFocusVisible.onBlur, onFocus = _useFocusVisible.onFocus;
+    var _useFocusVisible = useFocusVisible(), focusVisible = _useFocusVisible.focusVisible, onBlur = _useFocusVisible.onBlur, onFocus = _useFocusVisible.onFocus;
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     return /*#__PURE__*/ React.createElement("label", {
         className: classNames("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", className),
         style: style
-    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, _object_spread_props(_object_spread({}, restProps), {
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, _object_spread_props(_object_spread({}, restProps), {
+        Component: "input",
+        getRootRef: getRef,
         type: "radio",
         onBlur: callMultiple(onBlur, restProps.onBlur),
         onFocus: callMultiple(onFocus, restProps.onFocus)
     })), /*#__PURE__*/ React.createElement("span", {
         className: classNames("vkuiSegmentedControlOption__content", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY])
     }, children), /*#__PURE__*/ React.createElement(FocusVisible, {
+        visible: focusVisible,
         mode: "inside"
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControlOption__content--sizeY-none'],\n  [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\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 { onBlur, onFocus } = useFocusVisible();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","SizeType","callMultiple","FocusVisible","VisuallyHiddenInput","sizeYClassNames","none","COMPACT","SegmentedControlOption","className","style","children","restProps","onBlur","onFocus","sizeY","label","checked","type","span","REGULAR","mode"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SACEC,mBAAmB,QAEd,gDAAgD;AAGvD,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AAGnB;;CAEC,GACD,OAAO,IAAMC,yBAAyB,iBAKN;QAJ9BC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACGC;QAHHH;QACAC;QACAC;;IAGA,IAA4BX,mBAAAA,mBAApBa,SAAoBb,iBAApBa,QAAQC,UAAYd,iBAAZc;IAChB,IAA2Bf,iBAAAA,wCAAAA,eAAnBgB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC;QACCP,WAAWX,yCAETc,UAAUK,OAAO,2CACjBR;QAEFC,OAAOA;qBAEP,oBAACN,6DACKQ;QACJM,MAAK;QACLL,QAAQX,aAAaW,QAAQD,UAAUC,MAAM;QAC7CC,SAASZ,aAAaY,SAASF,UAAUE,OAAO;uBAElD,oBAACK;QACCV,WAAWX,kDAETiB,UAAUd,SAASmB,OAAO,IAAIf,eAAe,CAACU,MAAM;OAGrDJ,yBAEH,oBAACR;QAAakB,MAAK;;AAGzB,EAAE"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControlOption__content--sizeY-none'],\n  [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","SizeType","callMultiple","FocusVisible","VisuallyHidden","sizeYClassNames","none","COMPACT","SegmentedControlOption","getRef","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","label","checked","Component","getRootRef","type","span","REGULAR","visible","mode"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,cAAc,QAAQ,sCAAsC;AAGrE,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AAOnB;;CAEC,GACD,OAAO,IAAMC,yBAAyB,iBAMH;QALjCC,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0CZ,mBAAAA,mBAAlCc,eAAkCd,iBAAlCc,cAAcC,SAAoBf,iBAApBe,QAAQC,UAAYhB,iBAAZgB;IAC9B,IAA2BjB,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC;QACCR,WAAWZ,yCAETe,UAAUM,OAAO,2CACjBT;QAEFC,OAAOA;qBAEP,oBAACP,wDACKS;QACJO,WAAU;QACVC,YAAYZ;QACZa,MAAK;QACLP,QAAQb,aAAaa,QAAQF,UAAUE,MAAM;QAC7CC,SAASd,aAAac,SAASH,UAAUG,OAAO;uBAElD,oBAACO;QACCb,WAAWZ,kDAETmB,UAAUhB,SAASuB,OAAO,IAAInB,eAAe,CAACY,MAAM;OAGrDL,yBAEH,oBAACT;QAAasB,SAASX;QAAcY,MAAK;;AAGhD,EAAE"}

package/dist/components/SelectMimicry/SelectMimicry.js

@@ -35,7 +35,7 @@ var sizeYClassNames = _define_property({
     var title = children || placeholder;
     return /*#__PURE__*/ React.createElement(FormField, _object_spread_props(_object_spread({}, restProps), {
         tabIndex: disabled ? undefined : tabIndex,
-        className: classNames("vkuiSelect", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], !children && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align === "center" && "vkuiSelect--align-center", align === "right" && "vkuiSelect--align-right", before && "vkuiSelect--hasBefore", after && "vkuiSelect--hasAfter", className),
+        className: classNames("vkuiSelect", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], !children && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align === "center" && "vkuiSelect--align-center", align === "right" && "vkuiSelect--align-right", before && "vkuiSelect--hasBefore", className),
         getRootRef: getRootRef,
         onClick: disabled ? undefined : onClick,
         disabled: disabled,

package/dist/components/SelectMimicry/SelectMimicry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        before && styles['Select--hasBefore'],\n        after && styles['Select--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","sizeY","title","undefined","REGULAR","mode","div"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAanB;;CAEC,GACD,OAAO,IAAMC,gBAAgB,iBAeH;iCAdxBC,UAAAA,wCAAW,qBACXC,qBAAAA,aACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,gBAAAA,8BACAC,OAAAA,gDAAQ,oBAAChB,+DACTiB,YAAAA,4CAAa,+BACbC,gBAAAA,QACAC,mBAAAA,WACGC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BtB,iBAAAA,wCAAAA,eAAnBwB,OAAAA,0CAAQ;IAChB,IAAMC,QAAQb,YAAYD;IAE1B,qBACE,oBAACP,mDACKmB;QACJb,UAAUM,WAAWU,YAAYhB,QAAQ;QACzCY,WAAWvB,yBAETyB,UAAUvB,SAAS0B,OAAO,IAAIrB,eAAe,CAACkB,MAAM,EACpD,CAACZ,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAC,iCACAG;QAEFR,YAAYA;QACZG,SAASD,WAAWU,YAAYT,OAAO;QACvCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPS,MAAM1B,+BAA+BkB;QACrCC,QAAQA;sBAER,oBAACQ;QAAIP,SAAS;qBACZ,oBAACjB;QAAiBe,YAAYA;QAAYE,SAAS;OAChDG;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        before && styles['Select--hasBefore'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","sizeY","title","undefined","REGULAR","mode","div"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAanB;;CAEC,GACD,OAAO,IAAMC,gBAAgB,iBAeH;iCAdxBC,UAAAA,wCAAW,qBACXC,qBAAAA,aACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,gBAAAA,8BACAC,OAAAA,gDAAQ,oBAAChB,+DACTiB,YAAAA,4CAAa,+BACbC,gBAAAA,QACAC,mBAAAA,WACGC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BtB,iBAAAA,wCAAAA,eAAnBwB,OAAAA,0CAAQ;IAChB,IAAMC,QAAQb,YAAYD;IAE1B,qBACE,oBAACP,mDACKmB;QACJb,UAAUM,WAAWU,YAAYhB,QAAQ;QACzCY,WAAWvB,yBAETyB,UAAUvB,SAAS0B,OAAO,IAAIrB,eAAe,CAACkB,MAAM,EACpD,CAACZ,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAI;QAEFR,YAAYA;QACZG,SAASD,WAAWU,YAAYT,OAAO;QACvCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPS,MAAM1B,+BAA+BkB;QACrCC,QAAQA;sBAER,oBAACQ;QAAIP,SAAS;qBACZ,oBAACjB;QAAiBe,YAAYA;QAAYE,SAAS;OAChDG;AAKX,EAAE"}

package/dist/components/SelectTypography/SelectTypography.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
+import { HasChildren } from '../../types';
 import type { SelectType } from '../Select/Select';
-export interface SelectTypographyProps {
+export interface SelectTypographyProps extends React.HTMLAttributes<HTMLSpanElement>, HasChildren {
     selectType?: SelectType;
-    className?: string;
-    children?: React.ReactNode;
 }
 /**
  * @private

package/dist/components/SelectTypography/SelectTypography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n};\n\nconst platformClassNames = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nexport interface SelectTypographyProps {\n  selectType?: SelectType;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames.hasOwnProperty(platform) && platformClassNames[platform],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        selectType === 'accent' && styles['SelectTypography--selectType-accent'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","sizeYClassNames","none","compact","platformClassNames","vkcom","android","SelectTypography","selectType","children","className","restProps","platform","sizeY","span","hasOwnProperty","REGULAR"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAIhD,IAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,IAAMC,qBAAqB;IACzBC,KAAK;IACLC,OAAO;AACT;AAQA;;CAEC,GACD,OAAO,IAAMC,mBAAmB,iBAKH;mCAJ3BC,YAAAA,4CAAa,+BACbC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,IAAME,WAAWb;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBe,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC;QACCJ,WAAWb,mCAETO,mBAAmBW,cAAc,CAACH,aAAaR,kBAAkB,CAACQ,SAAS,EAC3EC,UAAUb,SAASgB,OAAO,IAAIf,eAAe,CAACY,MAAM,EACpDL,eAAe,uDACfE;OAEEC,YAEHF;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n};\n\nconst platformClassNames = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nexport interface SelectTypographyProps extends React.HTMLAttributes<HTMLSpanElement>, HasChildren {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames.hasOwnProperty(platform) && platformClassNames[platform],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        selectType === 'accent' && styles['SelectTypography--selectType-accent'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","sizeYClassNames","none","compact","platformClassNames","vkcom","android","SelectTypography","selectType","children","className","restProps","platform","sizeY","span","hasOwnProperty","REGULAR"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAKhD,IAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,IAAMC,qBAAqB;IACzBC,KAAK;IACLC,OAAO;AACT;AAMA;;CAEC,GACD,OAAO,IAAMC,mBAAmB,iBAKH;mCAJ3BC,YAAAA,4CAAa,+BACbC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,IAAME,WAAWb;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBe,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC;QACCJ,WAAWb,mCAETO,mBAAmBW,cAAc,CAACH,aAAaR,kBAAkB,CAACQ,SAAS,EAC3EC,UAAUb,SAASgB,OAAO,IAAIf,eAAe,CAACY,MAAM,EACpDL,eAAe,uDACfE;OAEEC,YAEHF;AAGP,EAAE"}

package/dist/components/SimpleCell/SimpleCell.js

@@ -10,6 +10,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
 import { Tappable } from "../Tappable/Tappable";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
 var platformClassNames = {
@@ -46,7 +47,7 @@ var sizeYClassNames = (_obj = {
     return /*#__PURE__*/ React.createElement(Tappable, _object_spread_props(_object_spread({}, restProps), {
         className: classNames("vkuiSimpleCell", "vkuiInternalSimpleCell", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, sizeYClassNames[sizeY], multiline && "vkuiSimpleCell--mult", className)
     }), before, /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiSimpleCell__main"
+        className: classNames("vkuiSimpleCell__main", "vkuiInternalSimpleCell__main")
     }, subhead && /*#__PURE__*/ React.createElement(Subhead, {
         Component: "span",
         className: classNames("vkuiSimpleCell__text", "vkuiSimpleCell__subhead")
@@ -64,12 +65,14 @@ var sizeYClassNames = (_obj = {
         className: "vkuiSimpleCell__content"
     }, badgeBeforeSubtitle && /*#__PURE__*/ React.createElement("span", {
         className: "vkuiSimpleCell__badge"
-    }, badgeBeforeSubtitle), /*#__PURE__*/ React.createElement("span", {
-        className: classNames("vkuiSimpleCell__typography", "vkuiSimpleCell__text", "vkuiSimpleCell__subtitle")
+    }, badgeBeforeSubtitle), /*#__PURE__*/ React.createElement(Footnote, {
+        normalize: false,
+        className: classNames("vkuiSimpleCell__text", "vkuiSimpleCell__subtitle")
     }, subtitle), badgeAfterSubtitle && /*#__PURE__*/ React.createElement("span", {
         className: "vkuiSimpleCell__badge"
-    }, badgeAfterSubtitle)), extraSubtitle && /*#__PURE__*/ React.createElement("span", {
-        className: classNames("vkuiSimpleCell__typography", "vkuiSimpleCell__text", "vkuiSimpleCell__extraSubtitle")
+    }, badgeAfterSubtitle)), extraSubtitle && /*#__PURE__*/ React.createElement(Footnote, {
+        normalize: false,
+        className: classNames("vkuiSimpleCell__text", "vkuiSimpleCell__extraSubtitle")
     }, extraSubtitle)), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Headline, {
         Component: "span",
         weight: "3",

package/dist/components/SimpleCell/SimpleCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SimpleCell.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === Platform.IOS);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={styles['SimpleCell__main']}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <span\n              className={classNames(\n                styles['SimpleCell__typography'],\n                styles['SimpleCell__text'],\n                styles['SimpleCell__subtitle'],\n              )}\n            >\n              {subtitle}\n            </span>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <span\n            className={classNames(\n              styles['SimpleCell__typography'],\n              styles['SimpleCell__text'],\n              styles['SimpleCell__extraSubtitle'],\n            )}\n          >\n            {extraSubtitle}\n          </span>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {expandable && platform === Platform.IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Chevron","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Tappable","Headline","Subhead","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","hasAfter","IOS","sizeY","hasOwnProperty","div","Component","span","weight"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,qBAAqB;IACzBC,KAAKV,kCAAsC;IAC3CW,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMd,yCAA6C;GACnD,iBAFsB,MAErBI,SAASW,OAAO,EAAGf,4CAElB,4DAJoB,MAMrBI,SAASY,OAAO,oCANK;AAkExB;;CAEC,GACD,OAAO,IAAMC,aAAa,iBAgBH;QAfrBC,0BAAAA,kBACAC,yBAAAA,iBACAC,6BAAAA,qBACAC,4BAAAA,oBACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,mBAAAA,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAW9B;IACjB,IAAM+B,WAAWjC,aAAawB,UAAWC,cAAcO,aAAa5B,SAAS8B,GAAG;IAChF,IAA2BjC,iBAAAA,wCAAAA,eAAnBkC,OAAAA,0CAAQ;IAEhB,qBACE,oBAAC9B,kDACK0B;QACJD,WAAW/B,6BAET,0BACAS,mBAAmB4B,cAAc,CAACJ,YAC9BxB,kBAAkB,CAACwB,SAAS,GAC5BxB,mBAAmBE,OAAO,EAC9BE,eAAe,CAACuB,MAAM,EACtBT,qCACAI;QAGDT,sBACD,oBAACgB;QAAIP,SAAS;OACXH,yBACC,oBAACpB;QACC+B,WAAU;QACVR,WAAW/B;OAEV4B,wBAGL,oBAACU;QAAIP,SAAS;OACXb,kCACC,oBAACsB;QAAKT,SAAS;OAAgCb,iCAEjD,oBAACX;QAASgC,WAAU;QAAOR,SAAS;QAAkCU,QAAO;OAC1EjB,WAEFvB,aAAakB,kCACZ,oBAACqB;QAAKT,SAAS;OAAgCZ,mBAGlDU,0BACC,oBAACS;QAAIP,SAAS;OACXX,qCACC,oBAACoB;QAAKT,SAAS;OAAgCX,oCAEjD,oBAACoB;QACCT,WAAW/B;OAMV6B,WAEFR,oCACC,oBAACmB;QAAKT,SAAS;OAAgCV,sBAIpDS,+BACC,oBAACU;QACCT,WAAW/B;OAMV8B,iBAIN7B,aAAasB,4BACZ,oBAAChB;QAASgC,WAAU;QAAOE,QAAO;QAAIV,SAAS;OAC5CR,YAGJW,0BACC,oBAACI;QAAIP,WAAW/B,oCAAwC;OACrDyB,OACAC,cAAcO,aAAa5B,SAAS8B,GAAG,kBAAI,oBAACpC;AAKvD,EAAE"}
+{"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SimpleCell.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === Platform.IOS);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            normalize={false}\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {expandable && platform === Platform.IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Chevron","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Tappable","Footnote","Headline","Subhead","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","hasAfter","IOS","sizeY","hasOwnProperty","div","Component","span","weight","normalize"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,qBAAqB;IACzBC,KAAKX,kCAAsC;IAC3CY,OAAO;IACPC,KAAK;AACP;IAEwB;AAAxB,IAAMC,mBAAkB;IACtBC,MAAMf,yCAA6C;GACnD,iBAFsB,MAErBI,SAASY,OAAO,EAAGhB,4CAElB,4DAJoB,MAMrBI,SAASa,OAAO,oCANK;AAkExB;;CAEC,GACD,OAAO,IAAMC,aAAa,iBAgBH;QAfrBC,0BAAAA,kBACAC,yBAAAA,iBACAC,6BAAAA,qBACAC,4BAAAA,oBACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,mBAAAA,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAW/B;IACjB,IAAMgC,WAAWlC,aAAayB,UAAWC,cAAcO,aAAa7B,SAAS+B,GAAG;IAChF,IAA2BlC,iBAAAA,wCAAAA,eAAnBmC,OAAAA,0CAAQ;IAEhB,qBACE,oBAAC/B,kDACK2B;QACJD,WAAWhC,6BAET,0BACAU,mBAAmB4B,cAAc,CAACJ,YAC9BxB,kBAAkB,CAACwB,SAAS,GAC5BxB,mBAAmBE,OAAO,EAC9BE,eAAe,CAACuB,MAAM,EACtBT,qCACAI;QAGDT,sBACD,oBAACgB;QAAIP,WAAWhC,mCAAuC;OACpD6B,yBACC,oBAACpB;QACC+B,WAAU;QACVR,WAAWhC;OAEV6B,wBAGL,oBAACU;QAAIP,SAAS;OACXb,kCACC,oBAACsB;QAAKT,SAAS;OAAgCb,iCAEjD,oBAACX;QAASgC,WAAU;QAAOR,SAAS;QAAkCU,QAAO;OAC1EjB,WAEFxB,aAAamB,kCACZ,oBAACqB;QAAKT,SAAS;OAAgCZ,mBAGlDU,0BACC,oBAACS;QAAIP,SAAS;OACXX,qCACC,oBAACoB;QAAKT,SAAS;OAAgCX,oCAEjD,oBAACd;QACCoC,WAAW,KAAK;QAChBX,WAAWhC;OAEV8B,WAEFR,oCACC,oBAACmB;QAAKT,SAAS;OAAgCV,sBAIpDS,+BACC,oBAACxB;QACCoC,WAAW,KAAK;QAChBX,WAAWhC;OAEV+B,iBAIN9B,aAAauB,4BACZ,oBAAChB;QAASgC,WAAU;QAAOE,QAAO;QAAIV,SAAS;OAC5CR,YAGJW,0BACC,oBAACI;QAAIP,WAAWhC,oCAAwC;OACrD0B,OACAC,cAAcO,aAAa7B,SAAS+B,GAAG,kBAAI,oBAACrC;AAKvD,EAAE"}

package/dist/components/Spacing/Spacing.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HasChildren } from '../../types';
+export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {
     /**
      * Высота спэйсинга
      */
     size?: number;
-    children?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing

package/dist/components/Spacing/Spacing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAW7C;;CAEC,GACD,OAAO,IAAMC,UAAU,iBAA2E;6BAAxEC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,oBAACK,+CAAQH;QAAWD,WAAWL,WAAWK;QAA+BF,OAAOA;;AACzF,EAAE"}
+{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAW7C;;CAEC,GACD,OAAO,IAAMC,UAAU,iBAA2E;6BAAxEC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,oBAACK,+CAAQH;QAAWD,WAAWL,WAAWK;QAA+BF,OAAOA;;AACzF,EAAE"}

package/dist/components/SplitCol/SplitCol.js

@@ -71,6 +71,7 @@ var warn = warnOnce("SplitCol");
         animate: animate
     });
     if (process.env.NODE_ENV === "development" && spaced !== undefined) {
+        // TODO [>=6]: Удалить spaced
         warn("Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced");
     }
     return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {

package/dist/components/SplitCol/SplitCol.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","SplitColContext","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","matches","warn","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef","process","env","NODE_ENV","div","ref","Provider","value"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAC/F,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,oBAAoB;AAGpD,IAAMC,uBAAuB;IAC3BC,MAAMX,2CAA+C;IACrDY,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB,EAAE;IACnD,IAAM,AAAEC,YAAchB,gBAAdgB;IACR,IAA8BlB,mCAAAA,MAAMmB,QAAQ,CAACC,QAAQH,mBAA9CI,UAAuBrB,oBAAdsB,aAActB;IAC9B,IAAMuB,eAAepB;IAErBH,MAAMwB,SAAS,CAAC,WAAM;QACpB,IAAIP,gBAAgBQ,WAAW;YAC7BH,WAAWL;YACX;QACF,CAAC;QAED,IAAIC,cAAcO,WAAW;YAC3BH,WAAWJ,YAAYb,UAAUqB,MAAM;YACvC;QACF,CAAC;QAED,oDAAoD;QACpD,IAAMC,WAAW;mBAAML,WAAW,CAACC,aAAaT,eAAe,CAACc,OAAO;;QACvED;QAEApB,0BAA0BgB,aAAaT,eAAe,EAAEa;QACxD,OAAO,WAAM;YACXnB,6BAA6Be,aAAaT,eAAe,EAAEa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOF;AACT;AA2BA,IAAMQ,OAAOpB,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMqB,WAAW,SAACC,OAAyB;IAChD,IACEC,WAYED,MAZFC,UACAC,QAWEF,MAXFE,OACAC,WAUEH,MAVFG,UACAC,WASEJ,MATFI,UACAC,SAQEL,MARFK,QACAf,AAASJ,cAOPc,MAPFV,SACAgB,QAMEN,MANFM,OACAC,QAKEP,MALFO,OACAC,aAIER,MAJFQ,YACAC,oBAGET,MAHFS,mBACAC,YAEEV,MAFFU,WACGC,uCACDX;QAZFC;QACAC;QACAC;QACAC;QACAC;QACAf;QACAgB;QACAC;QACAC;QACAC;QACAC;;IAGF,IAAME,UAAU3C,MAAM4C,MAAM,CAAiB,IAAI;IACjD,IAAM,AAAE1B,YAAchB,gBAAdgB;IACR,IAAMG,UAAUL,qBAAqBC;IAErC,IAAM4B,eAAezC,cAAc;QACjC0C,QAAQH;QACRtB,SAAAA;IACF;IAEA,IAAI0B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBb,WAAWX,WAAW;QAClEI,KAAK;IACP,CAAC;IAED,qBACE,oBAACqB,+CACKR;QACJJ,OAAO,wCACFA;YACHL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZgB,KAAKR;QACLF,WAAWxC,2BAETK,qBAAqBK,sBAAsBO,YAC3CkB,UAAUnC,mCAAuC,iCACjDmC,WAAWX,aACTxB,wCAA4C,sCAC9CsC,cACEtC,wCAA4C,sCAC9CoC,gCACAG,0DACAC;sBAGF,oBAAC/B,gBAAgB0C,QAAQ;QAACC,OAAOR;OAC9BR,sBAAQ,oBAACa;QAAIT,SAAS;OAAmCT,YAAkBA,QAAQ;AAI5F,EAAE"}
+{"version":3,"sources":["../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","SplitColContext","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","matches","warn","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef","process","env","NODE_ENV","div","ref","Provider","value"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAC/F,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,oBAAoB;AAGpD,IAAMC,uBAAuB;IAC3BC,MAAMX,2CAA+C;IACrDY,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB,EAAE;IACnD,IAAM,AAAEC,YAAchB,gBAAdgB;IACR,IAA8BlB,mCAAAA,MAAMmB,QAAQ,CAACC,QAAQH,mBAA9CI,UAAuBrB,oBAAdsB,aAActB;IAC9B,IAAMuB,eAAepB;IAErBH,MAAMwB,SAAS,CAAC,WAAM;QACpB,IAAIP,gBAAgBQ,WAAW;YAC7BH,WAAWL;YACX;QACF,CAAC;QAED,IAAIC,cAAcO,WAAW;YAC3BH,WAAWJ,YAAYb,UAAUqB,MAAM;YACvC;QACF,CAAC;QAED,oDAAoD;QACpD,IAAMC,WAAW;mBAAML,WAAW,CAACC,aAAaT,eAAe,CAACc,OAAO;;QACvED;QAEApB,0BAA0BgB,aAAaT,eAAe,EAAEa;QACxD,OAAO,WAAM;YACXnB,6BAA6Be,aAAaT,eAAe,EAAEa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOF;AACT;AA2BA,IAAMQ,OAAOpB,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMqB,WAAW,SAACC,OAAyB;IAChD,IACEC,WAYED,MAZFC,UACAC,QAWEF,MAXFE,OACAC,WAUEH,MAVFG,UACAC,WASEJ,MATFI,UACAC,SAQEL,MARFK,QACAf,AAASJ,cAOPc,MAPFV,SACAgB,QAMEN,MANFM,OACAC,QAKEP,MALFO,OACAC,aAIER,MAJFQ,YACAC,oBAGET,MAHFS,mBACAC,YAEEV,MAFFU,WACGC,uCACDX;QAZFC;QACAC;QACAC;QACAC;QACAC;QACAf;QACAgB;QACAC;QACAC;QACAC;QACAC;;IAGF,IAAME,UAAU3C,MAAM4C,MAAM,CAAiB,IAAI;IACjD,IAAM,AAAE1B,YAAchB,gBAAdgB;IACR,IAAMG,UAAUL,qBAAqBC;IAErC,IAAM4B,eAAezC,cAAc;QACjC0C,QAAQH;QACRtB,SAAAA;IACF;IAEA,IAAI0B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBb,WAAWX,WAAW;QAClE,6BAA6B;QAC7BI,KAAK;IACP,CAAC;IAED,qBACE,oBAACqB,+CACKR;QACJJ,OAAO,wCACFA;YACHL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZgB,KAAKR;QACLF,WAAWxC,2BAETK,qBAAqBK,sBAAsBO,YAC3CkB,UAAUnC,mCAAuC,iCACjDmC,WAAWX,aACTxB,wCAA4C,sCAC9CsC,cACEtC,wCAA4C,sCAC9CoC,gCACAG,0DACAC;sBAGF,oBAAC/B,gBAAgB0C,QAAQ;QAACC,OAAOR;OAC9BR,sBAAQ,oBAACa;QAAIT,SAAS;OAAmCT,YAAkBA,QAAQ;AAI5F,EAAE"}

package/dist/components/SubnavigationButton/SubnavigationButton.js

@@ -7,7 +7,6 @@ import { Icon16Dropdown } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { SizeType } from "../../lib/adaptivity";
-import { getTitleFromChildren } from "../../lib/utils";
 import { Tappable } from "../Tappable/Tappable";
 import { Caption } from "../Typography/Caption/Caption";
 import { Subhead } from "../Typography/Subhead/Subhead";
@@ -51,8 +50,7 @@ var SubnavigationButtonTypography = function(_param) {
             primary: "vkuiSubnavigationButton--mode-primary",
             outline: "vkuiSubnavigationButton--mode-outline",
             tertiary: "vkuiSubnavigationButton--mode-tertiary"
-        }[mode], selected && "vkuiSubnavigationButton--selected", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
-        "aria-label": getTitleFromChildren(children)
+        }[mode], selected && "vkuiSubnavigationButton--selected", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)
     }), /*#__PURE__*/ React.createElement("span", {
         className: "vkuiSubnavigationButton__in"
     }, before && /*#__PURE__*/ React.createElement("span", {

package/dist/components/SubnavigationButton/SubnavigationButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      aria-label={getTitleFromChildren(children)}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","getTitleFromChildren","Tappable","Caption","Subhead","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","s","m","l","primary","outline","tertiary","REGULAR","aria-label","span","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,oBAAoB,QAAQ,kBAAkB;AAEvD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AA6BnB,IAAMC,gCAAgC,iBAGI;QAFxCC,mBAAAA,WACGC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,oBAACL,SAAYM;IACtB,CAAC;IAED,qBAAO,oBAACP;QAAQQ,OAAOF,cAAc,MAAM,MAAM,GAAG;OAAMC;AAC5D;AAEA;;CAEC,GACD,OAAO,IAAME,sBAAsB,iBAWH;6BAV9BC,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,oCACAN,WAAAA,0CAAY,wBACZO,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACGV;QATHG;QACAC;QACAC;QACAN;QACAO;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BrB,iBAAAA,wCAAAA,eAAnBsB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACnB,kDACKQ;QACJY,WAAW,KAAK;QAChBC,kBAAiB;QACjBH,WAAWtB,sCAET;YACE0B,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACZ,KAAK,EACP;YACEa,OAAO;YACPC,OAAO;YACPC,QAAQ;QACV,CAAC,CAAChB,KAAK,EACPE,iDACAM,UAAUrB,SAAS8B,OAAO,IAAIzB,eAAe,CAACgB,MAAM,EACpDD;QAEFW,cAAY9B,qBAAqBkB;sBAEjC,oBAACa;QAAKZ,SAAS;OACZJ,wBAAU,oBAACgB;QAAKZ,SAAS;OAA0CJ,uBACpE,oBAACR;QACCC,WAAWA;QACXW,SAAS;QACTa,WAAU;OAETd,WAEFF,uBAAS,oBAACe;QAAKZ,SAAS;OAAyCH,QACjEC,4BAAc,oBAACrB;QAAeuB,SAAS;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","Tappable","Caption","Subhead","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","s","m","l","primary","outline","tertiary","REGULAR","span","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AA6BnB,IAAMC,gCAAgC,iBAGI;QAFxCC,mBAAAA,WACGC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,oBAACL,SAAYM;IACtB,CAAC;IAED,qBAAO,oBAACP;QAAQQ,OAAOF,cAAc,MAAM,MAAM,GAAG;OAAMC;AAC5D;AAEA;;CAEC,GACD,OAAO,IAAME,sBAAsB,iBAWH;6BAV9BC,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,oCACAN,WAAAA,0CAAY,wBACZO,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACGV;QATHG;QACAC;QACAC;QACAN;QACAO;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BpB,iBAAAA,wCAAAA,eAAnBqB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACnB,kDACKQ;QACJY,WAAW,KAAK;QAChBC,kBAAiB;QACjBH,WAAWrB,sCAET;YACEyB,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACZ,KAAK,EACP;YACEa,OAAO;YACPC,OAAO;YACPC,QAAQ;QACV,CAAC,CAAChB,KAAK,EACPE,iDACAM,UAAUpB,SAAS6B,OAAO,IAAIzB,eAAe,CAACgB,MAAM,EACpDD;sBAGF,oBAACW;QAAKX,SAAS;OACZJ,wBAAU,oBAACe;QAAKX,SAAS;OAA0CJ,uBACpE,oBAACR;QACCC,WAAWA;QACXW,SAAS;QACTY,WAAU;OAETb,WAEFF,uBAAS,oBAACc;QAAKX,SAAS;OAAyCH,QACjEC,4BAAc,oBAACpB;QAAesB,SAAS;;AAIhD,EAAE"}