@vkontakte/vkui 6.6.0 → 6.7.0

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 { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, type IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n  icon: React.ReactNode,\n  props?: Partial<IconButtonProps>,\n) => React.ReactNode;\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 | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n  onIconClick?: React.PointerEventHandler<HTMLElement>;\n  defaultValue?: string;\n  iconLabel?: string;\n  clearLabel?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n  /**\n   * Текст для кнопки Найти\n   */\n  findButtonText?: string;\n  /**\n   * Коллбэк для кнопки Найти\n   */\n  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  id: idProp,\n  before = <Icon16SearchOutline />,\n  className,\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon: iconProp,\n  onIconClick,\n  style,\n  autoComplete = 'off',\n  onChange,\n  iconLabel,\n  clearLabel = 'Очистить',\n  noPadding,\n  getRootRef,\n  findButtonText = 'Найти',\n  onFindButtonClick,\n  ...inputProps\n}: SearchProps): React.ReactNode => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n  const generatedId = React.useId();\n  const inputId = idProp ? idProp : `search-${generatedId}`;\n\n  const [hasValue, setHasValue] = React.useState<boolean>(() =>\n    Boolean(inputProps.value || inputProps.defaultValue),\n  );\n  const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n    setHasValue(Boolean(e.currentTarget.value));\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\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.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => onIconClick?.(e),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (inputProps.value !== undefined) {\n      setHasValue(Boolean(inputProps.value));\n    }\n  }, [inputProps.value]);\n\n  useNativeFormResetListener(inputRef, () => {\n    setHasValue(Boolean(inputProps.defaultValue));\n  });\n\n  const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n    <IconButton\n      hoverMode=\"opacity\"\n      onPointerDown={onIconClickStart}\n      className={styles['Search__icon']}\n      onFocus={setFocusedTrue}\n      onBlur={setFocusedFalse}\n      onClick={noop}\n      {...props}\n    >\n      <VisuallyHidden>{iconLabel}</VisuallyHidden>\n      {icon}\n    </IconButton>\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === 'compact' && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        hasValue && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        iconProp && 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 htmlFor={inputId} className={styles['Search__label']}>\n          {placeholder}\n        </label>\n        <div className={styles['Search__input']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            id={inputId}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__nativeInput']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={callMultiple(onChange, checkHasValue)}\n          />\n        </div>\n        <div className={styles['Search__controls']}>\n          {iconProp &&\n            (typeof iconProp === 'function'\n              ? iconProp(renderIconButton)\n              : renderIconButton(iconProp))}\n          <IconButton\n            hoverMode=\"opacity\"\n            onPointerDown={onIconCancelClickStart}\n            onClick={onCancel}\n            className={styles['Search__icon']}\n            tabIndex={hasValue ? undefined : -1}\n            disabled={inputProps.disabled}\n          >\n            <VisuallyHidden>{clearLabel}</VisuallyHidden>\n            {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n          </IconButton>\n          {adaptiveSizeY.compact && onFindButtonClick && (\n            <Button\n              mode=\"primary\"\n              size=\"m\"\n              className={classNames(styles['Search__findButton'], adaptiveSizeY.compact.className)}\n              focusVisibleMode=\"inside\"\n              onClick={onFindButtonClick}\n              tabIndex={hasValue ? undefined : -1}\n            >\n              {findButtonText}\n            </Button>\n          )}\n        </div>\n      </div>\n      {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","useAdaptivityConditionalRender","useBooleanState","useExternRef","useNativeFormResetListener","usePlatform","callMultiple","touchEnabled","useIsomorphicLayoutEffect","Button","IconButton","Headline","VisuallyHidden","Search","id","idProp","before","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","onFocus","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","undefined","renderIconButton","props","hoverMode","onPointerDown","onClick","div","disabled","ref","label","htmlFor","Component","type","level","weight","tabIndex","compact","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, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, type IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n  icon: React.ReactNode,\n  props?: Partial<IconButtonProps>,\n) => React.ReactNode;\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 | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n  onIconClick?: React.PointerEventHandler<HTMLElement>;\n  defaultValue?: string;\n  iconLabel?: string;\n  clearLabel?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n  /**\n   * Текст для кнопки Найти\n   */\n  findButtonText?: string;\n  /**\n   * Коллбэк для кнопки Найти\n   */\n  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  id: idProp,\n  before = <Icon16SearchOutline />,\n  className,\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon: iconProp,\n  onIconClick,\n  style,\n  autoComplete = 'off',\n  onChange,\n  iconLabel,\n  clearLabel = 'Очистить',\n  noPadding,\n  getRootRef,\n  findButtonText = 'Найти',\n  onFindButtonClick,\n  ...inputProps\n}: SearchProps): React.ReactNode => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n  const generatedId = React.useId();\n  const inputId = idProp ? idProp : `search-${generatedId}`;\n\n  const [hasValue, setHasValue] = React.useState<boolean>(() =>\n    Boolean(inputProps.value || inputProps.defaultValue),\n  );\n  const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n    setHasValue(Boolean(e.currentTarget.value));\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n  const platform = usePlatform();\n\n  const hasAfter = platform === 'ios' && hasReactNode(after);\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.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => onIconClick?.(e),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (inputProps.value !== undefined) {\n      setHasValue(Boolean(inputProps.value));\n    }\n  }, [inputProps.value]);\n\n  useNativeFormResetListener(inputRef, () => {\n    setHasValue(Boolean(inputProps.defaultValue));\n  });\n\n  const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n    <IconButton\n      hoverMode=\"opacity\"\n      onPointerDown={onIconClickStart}\n      className={styles['Search__icon']}\n      onFocus={setFocusedTrue}\n      onBlur={setFocusedFalse}\n      onClick={noop}\n      {...props}\n    >\n      <VisuallyHidden>{iconLabel}</VisuallyHidden>\n      {icon}\n    </IconButton>\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === 'compact' && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        hasValue && styles['Search--has-value'],\n        hasAfter && styles['Search--has-after'],\n        iconProp && 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 htmlFor={inputId} className={styles['Search__label']}>\n          {placeholder}\n        </label>\n        <div className={styles['Search__input']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            id={inputId}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__nativeInput']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={callMultiple(onChange, checkHasValue)}\n          />\n        </div>\n        <div className={styles['Search__controls']}>\n          {iconProp &&\n            (typeof iconProp === 'function'\n              ? iconProp(renderIconButton)\n              : renderIconButton(iconProp))}\n          <IconButton\n            hoverMode=\"opacity\"\n            onPointerDown={onIconCancelClickStart}\n            onClick={onCancel}\n            className={styles['Search__icon']}\n            tabIndex={hasValue ? undefined : -1}\n            disabled={inputProps.disabled}\n          >\n            <VisuallyHidden>{clearLabel}</VisuallyHidden>\n            {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n          </IconButton>\n          {adaptiveSizeY.compact && onFindButtonClick && (\n            <Button\n              mode=\"primary\"\n              size=\"m\"\n              className={classNames(styles['Search__findButton'], adaptiveSizeY.compact.className)}\n              focusVisibleMode=\"inside\"\n              onClick={onFindButtonClick}\n              tabIndex={hasValue ? undefined : -1}\n            >\n              {findButtonText}\n            </Button>\n          )}\n        </div>\n      </div>\n      {hasAfter && (\n        <div className={styles['Search__after']}>\n          <Button\n            mode=\"tertiary\"\n            size=\"m\"\n            focusVisibleMode=\"inside\"\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCancel}\n            onFocus={setFocusedTrue}\n            onBlur={setFocusedFalse}\n          >\n            <span className={styles['Search__afterTextClip']}>{after}</span>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","hasReactNode","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","useExternRef","useNativeFormResetListener","usePlatform","callMultiple","touchEnabled","useIsomorphicLayoutEffect","Button","IconButton","Headline","VisuallyHidden","Search","id","idProp","before","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","noPadding","getRootRef","findButtonText","onFindButtonClick","inputProps","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","hasAfter","onFocus","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","undefined","renderIconButton","props","hoverMode","onPointerDown","onClick","div","disabled","ref","label","htmlFor","Component","type","level","weight","tabIndex","compact","mode","size","focusVisibleMode","activeMode","span"],"mappings":"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"}

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -13,7 +13,7 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';
 const sizeYClassNames = {
     none: "vkuiSegmentedControl--sizeY-none",
-    ['regular']: "vkuiSegmentedControl--sizeY-regular"
+    regular: "vkuiSegmentedControl--sizeY-regular"
 };
 const warn = warnOnce('SegmentedControl');
 /**

package/dist/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 { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { 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  ['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  /**\n   * Вставляет элемент перед основным контентом.\n   * Рекомендуется использовать только иконки с размером 20\n   */\n  before?: React.ReactNode;\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): React.ReactNode => {\n  const id = React.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 !== '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            }}\n          />\n        )}\n        {options.map(({ label, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\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":["options","React","classNames","useAdaptivity","useCustomEnsuredControl","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","sizeYClassNames","none","warn","SegmentedControl","size","name","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","useId","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","div","role","className","aria-hidden","style","width","length","transform","map","label","optionProps","checked"],"mappings":";;;IAgDiBA;;AAhDjB,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,kDAAkD;AAGzF,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAyBA,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,mBAAmB;QAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJd,OAAO,EACPe,gBAAef,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYgB,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAEM,WADnBC;QAPHR;QACAC;QACAd;QACAe;QACAE;QACAC;QACAF;;IAGA,MAAMM,KAAKrB,MAAMsB,KAAK;IAEtB,MAAM,CAACP,OAAOE,SAAS,GAAGd,wBAAwB;QAChDc,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGrB;IAE3B,MAAMsB,cAAczB,QAAQ0B,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;IAEnEX,0BAA0B;QACxB,IAAIoB,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,KAAClB,uDACKc;QACJW,eAAe9B,mCAEbsB,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CX,SAAS;kBAGX,cAAA,MAACoB;YAAIC,MAAK;YAAaC,SAAS;;gBAC7BV,cAAc,CAAC,mBACd,KAACQ;oBACCG,aAAW;oBACXD,SAAS;oBACTE,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMtC,QAAQuC,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWT;oBACb;;gBAGH/B,QAAQyC,GAAG,CAAC;wBAAC,EAAEC,KAAK,EAAkB,WAAbC;wBAAVD;;yCACd,KAAClC,gEAEKmC;wBACJ7B,MAAMA,iBAAAA,kBAAAA,OAAQQ;wBACdsB,SAAS5B,UAAU2B,YAAY3B,KAAK;wBACpCE,UAAU,IAAMA,SAASyB,YAAY3B,KAAK;kCAEzC0B;wBANI,CAAC,EAAEC,YAAY3B,KAAK,CAAC,CAAC;;;;;AAYvC,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 { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { 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  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  /**\n   * Вставляет элемент перед основным контентом.\n   * Рекомендуется использовать только иконки с размером 20\n   */\n  before?: React.ReactNode;\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): React.ReactNode => {\n  const id = React.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 !== '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            }}\n          />\n        )}\n        {options.map(({ label, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\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":["options","React","classNames","useAdaptivity","useCustomEnsuredControl","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","sizeYClassNames","none","regular","warn","SegmentedControl","size","name","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","useId","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","div","role","className","aria-hidden","style","width","length","transform","map","label","optionProps","checked"],"mappings":";;;IAgDiBA;;AAhDjB,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,kDAAkD;AAGzF,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAyBA,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,mBAAmB;QAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJf,OAAO,EACPgB,gBAAehB,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYiB,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAEM,WADnBC;QAPHR;QACAC;QACAf;QACAgB;QACAE;QACAC;QACAF;;IAGA,MAAMM,KAAKtB,MAAMuB,KAAK;IAEtB,MAAM,CAACP,OAAOE,SAAS,GAAGf,wBAAwB;QAChDe,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGtB;IAE3B,MAAMuB,cAAc1B,QAAQ2B,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;IAEnEZ,0BAA0B;QACxB,IAAIqB,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,KAACnB,uDACKe;QACJW,eAAe/B,mCAEbuB,UAAU,aAAahB,eAAe,CAACgB,MAAM,EAC7CX,SAAS;kBAGX,cAAA,MAACoB;YAAIC,MAAK;YAAaC,SAAS;;gBAC7BV,cAAc,CAAC,mBACd,KAACQ;oBACCG,aAAW;oBACXD,SAAS;oBACTE,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMvC,QAAQwC,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWT;oBACb;;gBAGHhC,QAAQ0C,GAAG,CAAC;wBAAC,EAAEC,KAAK,EAAkB,WAAbC;wBAAVD;;yCACd,KAACnC,gEAEKoC;wBACJ7B,MAAMA,iBAAAA,kBAAAA,OAAQQ;wBACdsB,SAAS5B,UAAU2B,YAAY3B,KAAK;wBACpCE,UAAU,IAAMA,SAASyB,YAAY3B,KAAK;kCAEzC0B;wBANI,CAAC,EAAEC,YAAY3B,KAAK,CAAC,CAAC;;;;;AAYvC,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,qCAI/D,WAAW,CAAC,OAAO,CAAC,KAAG,KAAK,CAAC,SAyD/B,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,qCAI/D,WAAW,CAAC,OAAO,CAAC,KAAG,KAAK,CAAC,SA6D/B,CAAC"}

package/dist/components/Select/Select.js

@@ -14,7 +14,7 @@ import { NativeSelect } from '../NativeSelect/NativeSelect';
         "children",
         "className"
     ]);
-    const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode, getSelectInputRef, overscrollBehavior, beforeAlign, afterAlign } = props, restProps = _object_without_properties(props, [
+    const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode, pattern, minLength, maxLength, readOnly, getSelectInputRef, overscrollBehavior, beforeAlign, afterAlign } = props, restProps = _object_without_properties(props, [
         "options",
         "searchable",
         "emptyText",
@@ -40,6 +40,10 @@ import { NativeSelect } from '../NativeSelect/NativeSelect';
         "nativeSelectTestId",
         "after",
         "mode",
+        "pattern",
+        "minLength",
+        "maxLength",
+        "readOnly",
         "getSelectInputRef",
         "overscrollBehavior",
         "beforeAlign",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport type { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>): React.ReactNode => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    getSelectInputRef,\n    overscrollBehavior,\n    beforeAlign,\n    afterAlign,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          {...nativeProps}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","getSelectInputRef","overscrollBehavior","beforeAlign","afterAlign","restProps","deviceType","nativeProps","Fragment","desktop","mobile","map","label","value","option"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS;QAA8C,EAClEC,QAAQ,EACRC,SAAS,EAEY,WADlBC;QAFHF;QACAC;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EACJC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,UAAU,EAEX,GAAG7B,OADC8B,uCACD9B;QA9BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAM,EAAEE,UAAU,EAAE,GAAGrC;IAEvB,MAAMsC,cAAyEF;IAE/E,qBACE,MAACtC,MAAMyC,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAACvC;gBAAaI,WAAWN,WAAWM,WAAWgC,WAAWG,OAAO,CAACnC,SAAS;eAAOC;YAEnF+B,WAAWI,MAAM,kBAChB,KAACvC;gBACCG,WAAWN,WAAWM,WAAWgC,WAAWI,MAAM,CAACpC,SAAS;eACxDiC;0BAEH/B,QAAQmC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}
+{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport type { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>): React.ReactNode => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    pattern,\n    minLength,\n    maxLength,\n    readOnly,\n    getSelectInputRef,\n    overscrollBehavior,\n    beforeAlign,\n    afterAlign,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          {...nativeProps}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","pattern","minLength","maxLength","readOnly","getSelectInputRef","overscrollBehavior","beforeAlign","afterAlign","restProps","deviceType","nativeProps","Fragment","desktop","mobile","map","label","value","option"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS;QAA8C,EAClEC,QAAQ,EACRC,SAAS,EAEY,WADlBC;QAFHF;QACAC;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,UAAU,EAEX,GAAGjC,OADCkC,uCACDlC;QAlCFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAM,EAAEE,UAAU,EAAE,GAAGzC;IAEvB,MAAM0C,cAAyEF;IAE/E,qBACE,MAAC1C,MAAM6C,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAAC3C;gBAAaI,WAAWN,WAAWM,WAAWoC,WAAWG,OAAO,CAACvC,SAAS;eAAOC;YAEnFmC,WAAWI,MAAM,kBAChB,KAAC3C;gBACCG,WAAWN,WAAWM,WAAWoC,WAAWI,MAAM,CAACxC,SAAS;eACxDqC;0BAEHnC,QAAQuC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}

package/dist/components/SelectMimicry/SelectMimicry.js

@@ -13,7 +13,7 @@ import { FormField } from '../FormField/FormField';
 import { SelectTypography } from '../SelectTypography/SelectTypography';
 const sizeYClassNames = {
     none: "vkuiSelect--sizeY-none",
-    ['compact']: "vkuiSelect--sizeY-compact"
+    compact: "vkuiSelect--sizeY-compact"
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry

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 { useAutoFocus } from '../../hooks/useAutoFocus';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport type { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type 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  ['compact']: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<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): React.ReactNode => {\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 !== '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","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","autoFocus","restProps","rootRef","sizeY","title","undefined","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,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAA6B,yBAAyB;AAExE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAYA;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,KAACf,iBAAe,EACxBgB,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EAEU,WADhBC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,UAAUvB,aAAaY;IAE7B,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAM2B,QAAQf,YAAYD;IAE1BV,aAAawB,SAASF;IAEtB,qBACE,KAAClB,mDACKmB;QACJd,UAAUM,WAAWY,YAAYlB;QACjCY,WAAWvB,yBAET2B,UAAU,aAAanB,eAAe,CAACmB,MAAM,EAC7C,CAACd,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAI;QAEFR,YAAYW;QACZR,SAASD,WAAWY,YAAYX;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPU,MAAM1B,+BAA+BiB;QACrCC,QAAQA;kBAER,cAAA,KAACS;YAAIR,SAAS;sBACZ,cAAA,KAAChB;gBAAiBc,YAAYA;gBAAYE,SAAS;0BAChDK;;;;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 { getFormFieldModeFromSelectType } from '../../lib/select';\nimport type { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type 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  compact: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<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): React.ReactNode => {\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 !== '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","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","compact","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","autoFocus","restProps","rootRef","sizeY","title","undefined","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,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAA6B,yBAAyB;AAExE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAYA;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,KAAChB,iBAAe,EACxBiB,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EAEU,WADhBC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,UAAUxB,aAAaa;IAE7B,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAM4B,QAAQf,YAAYD;IAE1BX,aAAayB,SAASF;IAEtB,qBACE,KAACnB,mDACKoB;QACJd,UAAUM,WAAWY,YAAYlB;QACjCY,WAAWxB,yBAET4B,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7C,CAACd,iCACDG,sCACAF,UAAU,wCACVA,UAAU,sCACVK,mCACAI;QAEFR,YAAYW;QACZR,SAASD,WAAWY,YAAYX;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPU,MAAM3B,+BAA+BkB;QACrCC,QAAQA;kBAER,cAAA,KAACS;YAAIR,SAAS;sBACZ,cAAA,KAACjB;gBAAiBe,YAAYA;gBAAYE,SAAS;0BAChDK;;;;AAKX,EAAE"}

package/dist/components/SimpleCell/SimpleCell.js

@@ -13,7 +13,7 @@ import { Subhead } from '../Typography/Subhead/Subhead';
 import { Chevron } from './Chevron/Chevron';
 const sizeYClassNames = {
     none: "vkuiSimpleCell--sizeY-none",
-    ['compact']: "vkuiSimpleCell--sizeY-compact"
+    compact: "vkuiSimpleCell--sizeY-compact"
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell

package/dist/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 type { HasComponent } from '../../types';\nimport { Tappable, type 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 sizeYClassNames = {\n  none: styles['SimpleCell--sizeY-none'],\n  ['compact']: styles['SimpleCell--sizeY-compact'],\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   * В режиме `auto` в iOS добавляет chevron справа.\n   * Передавать `always`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: '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): React.ReactNode => {\n  const platform = usePlatform();\n\n  const hasChevron = expandable === 'always' || (expandable === 'auto' && 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        restProps.disabled && styles['SimpleCell--disabled'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      <div\n        className={classNames(\n          styles['SimpleCell__before'],\n          platform === 'ios' && styles['SimpleCell__before--ios'],\n        )}\n      >\n        {before}\n      </div>\n      <div className={styles['SimpleCell__middle']}>\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","Tappable","Footnote","Headline","Subhead","Chevron","sizeYClassNames","none","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","disabled","div","Component","span","weight","normalize","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAgEA;;CAEC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,cAAc,GAAG,EAED,WADbC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWzB;IAEjB,MAAM0B,aAAaT,eAAe,YAAaA,eAAe,UAAUQ,aAAa;IAErF,MAAME,WAAW7B,aAAakB,UAAUU;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG7B;IAE3B,qBACE,MAACE,kDACKuB;QACJF,WAAWzB,6BAET2B,UAAUK,QAAQ,gCAClBD,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CV,qCACAI;;0BAGF,KAACQ;gBACCR,WAAWzB,qCAET4B,aAAa;0BAGdZ;;0BAEH,MAACiB;gBAAIR,SAAS;;oBACXH,yBACC,KAACf;wBACC2B,WAAU;wBACVT,WAAWzB;kCAEVsB;;kCAGL,MAACW;wBAAIR,SAAS;;4BACXb,kCACC,KAACuB;gCAAKV,SAAS;0CAAgCb;;0CAEjD,KAACN;gCAAS4B,WAAU;gCAAOT,SAAS;gCAAkCW,QAAO;0CAC1ElB;;4BAEFjB,aAAaY,kCACZ,KAACsB;gCAAKV,SAAS;0CAAgCZ;;;;oBAGlDU,0BACC,MAACU;wBAAIR,SAAS;;4BACXX,qCACC,KAACqB;gCAAKV,SAAS;0CAAgCX;;0CAEjD,KAACT;gCACCgC,WAAW;gCACXZ,WAAWzB;0CAEVuB;;4BAEFR,oCACC,KAACoB;gCAAKV,SAAS;0CAAgCV;;;;oBAIpDS,+BACC,KAACnB;wBACCoB,WAAWzB;kCAEVwB;;;;YAINvB,aAAagB,4BACZ,KAACX;gBAAS4B,WAAU;gBAAOE,QAAO;gBAAIX,SAAS;0BAC5CR;;YAGJa,0BACC,MAACG;gBAAIR,WAAWzB,oCAAwC;;oBACrDmB;oBACAU,4BACC,KAACrB;wBAAQ8B,MAAMZ;wBAAaD,SAAS;;;;;;AAMjD,EAAE"}
+{"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 type { HasComponent } from '../../types';\nimport { Tappable, type 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 sizeYClassNames = {\n  none: styles['SimpleCell--sizeY-none'],\n  compact: styles['SimpleCell--sizeY-compact'],\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   * В режиме `auto` в iOS добавляет chevron справа.\n   * Передавать `always`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: '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): React.ReactNode => {\n  const platform = usePlatform();\n\n  const hasChevron = expandable === 'always' || (expandable === 'auto' && 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        restProps.disabled && styles['SimpleCell--disabled'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      <div\n        className={classNames(\n          styles['SimpleCell__before'],\n          platform === 'ios' && styles['SimpleCell__before--ios'],\n        )}\n      >\n        {before}\n      </div>\n      <div className={styles['SimpleCell__middle']}>\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","Tappable","Footnote","Headline","Subhead","Chevron","sizeYClassNames","none","compact","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","disabled","div","Component","span","weight","normalize","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAgEA;;CAEC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,cAAc,GAAG,EAED,WADbC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAW1B;IAEjB,MAAM2B,aAAaT,eAAe,YAAaA,eAAe,UAAUQ,aAAa;IAErF,MAAME,WAAW9B,aAAamB,UAAUU;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG9B;IAE3B,qBACE,MAACE,kDACKwB;QACJF,WAAW1B,6BAET4B,UAAUK,QAAQ,gCAClBD,UAAU,aAAavB,eAAe,CAACuB,MAAM,EAC7CV,qCACAI;;0BAGF,KAACQ;gBACCR,WAAW1B,qCAET6B,aAAa;0BAGdZ;;0BAEH,MAACiB;gBAAIR,SAAS;;oBACXH,yBACC,KAAChB;wBACC4B,WAAU;wBACVT,WAAW1B;kCAEVuB;;kCAGL,MAACW;wBAAIR,SAAS;;4BACXb,kCACC,KAACuB;gCAAKV,SAAS;0CAAgCb;;0CAEjD,KAACP;gCAAS6B,WAAU;gCAAOT,SAAS;gCAAkCW,QAAO;0CAC1ElB;;4BAEFlB,aAAaa,kCACZ,KAACsB;gCAAKV,SAAS;0CAAgCZ;;;;oBAGlDU,0BACC,MAACU;wBAAIR,SAAS;;4BACXX,qCACC,KAACqB;gCAAKV,SAAS;0CAAgCX;;0CAEjD,KAACV;gCACCiC,WAAW;gCACXZ,WAAW1B;0CAEVwB;;4BAEFR,oCACC,KAACoB;gCAAKV,SAAS;0CAAgCV;;;;oBAIpDS,+BACC,KAACpB;wBACCqB,WAAW1B;kCAEVyB;;;;YAINxB,aAAaiB,4BACZ,KAACZ;gBAAS6B,WAAU;gBAAOE,QAAO;gBAAIX,SAAS;0BAC5CR;;YAGJa,0BACC,MAACG;gBAAIR,WAAW1B,oCAAwC;;oBACrDoB;oBACAU,4BACC,KAACtB;wBAAQ+B,MAAMZ;wBAAaD,SAAS;;;;;;AAMjD,EAAE"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -29,5 +29,5 @@ export interface SkeletonProps extends HTMLAttributesWithRootRef<HTMLDivElement
  *
  * @since 6.1.0
  */
-export declare const Skeleton: ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, ...restProps }: SkeletonProps) => React.ReactNode;
+export declare const Skeleton: ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, getRootRef, ...restProps }: SkeletonProps) => React.ReactNode;
 //# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/Skeleton/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIlF,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,cAAc,GAAG,eAAe,CAAC,EACjE,IAAI,CACF,KAAK,CAAC,aAAa,EACjB,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,QAAQ,CACX;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sKAgBlB,aAAa,KAAG,KAAK,CAAC,SAqCxB,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AA+ElF,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,cAAc,GAAG,eAAe,CAAC,EACjE,IAAI,CACF,KAAK,CAAC,aAAa,EACjB,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,QAAQ,CACX;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,kLAiBlB,aAAa,KAAG,KAAK,CAAC,SA4CxB,CAAC"}

package/dist/components/Skeleton/Skeleton.js

@@ -4,7 +4,82 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { millisecondsInSecond } from 'date-fns/constants';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { usePrevious } from '../../hooks/usePrevious';
+import { useDOM } from '../../lib/dom';
 import { RootComponent } from '../RootComponent/RootComponent';
+const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
+/**
+ * Синхронизирует анимацию скелетонов с помощью временных отрезков
+ *
+ * ## visibilitychange
+ *
+ * В синхронизацию не заложен механизм перехода на оптимизации браузеров при
+ * переходе на другую вкладку, поскольку нет уверенности в реальности таких
+ * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать
+ * событие `visibilitychange` используя функцию `syncAnimation`
+ *
+ * https://developer.chrome.com/blog/page-lifecycle-api/
+ *
+ * @param duration длительность анимации в секундах
+ */ function useSkeletonSyncAnimation(disableAnimation, duration = 1.5) {
+    const [isAnimationStarted, setIsAnimationStarted] = React.useState(false);
+    const timer = React.useRef(undefined);
+    const syncAnimation = React.useCallback(()=>{
+        clearTimeout(timer.current);
+        setIsAnimationStarted(false);
+        const durationInMilliseconds = duration * millisecondsInSecond;
+        const delay = durationInMilliseconds - performance.now() % durationInMilliseconds;
+        timer.current = setTimeout(()=>setIsAnimationStarted(true), delay);
+        return ()=>clearTimeout(timer.current);
+    }, [
+        duration
+    ]);
+    React.useEffect(()=>{
+        if (disableAnimation) {
+            setIsAnimationStarted(false);
+            return;
+        }
+        if (isAnimationStarted) {
+            return;
+        }
+        return syncAnimation();
+    }, [
+        disableAnimation,
+        isAnimationStarted,
+        syncAnimation
+    ]);
+    return isAnimationStarted;
+}
+/**
+ * Вычисляет позицию скелетона
+ */ function useSkeletonPosition(rootRef) {
+    const { document, window } = useDOM();
+    const [skeletonGradientLeft, setSkeletonGradientLeft] = React.useState('0');
+    const prevSkeletonGradientLeft = usePrevious(skeletonGradientLeft);
+    const updatePosition = React.useCallback(()=>{
+        const el = rootRef.current;
+        if (!el || !document) {
+            return;
+        }
+        const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);
+        const gradientValue = value === 0 ? '0' : `${value}px`;
+        if (prevSkeletonGradientLeft !== gradientValue) {
+            setSkeletonGradientLeft(gradientValue);
+        }
+    }, [
+        document,
+        prevSkeletonGradientLeft,
+        rootRef
+    ]);
+    React.useEffect(updatePosition, [
+        updatePosition
+    ]);
+    useGlobalEventListener(window, 'resize', updatePosition);
+    return skeletonGradientLeft;
+}
 /**
  * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент
  * > на экране должен заменяться заглушкой.
@@ -16,7 +91,7 @@ import { RootComponent } from '../RootComponent/RootComponent';
  *
  * @since 6.1.0
  */ export const Skeleton = (_param)=>{
-    var { width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin } = _param, restProps = _object_without_properties(_param, [
+    var { width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation = false, duration, margin, getRootRef } = _param, restProps = _object_without_properties(_param, [
         "width",
         "height",
         "inlineSize",
@@ -30,8 +105,12 @@ import { RootComponent } from '../RootComponent/RootComponent';
         "colorTo",
         "noAnimation",
         "duration",
-        "margin"
+        "margin",
+        "getRootRef"
     ]);
+    const rootRef = useExternRef(getRootRef);
+    const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);
+    const skeletonGradientLeft = useSkeletonPosition(rootRef);
     const skeletonStyle = {
         width,
         height,
@@ -40,7 +119,8 @@ import { RootComponent } from '../RootComponent/RootComponent';
         maxWidth,
         maxInlineSize,
         borderRadius,
-        margin
+        margin,
+        [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft
     };
     if (colorFrom) {
         skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;
@@ -52,8 +132,9 @@ import { RootComponent } from '../RootComponent/RootComponent';
         skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;
     }
     return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
+        getRootRef: rootRef,
         Component: "span",
-        baseClassName: classNames("vkuiSkeleton", noAnimation && "vkuiSkeleton--disableAnimation"),
+        baseClassName: classNames("vkuiSkeleton", disableAnimation && "vkuiSkeleton--disableAnimation"),
         style: _object_spread({}, skeletonStyle, style)
     }, restProps), {
         children: children || /*#__PURE__*/ _jsx(_Fragment, {

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации\n   */\n  colorFrom?: string;\n\n  /**\n   * Финальный цвет анимации\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах\n   */\n  duration?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  style,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation,\n  duration,\n  margin,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      Component=\"span\"\n      baseClassName={classNames(\n        styles['Skeleton'],\n        noAnimation && styles['Skeleton--disableAnimation'],\n      )}\n      style={{ ...skeletonStyle, ...style }}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","RootComponent","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","duration","margin","restProps","skeletonStyle","Number","isFinite","Component","baseClassName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAqC/D;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,WAAW;QAAC,EACvBC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,YAAY,EACZC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,MAAM,EAEQ,WADXC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,gBAA2D;QAC/Df;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO;IACF;IAEA,IAAIJ,WAAW;QACbM,aAAa,CAAC,uCAAuC,GAAGN;IAC1D;IAEA,IAAIC,SAAS;QACXK,aAAa,CAAC,qCAAqC,GAAGL;IACxD;IAEA,IAAIM,OAAOC,QAAQ,CAACL,WAAW;QAC7BG,aAAa,CAAC,+CAA+C,GAAG,CAAC,EAAEH,SAAS,CAAC,CAAC;IAChF;IAEA,qBACE,KAACd;QACCoB,WAAU;QACVC,eAAetB,2BAEbc;QAEFJ,OAAO,mBAAKQ,eAAkBR;OAC1BO;kBAEHN,0BAAY;sBAAE;;;AAGrB,EAAE"}
+{"version":3,"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { millisecondsInSecond } from 'date-fns/constants';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`\n *\n * https://developer.chrome.com/blog/page-lifecycle-api/\n *\n * @param duration длительность анимации в секундах\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона\n */\nfunction useSkeletonPosition(rootRef: React.MutableRefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [skeletonGradientLeft, setSkeletonGradientLeft] = React.useState('0');\n  const prevSkeletonGradientLeft = usePrevious(skeletonGradientLeft);\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el || !document) {\n      return;\n    }\n\n    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [document, prevSkeletonGradientLeft, rootRef]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useGlobalEventListener(window, 'resize', updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации\n   */\n  colorFrom?: string;\n\n  /**\n   * Финальный цвет анимации\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах\n   */\n  duration?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  style,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(\n        styles['Skeleton'],\n        disableAnimation && styles['Skeleton--disableAnimation'],\n      )}\n      style={{ ...skeletonStyle, ...style }}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useGlobalEventListener","usePrevious","useDOM","RootComponent","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","setSkeletonGradientLeft","prevSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","margin","getRootRef","restProps","skeletonStyle","Number","isFinite","Component","baseClassName"],"mappings":"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"}

package/dist/components/Slider/Slider.js

@@ -12,7 +12,7 @@ import { SliderThumb } from './SliderThumb/SliderThumb';
 import { extractSliderAriaAttributesFromRestProps, getDraggingTypeByTargetDataset, isMultipleValues, offsetToValue, snapDirection, toPercent, updateInternalStateValue, updateInternalStateValueByNativeChange } from './helpers';
 const sizeYClassNames = {
     none: "vkuiSlider--sizeY-none",
-    ['compact']: "vkuiSlider--sizeY-compact"
+    compact: "vkuiSlider--sizeY-compact"
 };
 const sizeClassNames = {
     l: "vkuiSlider--size-l",

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { type CustomTouchEvent, type CustomTouchEventHandler, Touch } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  ['compact']: styles['Slider--sizeY-compact'],\n};\n\nconst sizeClassNames = {\n  l: styles['Slider--size-l'],\n  m: styles['Slider--size-m'],\n  s: styles['Slider--size-s'],\n};\n\nexport interface SliderBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?: (index: number) => string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?: (value: number, index: number) => string;\n  withTooltip?: boolean;\n  /**\n   * Размер ползунка.\n   */\n  size?: 's' | 'm' | 'l';\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number, event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  onChange?: (value: [number, number], event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  step = 1,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  onChange,\n  withTooltip,\n  size = 'l',\n  ...restProps\n}: SliderProps | SliderMultipleProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n  const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType | null>(null);\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (\n    nextValue: InternalValueState,\n    event: CustomTouchEvent | React.ChangeEvent,\n  ) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    const nextStartX = event.startX - nextContainerX;\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n    setActiveThumb(gesture.dragging);\n  };\n\n  const handlePointerMove: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + shiftX;\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: CustomTouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n    setActiveThumb(null);\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      event,\n    );\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles['Slider'],\n        disabled && styles['Slider--disabled'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        sizeClassNames[size],\n        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles['Slider__track']} />\n      <div\n        className={styles['Slider__track-fill']}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles['Slider__thumb']}\n          style={{\n            left: `${startValueInPercent}%`,\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          withTooltip={withTooltip}\n          inputProps={{\n            'data-type': 'start',\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n          isActive={activeThumb === 'start'}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles['Slider__thumb']}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            withTooltip={withTooltip}\n            inputProps={{\n              'data-type': 'end',\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n            isActive={activeThumb === 'end'}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","clamp","useAdaptivity","useExternRef","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","sizeYClassNames","none","sizeClassNames","l","m","s","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","withTooltip","size","restProps","sizeY","isControlled","undefined","localValue","setValue","useState","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","data-value","onStart","onMove","onEnd","div","style","right","ref","data-type","zIndex","inputProps","isActive"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AAExD,SAA8DC,KAAK,QAAQ,iBAAiB;AAC5F,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SACEC,wCAAwC,EACxCC,8BAA8B,EAC9BC,gBAAgB,EAChBC,aAAa,EACbC,aAAa,EACbC,SAAS,EACTC,wBAAwB,EACxBC,sCAAsC,QACjC,YAAY;AAInB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AA2CA;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,OAAO,CAAC,EACRC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,OAAOC,SAAS,EAChBC,UAAUC,YAAY,EACtBC,eAAeD,eAAe;QAACL;QAAKC;KAAI,GAAGD,GAAG,EAC9CO,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,EACRC,WAAW,EACXC,OAAO,GAAG,EAEwB,WAD/BC;QAdHhB;QACAC;QACAC;QACAC;QACAE;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGpC;IAE3B,MAAMqC,eAAed,cAAce;IACnC,MAAM,CAACC,YAAYC,SAAS,GAAG3C,MAAM4C,QAAQ,CAACf;IAE9C,MAAMJ,QAAQzB,MAAM6C,OAAO,CAAqB;QAC9C,MAAMC,gBAAgBN,eAAed,YAAYgB;QACjD,OAAOK,MAAMC,OAAO,CAACF,iBACjB;YAAC5C,MAAM4C,aAAa,CAAC,EAAE,EAAEvB,KAAKC;YAAMtB,MAAM4C,aAAa,CAAC,EAAE,EAAEvB,KAAKC;SAAK,GACtE;YAACtB,MAAM4C,eAAevB,KAAKC;YAAM;SAAK;IAC5C,GAAG;QAACgB;QAAcd;QAAWgB;QAAYnB;QAAKC;KAAI;IAElD,MAAM,CAACyB,YAAYC,SAAS,GAAGzB;IAC/B,MAAME,WAAWC,gBAAgBsB,aAAa;IAC9C,MAAMC,sBAAsBvC,UAAUqC,YAAY1B,KAAKC;IACvD,MAAM4B,4BAA4BzB,WAAWf,UAAUsC,UAAU3B,KAAKC,OAAO;IAC7E,MAAM,CAAC6B,aAAaC,eAAe,GAAGtD,MAAM4C,QAAQ,CAA8B;IAElF,MAAMW,UAAUvD,MAAMwD,MAAM,CAAqB;QAC/CC,UAAU;QACVC,QAAQ;QACRC,gBAAgB;IAClB,GAAGC,OAAO;IACV,MAAMC,qBAAqBzD,aAAa4B;IACxC,MAAM8B,qBAAqB9D,MAAMwD,MAAM,CAAmB;IAC1D,MAAMO,mBAAmB/D,MAAMwD,MAAM,CAAmB;IAExD,MACEjD,4CAAAA,yCAAyC+B,YADrC,EAAE0B,SAAS,EAAEC,aAAa,EAAEC,cAAc,EAAqC,GACnF3D,2CADmD4D,4DACnD5D;QADMyD;QAAWC;QAAeC;;IAGlC,MAAME,cAAc,CAClBC,WACAC;QAEA,IAAIxC,YAAaL,KAAK,CAAC,EAAE,KAAK4C,SAAS,CAAC,EAAE,IAAI5C,KAAK,CAAC,EAAE,KAAK4C,SAAS,CAAC,EAAE,EAAG;YACxE;QACF;QAEA,IAAIzC,cAAc;YAChB,IAAInB,iBAAiB4D,YAAY;gBAC/B,CAAC7B,gBAAgBG,SAAS0B;gBAC1BlC,YAAYA,SAASkC,WAAWC;YAClC;QACF,OAAO;YACL,CAAC9B,gBAAgBG,SAAS0B,SAAS,CAAC,EAAE;YACtClC,YAAYA,SAASkC,SAAS,CAAC,EAAE,EAAEC;QACrC;IACF;IAEA,MAAMC,qBAA8C,CAACD;QACnD,IAAI,CAACT,mBAAmBD,OAAO,EAAE;YAC/B;QACF;QAEA,MAAM,EAAEY,MAAMC,cAAc,EAAEC,OAAOC,kBAAkB,EAAE,GACvDd,mBAAmBD,OAAO,CAACgB,qBAAqB;QAElD,mGAAmG;QACnG,MAAMC,oBAAoBrE,+BAA+B8D,MAAMQ,aAAa,CAACC,MAAM;QAEnF,MAAMC,aAAaV,MAAMZ,MAAM,GAAGe;QAClC,MAAMJ,YAAY3D,cAAcsE,YAAYL,oBAAoBpD,KAAKC,KAAKF;QAC1E,MAAM2D,eAAetE,cAAcc,OAAO4C,WAAWQ;QAErDtB,QAAQE,QAAQ,GAAGwB;QACnB1B,QAAQI,cAAc,GAAGgB;QACzBpB,QAAQG,MAAM,GAAGsB;QAEjB,MAAME,4BAA4BrE,yBAChCY,OACA4C,WACA9C,KACAC,KACAyD;QAGF,MAAM,CAACE,gBAAgBC,aAAa,GAAGF;QACvC,IACEpB,mBAAmBF,OAAO,IACzBiB,CAAAA,sBAAsB,WACpBM,mBAAmBlC,cAAcmC,iBAAiBlC,QAAQ,GAC7D;YACAY,mBAAmBF,OAAO,CAACyB,KAAK;YAChCf,MAAMQ,aAAa,CAACQ,cAAc;QACpC,OAAO,IACLvB,iBAAiBH,OAAO,IACvBiB,CAAAA,sBAAsB,SAAUO,iBAAiBlC,YAAYiC,mBAAmBlC,UAAU,GAC3F;YACAc,iBAAiBH,OAAO,CAACyB,KAAK;YAC9Bf,MAAMQ,aAAa,CAACQ,cAAc;QACpC;QAEAlB,YAAYc,2BAA2BZ;QAEvCA,MAAMQ,aAAa,CAACS,eAAe;QACnCjC,eAAeC,QAAQE,QAAQ;IACjC;IAEA,MAAM+B,oBAA6C,CAAClB;QAClD,MAAM,EAAEZ,MAAM,EAAEC,cAAc,EAAEF,QAAQ,EAAE,GAAGF;QAE7C,MAAM,EAAEkC,SAAS,CAAC,EAAE,GAAGnB;QACvB,MAAMU,aAAatB,SAAS+B;QAC5B,MAAMpB,YAAY3D,cAAcsE,YAAYrB,gBAAgBpC,KAAKC,KAAKF;QAEtE8C,YAAYvD,yBAAyBY,OAAO4C,WAAW9C,KAAKC,KAAKiC,WAAWa;QAE5EA,MAAMQ,aAAa,CAACS,eAAe;QACnCjB,MAAMQ,aAAa,CAACQ,cAAc;IACpC;IAEA,MAAMI,mBAA4C,CAACpB;QACjDf,QAAQE,QAAQ,GAAG;QACnBa,MAAMQ,aAAa,CAACS,eAAe;QACnCjC,eAAe;IACjB;IAEA,MAAMqC,4BAA4B,CAACrB;QACjCF,YACEtD,uCACEW,OACAmE,OAAOtB,MAAMS,MAAM,CAACtD,KAAK,GACzBjB,+BAA+B8D,MAAMS,MAAM,IAE7CT;IAEJ;IAEA,qBACE,MAACjE;QACCwF,cAAYlE,WAAW,CAAC,EAAEsB,WAAW,CAAC,EAAEC,SAAS,CAAC,GAAGD;OACjDkB;QACJpC,WAAW9B,yBAET6B,oCACAS,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CtB,cAAc,CAACoB,KAAK,EACpBN;QAEF+D,SAAShE,WAAWW,YAAY8B;QAChCwB,QAAQjE,WAAWW,YAAY+C;QAC/BQ,OAAOlE,WAAWW,YAAYiD;;0BAE9B,KAACO;gBAAIlE,SAAS;;0BACd,KAACkE;gBACClE,SAAS;gBACTmE,OACEvE,WACI;oBAAE6C,MAAM,CAAC,EAAErB,oBAAoB,CAAC,CAAC;oBAAEgD,OAAO,CAAC,EAAE,MAAM/C,0BAA0B,CAAC,CAAC;gBAAC,IAChF;oBAAEsB,OAAO,CAAC,EAAEvB,oBAAoB,CAAC,CAAC;gBAAC;;0BAG3C,MAAC8C;gBAAIG,KAAKvC;gBAAoB9B,SAAS;;kCACrC,KAACzB;wBACC+F,aAAU;wBACVtE,SAAS;wBACTmE,OAAO;4BACL1B,MAAM,CAAC,EAAErB,oBAAoB,CAAC,CAAC;4BAC/B,6GAA6G;4BAC7GmD,QAAQ3E,YAAYwB,uBAAuB,KAAK,IAAIV;wBACtD;wBACAL,aAAaA;wBACbmE,YAAY;4BACV,aAAa;4BACb,OAAOzC;4BACP,QAAQxC;4BACR,OAAOC;4BACP,SAAS0B;4BACT,OAAOtB,WAAWuB,WAAW1B;4BAC7B,YAAYM;4BACZ,cAAcG,eAAeA,aAAa,KAAK+B;4BAC/C,kBAAkB9B,mBAAmBA,iBAAiBe,YAAY,KAAKgB;4BACvE,mBAAmBC;4BACnB,YAAYyB;wBACd;wBACAa,UAAUnD,gBAAgB;;oBAE3B1B,0BACC,KAACrB;wBACC+F,aAAU;wBACVtE,SAAS;wBACTmE,OAAO;4BAAE1B,MAAM,CAAC,EAAEpB,0BAA0B,CAAC,CAAC;wBAAC;wBAC/ChB,aAAaA;wBACbmE,YAAY;4BACV,aAAa;4BACb,OAAOxC;4BACP,QAAQzC;4BACR,OAAO2B;4BACP,SAASC;4BACT,OAAO1B;4BACP,YAAYM;4BACZ,cAAcG,eAAeA,aAAa,KAAK+B;4BAC/C,kBAAkB9B,mBAAmBA,iBAAiBgB,UAAU,KAAKe;4BACrE,mBAAmBC;4BACnB,YAAYyB;wBACd;wBACAa,UAAUnD,gBAAgB;;;;;;AAMtC,EAAE"}
+{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { type CustomTouchEvent, type CustomTouchEventHandler, Touch } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n  extractSliderAriaAttributesFromRestProps,\n  getDraggingTypeByTargetDataset,\n  isMultipleValues,\n  offsetToValue,\n  snapDirection,\n  toPercent,\n  updateInternalStateValue,\n  updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  compact: styles['Slider--sizeY-compact'],\n};\n\nconst sizeClassNames = {\n  l: styles['Slider--size-l'],\n  m: styles['Slider--size-m'],\n  s: styles['Slider--size-s'],\n};\n\nexport interface SliderBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  /**\n   * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n   *\n   * > Перебивает `aria-label`.\n   */\n  getAriaLabel?: (index: number) => string;\n  /**\n   * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n   *\n   * Полезно при использовании компонента как неконтролируемого.\n   *\n   * > Перебивает `aria-valuetext`.\n   */\n  getAriaValueText?: (value: number, index: number) => string;\n  withTooltip?: boolean;\n  /**\n   * Размер ползунка.\n   */\n  size?: 's' | 'm' | 'l';\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number, event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  onChange?: (value: [number, number], event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  step = 1,\n  min = 0,\n  max = 100,\n  value: valueProp,\n  multiple: multipleProp,\n  defaultValue = multipleProp ? [min, max] : min,\n  disabled,\n  className,\n  getRootRef,\n  getAriaLabel,\n  getAriaValueText,\n  onChange,\n  withTooltip,\n  size = 'l',\n  ...restProps\n}: SliderProps | SliderMultipleProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const isControlled = valueProp !== undefined;\n  const [localValue, setValue] = React.useState(defaultValue);\n\n  const value = React.useMemo<InternalValueState>(() => {\n    const resolvedValue = isControlled ? valueProp : localValue;\n    return Array.isArray(resolvedValue)\n      ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n      : [clamp(resolvedValue, min, max), null];\n  }, [isControlled, valueProp, localValue, min, max]);\n\n  const [startValue, endValue] = value;\n  const multiple = multipleProp && endValue !== null;\n  const startValueInPercent = toPercent(startValue, min, max);\n  const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n  const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType | null>(null);\n\n  const gesture = React.useRef<InternalGestureRef>({\n    dragging: null,\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const thumbsContainerRef = useExternRef(getRootRef);\n  const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n  const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n  const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n    extractSliderAriaAttributesFromRestProps(restProps);\n\n  const changeValue = (\n    nextValue: InternalValueState,\n    event: CustomTouchEvent | React.ChangeEvent,\n  ) => {\n    if (disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n      return;\n    }\n\n    if (multipleProp) {\n      if (isMultipleValues(nextValue)) {\n        !isControlled && setValue(nextValue);\n        onChange && onChange(nextValue, event);\n      }\n    } else {\n      !isControlled && setValue(nextValue[0]);\n      onChange && onChange(nextValue[0], event);\n    }\n  };\n\n  const handlePointerStart: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    if (!thumbsContainerRef.current) {\n      return;\n    }\n\n    const { left: nextContainerX, width: nextContainerWidth } =\n      thumbsContainerRef.current.getBoundingClientRect();\n\n    // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n    const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n    const nextStartX = event.startX - nextContainerX;\n    const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n    const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n    gesture.dragging = nextDragging;\n    gesture.containerWidth = nextContainerWidth;\n    gesture.startX = nextStartX;\n\n    const updatedInternalStateValue = updateInternalStateValue(\n      value,\n      nextValue,\n      min,\n      max,\n      nextDragging,\n    );\n\n    const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n    if (\n      thumbStartInputRef.current &&\n      (foundDraggingType === 'start' ||\n        (nextStartValue !== startValue && nextEndValue === endValue))\n    ) {\n      thumbStartInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    } else if (\n      thumbEndInputRef.current &&\n      (foundDraggingType === 'end' || (nextEndValue !== endValue && nextStartValue === startValue))\n    ) {\n      thumbEndInputRef.current.focus();\n      event.originalEvent.preventDefault();\n    }\n\n    changeValue(updatedInternalStateValue, event);\n\n    event.originalEvent.stopPropagation();\n    setActiveThumb(gesture.dragging);\n  };\n\n  const handlePointerMove: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n    const { startX, containerWidth, dragging } = gesture;\n\n    const { shiftX = 0 } = event;\n    const nextStartX = startX + shiftX;\n    const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n    changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n  };\n\n  const handlePointerEnd: CustomTouchEventHandler = (event) => {\n    gesture.dragging = null;\n    event.originalEvent.stopPropagation();\n    setActiveThumb(null);\n  };\n\n  const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    changeValue(\n      updateInternalStateValueByNativeChange(\n        value,\n        Number(event.target.value),\n        getDraggingTypeByTargetDataset(event.target),\n      ),\n      event,\n    );\n  };\n\n  return (\n    <Touch\n      data-value={multiple ? `${startValue},${endValue}` : startValue}\n      {...restPropsWithoutAriaAttributes}\n      className={classNames(\n        styles['Slider'],\n        disabled && styles['Slider--disabled'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        sizeClassNames[size],\n        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles['Slider__track']} />\n      <div\n        className={styles['Slider__track-fill']}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles['Slider__thumbs']}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles['Slider__thumb']}\n          style={{\n            left: `${startValueInPercent}%`,\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          withTooltip={withTooltip}\n          inputProps={{\n            'data-type': 'start',\n            'ref': thumbStartInputRef,\n            'step': step,\n            'min': min,\n            'value': startValue,\n            'max': multiple ? endValue : max,\n            'disabled': disabled,\n            'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n            'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n            'aria-labelledby': ariaLabelledBy,\n            'onChange': handleChangeByNativeInput,\n          }}\n          isActive={activeThumb === 'start'}\n        />\n        {multiple && (\n          <SliderThumb\n            data-type=\"end\"\n            className={styles['Slider__thumb']}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            withTooltip={withTooltip}\n            inputProps={{\n              'data-type': 'end',\n              'ref': thumbEndInputRef,\n              'step': step,\n              'min': startValue,\n              'value': endValue,\n              'max': max,\n              'disabled': disabled,\n              'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n              'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n              'aria-labelledby': ariaLabelledBy,\n              'onChange': handleChangeByNativeInput,\n            }}\n            isActive={activeThumb === 'end'}\n          />\n        )}\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","clamp","useAdaptivity","useExternRef","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","sizeYClassNames","none","compact","sizeClassNames","l","m","s","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","onChange","withTooltip","size","restProps","sizeY","isControlled","undefined","localValue","setValue","useState","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","data-value","onStart","onMove","onEnd","div","style","right","ref","data-type","zIndex","inputProps","isActive"],"mappings":"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"}

package/dist/components/SubnavigationButton/SubnavigationButton.js

@@ -25,7 +25,7 @@ const sizeStyles = {
 };
 const sizeYClassNames = {
     none: "vkuiSubnavigationButton--sizeY-none",
-    ['compact']: "vkuiSubnavigationButton--sizeY-compact"
+    compact: "vkuiSubnavigationButton--sizeY-compact"
 };
 const SubnavigationButtonTypography = (_param)=>{
     var { textLevel } = _param, restProps = _object_without_properties(_param, [