@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { VKUITouchEvent } from '../../lib/touch';
-import { HasRef } from '../../types';
-export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+import { HasRef, HasRootRef } from '../../types';
+export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLInputElement> {
     /**
      * iOS only. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
      */
@@ -20,4 +20,4 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, noPadding, ...inputProps }: SearchProps) => React.JSX.Element;
+export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, noPadding, getRootRef, ...inputProps }: SearchProps) => React.JSX.Element;

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

@@ -15,7 +15,7 @@ import { Headline } from '../Typography/Headline/Headline';
 import styles from './Search.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
- */ export const Search = ({ before = /*#__PURE__*/ React.createElement(Icon16SearchOutline, null), className, defaultValue = '', placeholder = 'Поиск', after = 'Отмена', getRef, icon, onIconClick = noop, style, autoComplete = 'off', onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel = 'Очистить', noPadding, ...inputProps })=>{
+ */ export const Search = ({ before = /*#__PURE__*/ React.createElement(Icon16SearchOutline, null), className, defaultValue = '', placeholder = 'Поиск', after = 'Отмена', getRef, icon, onIconClick = noop, style, autoComplete = 'off', onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel = 'Очистить', noPadding, getRootRef, ...inputProps })=>{
     const inputRef = useExternRef(getRef);
     const { value: isFocused, setTrue: setFocusedTrue, setFalse: setFocusedFalse } = useBooleanState(false);
     const [value, onChange] = useEnsuredControl({
@@ -59,6 +59,7 @@ import styles from './Search.module.css';
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], value && styles['Search--has-value'], after && styles['Search--has-after'], icon && styles['Search--has-icon'], inputProps.disabled && styles['Search--disabled'], !noPadding && styles['Search--withPadding'], className),
+        ref: getRootRef,
         style: style
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Search__field']

package/dist/cssm/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 { 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 { touchEnabled, 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  noPadding?: boolean;\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  noPadding,\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      if (touchEnabled()) {\n        onCancel();\n      }\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        inputProps.disabled && styles['Search--disabled'],\n        !noPadding && styles['Search--withPadding'],\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","touchEnabled","Button","IconButton","Headline","styles","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","noPadding","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","disabled","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"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 { touchEnabled, VKUITouchEvent } from '../../lib/touch';\nimport { HasRef, HasRootRef } 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    HasRootRef<HTMLDivElement>,\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  noPadding?: boolean;\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  noPadding,\n  getRootRef,\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      if (touchEnabled()) {\n        onCancel();\n      }\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        inputProps.disabled && styles['Search--disabled'],\n        !noPadding && styles['Search--withPadding'],\n        className,\n      )}\n      ref={getRootRef}\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","touchEnabled","Button","IconButton","Headline","styles","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","noPadding","getRootRef","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","disabled","ref","label","Component","type","level","weight","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 export type SegmentedControlValue = string | number | undefined;
 export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {
     label: React.ReactChild;
     value: SegmentedControlValue;
 }
-export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, HasRootRef<HTMLDivElement> {
+export interface SegmentedControlProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {
     options: SegmentedControlOptionInterface[];
     size?: 'm' | 'l';
     name?: string;
@@ -16,4 +16,4 @@ export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDiv
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export declare const SegmentedControl: ({ size, name, options, getRootRef, defaultValue, children, className, onChange: onChangeProp, value: valueProp, ...restProps }: SegmentedControlProps) => React.JSX.Element;
+export declare const SegmentedControl: ({ size, name, options, defaultValue, children, onChange: onChangeProp, value: valueProp, ...restProps }: SegmentedControlProps) => React.JSX.Element;

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

@@ -6,6 +6,7 @@ import { useId } from '../../hooks/useId';
 import { SizeType } from '../../lib/adaptivity';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';
 import styles from './SegmentedControl.module.css';
 const sizeYClassNames = {
@@ -15,7 +16,7 @@ const sizeYClassNames = {
 const warn = warnOnce('SegmentedControl');
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
- */ export const SegmentedControl = ({ size = 'l', name, options, getRootRef, defaultValue = options[0]?.value, children, className, onChange: onChangeProp, value: valueProp, ...restProps })=>{
+ */ export const SegmentedControl = ({ size = 'l', name, options, defaultValue = options[0]?.value, children, onChange: onChangeProp, value: valueProp, ...restProps })=>{
     const id = useId();
     const [value, onChange] = useCustomEnsuredControl({
         onChange: onChangeProp,
@@ -32,10 +33,9 @@ const warn = warnOnce('SegmentedControl');
         actualIndex
     ]);
     const translateX = `translateX(${100 * actualIndex}%)`;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['SegmentedControl'], sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], size === 'l' && styles['SegmentedControl--size-l'], className),
-        ref: getRootRef
+        baseClassName: classNames(styles['SegmentedControl'], sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], size === 'l' && styles['SegmentedControl--size-l'])
     }, /*#__PURE__*/ React.createElement("div", {
         role: "radiogroup",
         className: styles['SegmentedControl__in']

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  getRootRef,\n  defaultValue = options[0]?.value,\n  children,\n  className,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useCustomEnsuredControl","useId","SizeType","useIsomorphicLayoutEffect","warnOnce","SegmentedControlOption","styles","sizeYClassNames","none","REGULAR","warn","SegmentedControl","size","name","options","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","div","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","key","checked"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,sBAAsB,QAAQ,kDAAkD;AACzF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5C,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,kCAAkC;AAC/D;AAqBA,MAAMI,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,mBAAmB,CAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,eAAeF,OAAO,CAAC,EAAE,EAAEG,KAAK,EAChCC,QAAQ,EACRC,SAAS,EACTC,UAAUC,YAAY,EACtBJ,OAAOK,SAAS,EAChB,GAAGC,WACmB;IACtB,MAAMC,KAAKvB;IAEX,MAAM,CAACgB,OAAOG,SAAS,GAAGpB,wBAAwB;QAChDoB,UAAUC;QACVJ,OAAOK;QACPN;IACF;IAEA,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAG1B;IAE3B,MAAM2B,cAAcZ,QAAQa,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;IAEnEd,0BAA0B;QACxB,IAAIuB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChErB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACgB;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,oBAACO;QACE,GAAGV,SAAS;QACbJ,WAAWrB,WACTQ,MAAM,CAAC,mBAAmB,EAC1BmB,UAAUvB,SAASgC,OAAO,IAAI3B,eAAe,CAACkB,MAAM,EACpDb,SAAS,OAAON,MAAM,CAAC,2BAA2B,EAClDa;QAEFgB,KAAKpB;qBAEL,oBAACkB;QAAIG,MAAK;QAAajB,WAAWb,MAAM,CAAC,uBAAuB;OAC7DoB,cAAc,CAAC,mBACd,oBAACO;QACCI,eAAAA;QACAlB,WAAWb,MAAM,CAAC,2BAA2B;QAC7CgC,OAAO;YACLC,OAAO,CAAC,EAAE,MAAMzB,QAAQ0B,MAAM,CAAC,CAAC,CAAC;YACjCC,WAAWT;YACXU,iBAAiBV;QACnB;QAGHlB,QAAQ6B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEzB,WAAW0B,eAAe,EAAE,GAAGC,aAAa,iBACjE,oBAACzC;YACC0C,KAAK,CAAC,EAAED,YAAY7B,KAAK,CAAC,CAAC;YAC1B,GAAG6B,WAAW;YACf3B,WAAWrB,WAAWQ,MAAM,CAAC,2BAA2B,EAAEuC;YAC1DhC,MAAMA,QAAQW;YACdwB,SAAS/B,UAAU6B,YAAY7B,KAAK;YACpCG,UAAU,IAAMA,SAAS0B,YAAY7B,KAAK;WAEzC2B;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n      )}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useCustomEnsuredControl","useId","SizeType","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","styles","sizeYClassNames","none","REGULAR","warn","SegmentedControl","size","name","options","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","COMPACT","div","role","className","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","key","checked"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,kDAAkD;AACzF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5C,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,kCAAkC;AAC/D;AAoBA,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,mBAAmB,CAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJC,OAAO,EACPC,eAAeD,OAAO,CAAC,EAAE,EAAEE,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAChB,GAAGC,WACmB;IACtB,MAAMC,KAAKtB;IAEX,MAAM,CAACgB,OAAOE,SAAS,GAAGnB,wBAAwB;QAChDmB,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAEQ,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAM0B,cAAcV,QAAQW,SAAS,CAAC,CAACC,SAAWA,OAAOV,KAAK,KAAKA;IAEnEd,0BAA0B;QACxB,IAAIsB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEnB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACc;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,oBAACpB;QACE,GAAGiB,SAAS;QACbU,eAAelC,WACbS,MAAM,CAAC,mBAAmB,EAC1BiB,UAAUtB,SAAS+B,OAAO,IAAIzB,eAAe,CAACgB,MAAM,EACpDX,SAAS,OAAON,MAAM,CAAC,2BAA2B;qBAGpD,oBAAC2B;QAAIC,MAAK;QAAaC,WAAW7B,MAAM,CAAC,uBAAuB;OAC7DkB,cAAc,CAAC,mBACd,oBAACS;QACCG,eAAAA;QACAD,WAAW7B,MAAM,CAAC,2BAA2B;QAC7C+B,OAAO;YACLC,OAAO,CAAC,EAAE,MAAMxB,QAAQyB,MAAM,CAAC,CAAC,CAAC;YACjCC,WAAWV;YACXW,iBAAiBX;QACnB;QAGHhB,QAAQ4B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAER,WAAWS,eAAe,EAAE,GAAGC,aAAa,iBACjE,oBAACxC;YACCyC,KAAK,CAAC,EAAED,YAAY7B,KAAK,CAAC,CAAC;YAC1B,GAAG6B,WAAW;YACfV,WAAWtC,WAAWS,MAAM,CAAC,2BAA2B,EAAEsC;YAC1D/B,MAAMA,QAAQS;YACdyB,SAAS/B,UAAU6B,YAAY7B,KAAK;YACpCE,UAAU,IAAMA,SAAS2B,YAAY7B,KAAK;WAEzC2B;AAMb,EAAE"}

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

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

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

@@ -8,10 +8,11 @@ import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import styles from './SegmentedControlOption.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
- */ export const SegmentedControlOption = ({ getRef, className, style, children, ...restProps })=>{
+ */ export const SegmentedControlOption = ({ getRef, className, style, children, getRootRef, ...restProps })=>{
     const { focusVisible, onBlur, onFocus } = useFocusVisible();
     return /*#__PURE__*/ React.createElement("label", {
         className: classNames(styles['SegmentedControlOption'], restProps.checked && styles['SegmentedControlOption--checked'], className),
+        ref: getRootRef,
         style: style
     }, /*#__PURE__*/ React.createElement(VisuallyHidden, {
         ...restProps,

package/dist/cssm/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 { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\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\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      <Headline className={styles['SegmentedControlOption__content']} level=\"2\" weight=\"2\">\n        {children}\n      </Headline>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useFocusVisible","callMultiple","FocusVisible","Headline","VisuallyHidden","styles","SegmentedControlOption","getRef","className","style","children","restProps","focusVisible","onBlur","onFocus","label","checked","Component","getRootRef","type","level","weight","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AACrE,OAAOC,YAAY,sCAAsC;AAMzD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACR,GAAGC,WACyB;IAC5B,MAAM,EAAEC,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGd;IAE1C,qBACE,oBAACe;QACCP,WAAWT,WACTM,MAAM,CAAC,yBAAyB,EAChCM,UAAUK,OAAO,IAAIX,MAAM,CAAC,kCAAkC,EAC9DG;QAEFC,OAAOA;qBAEP,oBAACL;QACE,GAAGO,SAAS;QACbM,WAAU;QACVC,YAAYX;QACZY,MAAK;QACLN,QAAQZ,aAAaY,QAAQF,UAAUE,MAAM;QAC7CC,SAASb,aAAaa,SAASH,UAAUG,OAAO;sBAElD,oBAACX;QAASK,WAAWH,MAAM,CAAC,kCAAkC;QAAEe,OAAM;QAAIC,QAAO;OAC9EX,yBAEH,oBAACR;QAAaoB,SAASV;QAAcW,MAAK;;AAGhD,EAAE"}
+{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\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  getRootRef,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      ref={getRootRef}\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      <Headline className={styles['SegmentedControlOption__content']} level=\"2\" weight=\"2\">\n        {children}\n      </Headline>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useFocusVisible","callMultiple","FocusVisible","Headline","VisuallyHidden","styles","SegmentedControlOption","getRef","className","style","children","getRootRef","restProps","focusVisible","onBlur","onFocus","label","checked","ref","Component","type","level","weight","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AACrE,OAAOC,YAAY,sCAAsC;AAOzD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACV,GAAGC,WACyB;IAC5B,MAAM,EAAEC,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGf;IAE1C,qBACE,oBAACgB;QACCR,WAAWT,WACTM,MAAM,CAAC,yBAAyB,EAChCO,UAAUK,OAAO,IAAIZ,MAAM,CAAC,kCAAkC,EAC9DG;QAEFU,KAAKP;QACLF,OAAOA;qBAEP,oBAACL;QACE,GAAGQ,SAAS;QACbO,WAAU;QACVR,YAAYJ;QACZa,MAAK;QACLN,QAAQb,aAAaa,QAAQF,UAAUE,MAAM;QAC7CC,SAASd,aAAac,SAASH,UAAUG,OAAO;sBAElD,oBAACZ;QAASK,WAAWH,MAAM,CAAC,kCAAkC;QAAEgB,OAAM;QAAIC,QAAO;OAC9EZ,yBAEH,oBAACR;QAAaqB,SAASV;QAAcW,MAAK;;AAGhD,EAAE"}

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { HasAlign, HasRootRef } from '../../types';
+import { HasAlign, HTMLAttributesWithRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
-export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
+export interface SelectMimicryProps extends HTMLAttributesWithRootRef<HTMLElement>, HasAlign, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
     multiline?: boolean;
     disabled?: boolean;
     selectType?: SelectType;
@@ -10,4 +10,4 @@ export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, H
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry
  */
-export declare const SelectMimicry: ({ tabIndex, placeholder, children, align, getRootRef, multiline, disabled, onClick, before, after, selectType, status, className, ...restProps }: SelectMimicryProps) => React.JSX.Element;
+export declare const SelectMimicry: ({ tabIndex, placeholder, children, align, getRootRef, multiline, disabled, onClick, before, after, selectType, status, className, autoFocus, ...restProps }: SelectMimicryProps) => React.JSX.Element;

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useAutoFocus } from '../../hooks/useAutoFocus';
+import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
 import { getFormFieldModeFromSelectType } from '../../lib/select';
 import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
@@ -13,14 +15,16 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry
- */ export const SelectMimicry = ({ tabIndex = 0, placeholder, children, align, getRootRef, multiline, disabled, onClick, before, after = /*#__PURE__*/ React.createElement(DropdownIcon, null), selectType = 'default', status, className, ...restProps })=>{
+ */ export const SelectMimicry = ({ tabIndex = 0, placeholder, children, align, getRootRef, multiline, disabled, onClick, before, after = /*#__PURE__*/ React.createElement(DropdownIcon, null), selectType = 'default', status, className, autoFocus, ...restProps })=>{
+    const rootRef = useExternRef(getRootRef);
     const { sizeY = 'none' } = useAdaptivity();
     const title = children || placeholder;
+    useAutoFocus(rootRef, autoFocus);
     return /*#__PURE__*/ React.createElement(FormField, {
         ...restProps,
         tabIndex: disabled ? undefined : tabIndex,
         className: classNames(styles['Select'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], !children && styles['Select--empty'], multiline && styles['Select--multiline'], align === 'center' && styles['Select--align-center'], align === 'right' && styles['Select--align-right'], before && styles['Select--hasBefore'], className),
-        getRootRef: getRootRef,
+        getRootRef: rootRef,
         onClick: disabled ? undefined : onClick,
         disabled: disabled,
         before: before,

package/dist/cssm/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        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","styles","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;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAYA;;CAEC,GACD,OAAO,MAAMI,gBAAgB,CAAC,EAC5BC,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,oBAACjB,mBAAe,EACxBkB,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGzB;IAC3B,MAAM0B,QAAQb,YAAYD;IAE1B,qBACE,oBAACR;QACE,GAAGoB,SAAS;QACbb,UAAUM,WAAWU,YAAYhB;QACjCY,WAAWxB,WACTO,MAAM,CAAC,SAAS,EAChBmB,UAAUxB,SAAS2B,OAAO,IAAIrB,eAAe,CAACkB,MAAM,EACpD,CAACZ,YAAYP,MAAM,CAAC,gBAAgB,EACpCU,aAAaV,MAAM,CAAC,oBAAoB,EACxCQ,UAAU,YAAYR,MAAM,CAAC,uBAAuB,EACpDQ,UAAU,WAAWR,MAAM,CAAC,sBAAsB,EAClDa,UAAUb,MAAM,CAAC,oBAAoB,EACrCiB;QAEFR,YAAYA;QACZG,SAASD,WAAWU,YAAYT;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPS,MAAM3B,+BAA+BmB;QACrCC,QAAQA;qBAER,oBAACQ;QAAIP,WAAWjB,MAAM,CAAC,oBAAoB;qBACzC,oBAACD;QAAiBgB,YAAYA;QAAYE,WAAWjB,MAAM,CAAC,gBAAgB;OACzEoB;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 { useAutoFocus } from '../../hooks/useAutoFocus';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HTMLAttributesWithRootRef } 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 HTMLAttributesWithRootRef<HTMLElement>,\n    HasAlign,\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  autoFocus,\n  ...restProps\n}: SelectMimicryProps) => {\n  const rootRef = useExternRef(getRootRef);\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  useAutoFocus(rootRef, autoFocus);\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={rootRef}\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","useAutoFocus","useExternRef","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","autoFocus","restProps","rootRef","sizeY","title","undefined","REGULAR","mode","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,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;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAWA;;CAEC,GACD,OAAO,MAAMI,gBAAgB,CAAC,EAC5BC,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,oBAACjB,mBAAe,EACxBkB,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAMC,UAAU1B,aAAae;IAE7B,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAG7B;IAC3B,MAAM8B,QAAQf,YAAYD;IAE1Bb,aAAa2B,SAASF;IAEtB,qBACE,oBAACpB;QACE,GAAGqB,SAAS;QACbd,UAAUM,WAAWY,YAAYlB;QACjCY,WAAW1B,WACTS,MAAM,CAAC,SAAS,EAChBqB,UAAU1B,SAAS6B,OAAO,IAAIvB,eAAe,CAACoB,MAAM,EACpD,CAACd,YAAYP,MAAM,CAAC,gBAAgB,EACpCU,aAAaV,MAAM,CAAC,oBAAoB,EACxCQ,UAAU,YAAYR,MAAM,CAAC,uBAAuB,EACpDQ,UAAU,WAAWR,MAAM,CAAC,sBAAsB,EAClDa,UAAUb,MAAM,CAAC,oBAAoB,EACrCiB;QAEFR,YAAYW;QACZR,SAASD,WAAWY,YAAYX;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPW,MAAM7B,+BAA+BmB;QACrCC,QAAQA;qBAER,oBAACU;QAAIT,WAAWjB,MAAM,CAAC,oBAAoB;qBACzC,oBAACD;QAAiBgB,YAAYA;QAAYE,WAAWjB,MAAM,CAAC,gBAAgB;OACzEsB;AAKX,EAAE"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { HasChildren } from '../../types';
+import { HasChildren, HTMLAttributesWithRootRef } from '../../types';
 import type { SelectType } from '../Select/Select';
-export interface SelectTypographyProps extends React.HTMLAttributes<HTMLSpanElement>, HasChildren {
+export interface SelectTypographyProps extends HTMLAttributesWithRootRef<HTMLSpanElement>, HasChildren {
     selectType?: SelectType;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasChildren } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport { Text } from '../Typography/Text/Text';\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  ...restProps\n}: SelectTypographyProps) => {\n  return (\n    <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["React","Text","SelectTypography","selectType","children","restProps","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,IAAI,QAAQ,0BAA0B;AAM/C;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,aAAa,SAAS,EACtBC,QAAQ,EACR,GAAGC,WACmB;IACtB,qBACE,oBAACJ;QAAKK,QAAQH,eAAe,WAAW,MAAM;QAAM,GAAGE,SAAS;OAC7DD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport { Text } from '../Typography/Text/Text';\n\nexport interface SelectTypographyProps\n  extends HTMLAttributesWithRootRef<HTMLSpanElement>,\n    HasChildren {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  ...restProps\n}: SelectTypographyProps) => {\n  return (\n    <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["React","Text","SelectTypography","selectType","children","restProps","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,IAAI,QAAQ,0BAA0B;AAQ/C;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,aAAa,SAAS,EACtBC,QAAQ,EACR,GAAGC,WACmB;IACtB,qBACE,oBAACJ;QAAKK,QAAQH,eAAe,WAAW,MAAM;QAAM,GAAGE,SAAS;OAC7DD;AAGP,EAAE"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * С этим свойством компонент не будет иметь отступы слева и справа
      */
@@ -8,4 +9,4 @@ export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */
-export declare const Separator: ({ wide, className, ...restProps }: SeparatorProps) => React.JSX.Element;
+export declare const Separator: ({ wide, ...restProps }: SeparatorProps) => React.JSX.Element;

package/dist/cssm/components/Separator/Separator.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Separator.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
- */ export const Separator = ({ wide, className, ...restProps })=>/*#__PURE__*/ React.createElement("div", {
+ */ export const Separator = ({ wide, ...restProps })=>/*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['Separator'], !wide && styles['Separator--padded'], className)
+        baseClassName: classNames(styles['Separator'], !wide && styles['Separator--padded'])
     }, /*#__PURE__*/ React.createElement("hr", {
         className: styles['Separator__in']
     }));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n  >\n    <hr className={styles['Separator__in']} />\n  </div>\n);\n"],"names":["React","classNames","styles","Separator","wide","className","restProps","div","hr"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAS5C;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,WAA2B,iBACzE,oBAACC;QACE,GAAGD,SAAS;QACbD,WAAWJ,WAAWC,MAAM,CAAC,YAAY,EAAE,CAACE,QAAQF,MAAM,CAAC,oBAAoB,EAAEG;qBAEjF,oBAACG;QAAGH,WAAWH,MAAM,CAAC,gBAAgB;QAExC"}
+{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, ...restProps }: SeparatorProps) => (\n  <RootComponent\n    {...restProps}\n    baseClassName={classNames(styles['Separator'], !wide && styles['Separator--padded'])}\n  >\n    <hr className={styles['Separator__in']} />\n  </RootComponent>\n);\n"],"names":["React","classNames","RootComponent","styles","Separator","wide","restProps","baseClassName","hr","className"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,yBAAyB;AAS5C;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA2B,iBAC9D,oBAACJ;QACE,GAAGI,SAAS;QACbC,eAAeN,WAAWE,MAAM,CAAC,YAAY,EAAE,CAACE,QAAQF,MAAM,CAAC,oBAAoB;qBAEnF,oBAACK;QAAGC,WAAWN,MAAM,CAAC,gBAAgB;QAExC"}

package/dist/cssm/components/SimpleCell/SimpleCell.js

@@ -61,7 +61,6 @@ const sizeYClassNames = {
     }, subtitle), badgeAfterSubtitle && /*#__PURE__*/ React.createElement("span", {
         className: styles['SimpleCell__badge']
     }, badgeAfterSubtitle)), extraSubtitle && /*#__PURE__*/ React.createElement(Footnote, {
-        normalize: false,
         className: classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])
     }, extraSubtitle)), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Headline, {
         Component: "span",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\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 { warnOnce } from '../../lib/warnOnce';\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 { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst warn = warnOnce('SimpleCell');\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 | 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\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  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development' && expandable === true) {\n    // TODO [>=6]: Обновить типизацию для expandable свойства\n    warn(\n      'Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable=\"auto\"',\n    );\n  }\n\n  const hasChevron =\n    expandable === 'always' ||\n    ((expandable === true || expandable === 'auto') && platform === Platform.IOS);\n\n  const hasAfter = hasReactNode(after) || hasChevron;\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          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","Tappable","Footnote","Headline","Subhead","Chevron","styles","warn","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","process","env","NODE_ENV","hasChevron","IOS","hasAfter","sizeY","hasOwnProperty","div","Component","span","weight","normalize","size"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\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 { warnOnce } from '../../lib/warnOnce';\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 { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst warn = warnOnce('SimpleCell');\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 | 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\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  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development' && expandable === true) {\n    // TODO [>=6]: Обновить типизацию для expandable свойства\n    warn(\n      'Значение true свойства expandable устарело и будет удалено в v6. Используйте expandable=\"auto\"',\n    );\n  }\n\n  const hasChevron =\n    expandable === 'always' ||\n    ((expandable === true || expandable === 'auto') && platform === Platform.IOS);\n\n  const hasAfter = hasReactNode(after) || hasChevron;\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            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          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","Tappable","Footnote","Headline","Subhead","Chevron","styles","warn","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","process","env","NODE_ENV","hasChevron","IOS","hasAfter","sizeY","hasOwnProperty","div","Component","span","weight","normalize","size"],"mappings":"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"}

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

@@ -81,6 +81,8 @@
   color: var(--vkui--color_icon_accent);
 }
 
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+
 .SimpleCell__content > *:not(:last-child) {
   margin-right: 4px;
 }
@@ -217,6 +219,8 @@
   margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
 
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+
 .SimpleCell__main > *:not(:first-child) {
   margin-top: 2px;
 }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { type TouchEvent } from '../Touch/Touch';
-export interface SliderBaseProps extends HasRootRef<HTMLDivElement>, Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
+export interface SliderBaseProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
     min?: number;
     max?: number;
     step?: number;
@@ -20,6 +20,7 @@ export interface SliderBaseProps extends HasRootRef<HTMLDivElement>, Omit<React.
      * > Перебивает `aria-valuetext`.
      */
     getAriaValueText?(value: number, index: number): string;
+    withTooltip?: boolean;
 }
 export interface SliderProps extends SliderBaseProps {
     multiple?: false;
@@ -42,4 +43,4 @@ export interface SliderMultipleProps extends SliderBaseProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */
-export declare const Slider: ({ step, min, max, value: valueProp, multiple: multipleProp, defaultValue, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, ...restProps }: SliderProps | SliderMultipleProps) => React.JSX.Element;
+export declare const Slider: ({ step, min, max, value: valueProp, multiple: multipleProp, defaultValue, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, withTooltip, ...restProps }: SliderProps | SliderMultipleProps) => React.JSX.Element;

package/dist/cssm/components/Slider/Slider.js

@@ -18,7 +18,7 @@ const sizeYClassNames = {
 step, min = 0, max = 100, value: valueProp, multiple: multipleProp, defaultValue = multipleProp ? [
     min,
     max
-] : min, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, ...restProps })=>{
+] : min, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, withTooltip, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const isControlled = valueProp !== undefined;
     const [localValue, setValue] = React.useState(defaultValue);
@@ -135,6 +135,7 @@ step, min = 0, max = 100, value: valueProp, multiple: multipleProp, defaultValue
             // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.
             zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined
         },
+        withTooltip: withTooltip,
         inputProps: {
             'data-type': 'start',
             'ref': thumbStartInputRef,
@@ -154,6 +155,7 @@ step, min = 0, max = 100, value: valueProp, multiple: multipleProp, defaultValue
         style: {
             left: `${endReversedValueInPercent}%`
         },
+        withTooltip: withTooltip,
         inputProps: {
             'data-type': 'end',
             'ref': thumbEndInputRef,