@vkontakte/vkui 5.2.0 → 5.2.1

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

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

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

@@ -9,17 +9,21 @@ exports.SegmentedControl = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _useEnsuredControl = require("../../hooks/useEnsuredControl");
 var _useId = require("../../hooks/useId");
+var _adaptivity = require("../../lib/adaptivity");
+var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _warnOnce = require("../../lib/warnOnce");
 var _SegmentedControlOption = require("./SegmentedControlOption/SegmentedControlOption");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-var _useEnsuredControl = require("../../hooks/useEnsuredControl");
 var _excluded = ["size", "name", "options", "getRootRef", "defaultValue", "children", "className", "onChange", "value"],
   _excluded2 = ["label", "className"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiSegmentedControl--sizeY-none"
+}, _adaptivity.SizeType.REGULAR, "vkuiSegmentedControl--sizeY-regular");
 var warn = (0, _warnOnce.warnOnce)('SegmentedControl');
 
 /**
@@ -49,28 +53,24 @@ var SegmentedControl = function SegmentedControl(_ref) {
     value = _useCustomEnsuredCont2[0],
     _onChange = _useCustomEnsuredCont2[1];
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
-  var _React$useState = React.useState(0),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    activeOptionIdx = _React$useState2[0],
-    updateActiveOptionIdx = _React$useState2[1];
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
+  var actualIndex = options.findIndex(function (option) {
+    return option.value === value;
+  });
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    var _activeOptionIdx = options.findIndex(function (option) {
-      return option.value === value;
-    });
-    if (_activeOptionIdx === -1 && process.env.NODE_ENV === 'development') {
+    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {
       warn('defaultValue: такого значения нет среди опций!', 'error');
     }
-    updateActiveOptionIdx(_activeOptionIdx);
-  }, [value, options]);
-  var translateX = "translateX(".concat(100 * activeOptionIdx, "%)");
+  }, [actualIndex]);
+  var translateX = "translateX(".concat(100 * actualIndex, "%)");
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiSegmentedControl", (0, _getSizeYClassName.getSizeYClassName)("vkuiSegmentedControl", sizeY), styles["SegmentedControl--size-".concat(size)], className),
+    className: (0, _vkjs.classNames)("vkuiSegmentedControl", sizeY !== _adaptivity.SizeType.COMPACT && sizeYClassNames[sizeY], styles["SegmentedControl--size-".concat(size)], className),
     ref: getRootRef
   }), /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
     className: "vkuiSegmentedControl__in"
-  }, activeOptionIdx > -1 && /*#__PURE__*/React.createElement("div", {
+  }, actualIndex > -1 && /*#__PURE__*/React.createElement("div", {
     "aria-hidden": true,
     className: "vkuiSegmentedControl__slider",
     style: {

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":["warn","warnOnce","SegmentedControl","size","name","options","getRootRef","defaultValue","value","children","className","onChangeProp","onChange","valueProp","restProps","id","useId","useCustomEnsuredControl","useAdaptivity","sizeY","React","useState","activeOptionIdx","updateActiveOptionIdx","useIsomorphicLayoutEffect","_activeOptionIdx","findIndex","option","process","env","NODE_ENV","translateX","classNames","getSizeYClassName","styles","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps"],"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useId } from '../../hooks/useId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport { HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport styles from './SegmentedControl.module.css';\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  getRootRef,\n  defaultValue = options[0]?.value,\n  children,\n  className,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY } = useAdaptivity();\n\n  const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const _activeOptionIdx = options.findIndex((option) => option.value === value);\n\n    if (_activeOptionIdx === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n\n    updateActiveOptionIdx(_activeOptionIdx);\n  }, [value, options]);\n\n  const translateX = `translateX(${100 * activeOptionIdx}%)`;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        getSizeYClassName(styles['SegmentedControl'], sizeY),\n        styles[`SegmentedControl--size-${size}`],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {activeOptionIdx > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAwE;EAAA;AAsBxE,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,kBAAkB,CAAC;;AAEzC;AACA;AACA;AACO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAWA;EAAA;EAAA,qBAV3BC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IAAA,yBACVC,YAAY;IAAZA,YAAY,+CAAGF,OAAO,CAAC,CAAC,CAAC,8CAAV,UAAYG,KAAK;IAChCC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACCC,YAAY,QAAtBC,QAAQ;IACDC,SAAS,QAAhBL,KAAK;IACFM,SAAS;EAEZ,IAAMC,EAAE,GAAG,IAAAC,YAAK,GAAE;EAElB,4BAA0B,IAAAC,0CAAuB,EAAC;MAChDL,QAAQ,EAAED,YAAY;MACtBH,KAAK,EAAEK,SAAS;MAChBN,YAAY,EAAZA;IACF,CAAC,CAAC;IAAA;IAJKC,KAAK;IAAEI,SAAQ;EAMtB,qBAAkB,IAAAM,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,sBAAiDC,KAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;IAAA;IAAnEC,eAAe;IAAEC,qBAAqB;EAE7C,IAAAC,oDAAyB,EAAC,YAAM;IAC9B,IAAMC,gBAAgB,GAAGpB,OAAO,CAACqB,SAAS,CAAC,UAACC,MAAM;MAAA,OAAKA,MAAM,CAACnB,KAAK,KAAKA,KAAK;IAAA,EAAC;IAE9E,IAAIiB,gBAAgB,KAAK,CAAC,CAAC,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;MACrE9B,IAAI,CAAC,gDAAgD,EAAE,OAAO,CAAC;IACjE;IAEAuB,qBAAqB,CAACE,gBAAgB,CAAC;EACzC,CAAC,EAAE,CAACjB,KAAK,EAAEH,OAAO,CAAC,CAAC;EAEpB,IAAM0B,UAAU,wBAAiB,GAAG,GAAGT,eAAe,OAAI;EAE1D,oBACE,sDACMR,SAAS;IACb,SAAS,EAAE,IAAAkB,gBAAU,0BAEnB,IAAAC,oCAAiB,0BAA6Bd,KAAK,CAAC,EACpDe,MAAM,kCAA2B/B,IAAI,EAAG,EACxCO,SAAS,CACT;IACF,GAAG,EAAEJ;EAAW,iBAEhB;IAAK,IAAI,EAAC,YAAY;IAAC,SAAS;EAAiC,GAC9DgB,eAAe,GAAG,CAAC,CAAC,iBACnB;IACE,mBAAW;IACX,SAAS,gCAAqC;IAC9C,KAAK,EAAE;MACLa,KAAK,YAAK,GAAG,GAAG9B,OAAO,CAAC+B,MAAM,MAAG;MACjCC,SAAS,EAAEN,UAAU;MACrBO,eAAe,EAAEP;IACnB;EAAE,EAEL,EACA1B,OAAO,CAACkC,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAaC,eAAe,SAA1B/B,SAAS;MAAsBgC,WAAW;IAAA,oBAC/D,oBAAC,8CAAsB;MACrB,GAAG,YAAKA,WAAW,CAAClC,KAAK;IAAG,GACxBkC,WAAW;MACf,SAAS,EAAE,IAAAV,gBAAU,kCAAqCS,eAAe,CAAE;MAC3E,IAAI,EAAErC,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIW,EAAG;MACjB,OAAO,EAAEP,KAAK,KAAKkC,WAAW,CAAClC,KAAM;MACrC,QAAQ,EAAE;QAAA,OAAMI,SAAQ,CAAC8B,WAAW,CAAClC,KAAK,CAAC;MAAA;IAAC,IAE3CgC,KAAK,CACiB;EAAA,CAC1B,CAAC,CACE,CACF;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"SegmentedControl.js","names":["sizeYClassNames","none","SizeType","REGULAR","warn","warnOnce","SegmentedControl","size","name","options","getRootRef","defaultValue","value","children","className","onChangeProp","onChange","valueProp","restProps","id","useId","useCustomEnsuredControl","useAdaptivity","sizeY","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","classNames","COMPACT","styles","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps"],"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  getRootRef,\n  defaultValue = options[0]?.value,\n  children,\n  className,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        styles[`SegmentedControl--size-${size}`],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAyF;EAAA;AAGzF,IAAMA,eAAe;EACnBC,IAAI;AAAwC,GAC3CC,oBAAQ,CAACC,OAAO,wCAClB;AAqBD,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,kBAAkB,CAAC;;AAEzC;AACA;AACA;AACO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAWA;EAAA;EAAA,qBAV3BC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IAAA,yBACVC,YAAY;IAAZA,YAAY,+CAAGF,OAAO,CAAC,CAAC,CAAC,8CAAV,UAAYG,KAAK;IAChCC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACCC,YAAY,QAAtBC,QAAQ;IACDC,SAAS,QAAhBL,KAAK;IACFM,SAAS;EAEZ,IAAMC,EAAE,GAAG,IAAAC,YAAK,GAAE;EAElB,4BAA0B,IAAAC,0CAAuB,EAAC;MAChDL,QAAQ,EAAED,YAAY;MACtBH,KAAK,EAAEK,SAAS;MAChBN,YAAY,EAAZA;IACF,CAAC,CAAC;IAAA;IAJKC,KAAK;IAAEI,SAAQ;EAMtB,qBAA2B,IAAAM,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAMC,WAAW,GAAGf,OAAO,CAACgB,SAAS,CAAC,UAACC,MAAM;IAAA,OAAKA,MAAM,CAACd,KAAK,KAAKA,KAAK;EAAA,EAAC;EAEzE,IAAAe,oDAAyB,EAAC,YAAM;IAC9B,IAAIH,WAAW,KAAK,CAAC,CAAC,IAAII,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;MAChE1B,IAAI,CAAC,gDAAgD,EAAE,OAAO,CAAC;IACjE;EACF,CAAC,EAAE,CAACoB,WAAW,CAAC,CAAC;EAEjB,IAAMO,UAAU,wBAAiB,GAAG,GAAGP,WAAW,OAAI;EAEtD,oBACE,sDACMN,SAAS;IACb,SAAS,EAAE,IAAAc,gBAAU,0BAEnBT,KAAK,KAAKrB,oBAAQ,CAAC+B,OAAO,IAAIjC,eAAe,CAACuB,KAAK,CAAC,EACpDW,MAAM,kCAA2B3B,IAAI,EAAG,EACxCO,SAAS,CACT;IACF,GAAG,EAAEJ;EAAW,iBAEhB;IAAK,IAAI,EAAC,YAAY;IAAC,SAAS;EAAiC,GAC9Dc,WAAW,GAAG,CAAC,CAAC,iBACf;IACE,mBAAW;IACX,SAAS,gCAAqC;IAC9C,KAAK,EAAE;MACLW,KAAK,YAAK,GAAG,GAAG1B,OAAO,CAAC2B,MAAM,MAAG;MACjCC,SAAS,EAAEN,UAAU;MACrBO,eAAe,EAAEP;IACnB;EAAE,EAEL,EACAtB,OAAO,CAAC8B,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAaC,eAAe,SAA1B3B,SAAS;MAAsB4B,WAAW;IAAA,oBAC/D,oBAAC,8CAAsB;MACrB,GAAG,YAAKA,WAAW,CAAC9B,KAAK;IAAG,GACxB8B,WAAW;MACf,SAAS,EAAE,IAAAV,gBAAU,kCAAqCS,eAAe,CAAE;MAC3E,IAAI,EAAEjC,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIW,EAAG;MACjB,OAAO,EAAEP,KAAK,KAAK8B,WAAW,CAAC9B,KAAM;MACrC,QAAQ,EAAE;QAAA,OAAMI,SAAQ,CAAC0B,WAAW,CAAC9B,KAAK,CAAC;MAAA;IAAC,IAE3C4B,KAAK,CACiB;EAAA,CAC1B,CAAC,CACE,CACF;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}

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

@@ -8,15 +8,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.SegmentedControlOption = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../../hooks/useAdaptivity");
 var _useFocusVisible2 = require("../../../hooks/useFocusVisible");
+var _adaptivity = require("../../../lib/adaptivity");
 var _callMultiple = require("../../../lib/callMultiple");
-var _vkjs = require("@vkontakte/vkjs");
 var _FocusVisible = require("../../FocusVisible/FocusVisible");
 var _VisuallyHiddenInput = require("../../VisuallyHiddenInput/VisuallyHiddenInput");
-var _getSizeYClassName = require("../../../helpers/getSizeYClassName");
 var _excluded = ["className", "style", "children"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiSegmentedControlOption__content--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiSegmentedControlOption__content--sizeY-compact");
+
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
@@ -30,7 +35,8 @@ var SegmentedControlOption = function SegmentedControlOption(_ref) {
     onBlur = _useFocusVisible.onBlur,
     onFocus = _useFocusVisible.onFocus;
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   return /*#__PURE__*/React.createElement("label", {
     className: (0, _vkjs.classNames)("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", focusVisible && "vkuiSegmentedControlOption--focus-visible", className),
     style: style
@@ -39,7 +45,7 @@ var SegmentedControlOption = function SegmentedControlOption(_ref) {
     onBlur: (0, _callMultiple.callMultiple)(onBlur, restProps.onBlur),
     onFocus: (0, _callMultiple.callMultiple)(onFocus, restProps.onFocus)
   })), /*#__PURE__*/React.createElement("span", {
-    className: (0, _vkjs.classNames)("vkuiSegmentedControlOption__content", (0, _getSizeYClassName.getSizeYClassName)("vkuiSegmentedControlOption__content", sizeY))
+    className: (0, _vkjs.classNames)("vkuiSegmentedControlOption__content", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY])
   }, children), /*#__PURE__*/React.createElement(_FocusVisible.FocusVisible, {
     mode: "inside"
   }));

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlOption.js","names":["SegmentedControlOption","className","style","children","restProps","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeY","classNames","checked","callMultiple","getSizeYClassName"],"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { getSizeYClassName } from '../../../helpers/getSizeYClassName';\nimport styles from './SegmentedControlOption.module.css';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        focusVisible && styles['SegmentedControlOption--focus-visible'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          getSizeYClassName(styles['SegmentedControlOption__content'], sizeY),\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AAAuE;AAGvE;AACA;AACA;AACO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKH;EAAA,IAJ9BC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,uBAA0C,IAAAC,iCAAe,GAAE;IAAnDC,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EACrC,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,gCAEnBP,SAAS,CAACQ,OAAO,yCAA6C,EAC9DN,YAAY,+CAAmD,EAC/DL,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,wCAAmB,6BACdE,SAAS;IACb,IAAI,EAAC,OAAO;IACZ,MAAM,EAAE,IAAAS,0BAAY,EAACN,MAAM,EAAEH,SAAS,CAACG,MAAM,CAAE;IAC/C,OAAO,EAAE,IAAAM,0BAAY,EAACL,OAAO,EAAEJ,SAAS,CAACI,OAAO;EAAE,GAClD,eACF;IACE,SAAS,EAAE,IAAAG,gBAAU,yCAEnB,IAAAG,oCAAiB,yCAA4CJ,KAAK,CAAC;EACnE,GAEDP,QAAQ,CACJ,eACP,oBAAC,0BAAY;IAAC,IAAI,EAAC;EAAQ,EAAG,CACxB;AAEZ,CAAC;AAAC"}
+{"version":3,"file":"SegmentedControlOption.js","names":["sizeYClassNames","none","SizeType","COMPACT","SegmentedControlOption","className","style","children","restProps","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeY","classNames","checked","callMultiple","REGULAR"],"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControlOption__content--sizeY-none'],\n  [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        focusVisible && styles['SegmentedControlOption--focus-visible'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGuD;AAGvD,IAAMA,eAAe;EACnBC,IAAI;AAAuD,GAC1DC,oBAAQ,CAACC,OAAO,uDAClB;;AAED;AACA;AACA;AACO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKH;EAAA,IAJ9BC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,uBAA0C,IAAAC,iCAAe,GAAE;IAAnDC,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EACrC,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,gCAEnBP,SAAS,CAACQ,OAAO,yCAA6C,EAC9DN,YAAY,+CAAmD,EAC/DL,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,wCAAmB,6BACdE,SAAS;IACb,IAAI,EAAC,OAAO;IACZ,MAAM,EAAE,IAAAS,0BAAY,EAACN,MAAM,EAAEH,SAAS,CAACG,MAAM,CAAE;IAC/C,OAAO,EAAE,IAAAM,0BAAY,EAACL,OAAO,EAAEJ,SAAS,CAACI,OAAO;EAAE,GAClD,eACF;IACE,SAAS,EAAE,IAAAG,gBAAU,yCAEnBD,KAAK,KAAKZ,oBAAQ,CAACgB,OAAO,IAAIlB,eAAe,CAACc,KAAK,CAAC;EACpD,GAEDP,QAAQ,CACJ,eACP,oBAAC,0BAAY;IAAC,IAAI,EAAC;EAAQ,EAAG,CACxB;AAEZ,CAAC;AAAC"}

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

@@ -9,10 +9,10 @@ exports.Select = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _NativeSelect = require("../NativeSelect/NativeSelect");
-var _CustomSelect = require("../CustomSelect/CustomSelect");
-var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
 var _vkjs = require("@vkontakte/vkjs");
+var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
+var _CustomSelect = require("../CustomSelect/CustomSelect");
+var _NativeSelect = require("../NativeSelect/NativeSelect");
 var _excluded = ["children", "options", "popupDirection", "renderOption", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Select

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["Select","children","options","popupDirection","renderOption","className","props","hasPointer","useAdaptivityHasPointer","undefined","classNames","map","label","value"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Select.module.css';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  className,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          className={classNames(styles['Select__custom'], className)}\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect className={classNames(styles['Select__native'], className)} {...props}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA6C;AAK7C;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAOA;EAAA,IANjBC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IACZC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,UAAU,GAAG,IAAAC,gDAAuB,GAAE;EAE5C,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZ,CAACD,UAAU,KAAKE,SAAS,IAAIF,UAAU,kBACtC,oBAAC,0BAAY;IACX,SAAS,EAAE,IAAAG,gBAAU,wBAA2BL,SAAS,CAAE;IAC3D,OAAO,EAAEH,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,YAAY,EAAEC;EAAa,GACvBE,KAAK,EAEZ,EACA,CAACC,UAAU,KAAKE,SAAS,IAAI,CAACF,UAAU,kBACvC,oBAAC,0BAAY;IAAC,SAAS,EAAE,IAAAG,gBAAU,wBAA2BL,SAAS;EAAE,GAAKC,KAAK,GAChFJ,OAAO,CAACS,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;IAAA,oBAC1B;MAAQ,KAAK,EAAEA,KAAM;MAAC,GAAG,YAAKA,KAAK;IAAG,GACnCD,KAAK,CACC;EAAA,CACV,CAAC,CAEL,CACc;AAErB,CAAC;AAAC"}
+{"version":3,"file":"Select.js","names":["Select","children","options","popupDirection","renderOption","className","props","hasPointer","useAdaptivityHasPointer","undefined","classNames","map","label","value"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\nimport styles from './Select.module.css';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  className,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          className={classNames(styles['Select__custom'], className)}\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect className={classNames(styles['Select__native'], className)} {...props}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA4D;AAK5D;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAOA;EAAA,IANjBC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IACZC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,UAAU,GAAG,IAAAC,gDAAuB,GAAE;EAE5C,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZ,CAACD,UAAU,KAAKE,SAAS,IAAIF,UAAU,kBACtC,oBAAC,0BAAY;IACX,SAAS,EAAE,IAAAG,gBAAU,wBAA2BL,SAAS,CAAE;IAC3D,OAAO,EAAEH,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,YAAY,EAAEC;EAAa,GACvBE,KAAK,EAEZ,EACA,CAACC,UAAU,KAAKE,SAAS,IAAI,CAACF,UAAU,kBACvC,oBAAC,0BAAY;IAAC,SAAS,EAAE,IAAAG,gBAAU,wBAA2BL,SAAS;EAAE,GAAKC,KAAK,GAChFJ,OAAO,CAACS,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;IAAA,oBAC1B;MAAQ,KAAK,EAAEA,KAAM;MAAC,GAAG,YAAKA,KAAK;IAAG,GACnCD,KAAK,CACC;EAAA,CACV,CAAC,CAEL,CACc;AAErB,CAAC;AAAC"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FormFieldProps } from '../FormField/FormField';
 import { HasAlign, HasRootRef } from '../../types';
+import { FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
 export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
     multiline?: boolean;

package/dist/cjs/components/SelectMimicry/SelectMimicry.js

@@ -8,18 +8,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectMimicry = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
-var _FormField = require("../FormField/FormField");
-var _usePlatform = require("../../hooks/usePlatform");
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
 var _select = require("../../lib/select");
+var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
+var _FormField = require("../FormField/FormField");
 var _SelectTypography = require("../SelectTypography/SelectTypography");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _excluded = ["tabIndex", "placeholder", "children", "align", "getRootRef", "multiline", "disabled", "onClick", "before", "after", "selectType", "status", "className"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiSelect--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiSelect--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry
  */
@@ -43,12 +46,12 @@ var SelectMimicry = function SelectMimicry(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeX = _useAdaptivity.sizeX,
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var title = children || placeholder;
   return /*#__PURE__*/React.createElement(_FormField.FormField, (0, _extends2.default)({}, restProps, {
     tabIndex: disabled ? undefined : tabIndex,
-    className: (0, _vkjs.classNames)("vkuiSelect", (0, _getPlatformClassName.getPlatformClassName)("vkuiSelect", platform), (0, _getSizeXClassName.getSizeXClassName)("vkuiSelect", sizeX), (0, _getSizeYClassName.getSizeYClassName)("vkuiSelect", sizeY), multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], before && "vkuiSelect--hasBefore", after && "vkuiSelect--hasAfter", className),
+    className: (0, _vkjs.classNames)("vkuiSelect", (0, _getPlatformClassName.getPlatformClassName)("vkuiSelect", platform), sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], before && "vkuiSelect--hasBefore", after && "vkuiSelect--hasAfter", className),
     getRootRef: getRootRef,
     onClick: disabled ? undefined : onClick,
     disabled: disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMimicry.js","names":["SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","usePlatform","useAdaptivity","sizeX","sizeY","title","undefined","classNames","getPlatformClassName","getSizeXClassName","getSizeYClassName","styles","getFormFieldModeFromSelectType"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from '../Select/Select.module.css';\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n  const { sizeX, sizeY } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        getPlatformClassName(styles['Select'], platform),\n        getSizeXClassName(styles['Select'], sizeX),\n        getSizeYClassName(styles['Select'], sizeY),\n        multiline && styles['Select--multiline'],\n        align && styles[`Select--align-${align}`],\n        before && styles['Select--hasBefore'],\n        after && styles['Select--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAoE;AAapE;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAeA;EAAA,yBAdxBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,wCAAG,oBAAC,0BAAY,OAAG;IAAA,uBACxBC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAyB,IAAAC,6BAAa,GAAE;IAAhCC,KAAK,kBAALA,KAAK;IAAEC,KAAK,kBAALA,KAAK;EACpB,IAAMC,KAAK,GAAGjB,QAAQ,IAAID,WAAW;EAErC,oBACE,oBAAC,oBAAS,6BACJY,SAAS;IACb,QAAQ,EAAEP,QAAQ,GAAGc,SAAS,GAAGpB,QAAS;IAC1C,SAAS,EAAE,IAAAqB,gBAAU,gBAEnB,IAAAC,0CAAoB,gBAAmBR,QAAQ,CAAC,EAChD,IAAAS,oCAAiB,gBAAmBN,KAAK,CAAC,EAC1C,IAAAO,oCAAiB,gBAAmBN,KAAK,CAAC,EAC1Cb,SAAS,2BAA+B,EACxCF,KAAK,IAAIsB,MAAM,yBAAkBtB,KAAK,EAAG,EACzCK,MAAM,2BAA+B,EACrCC,KAAK,0BAA8B,EACnCG,SAAS,CACT;IACF,UAAU,EAAER,UAAW;IACvB,OAAO,EAAEE,QAAQ,GAAGc,SAAS,GAAGb,OAAQ;IACxC,QAAQ,EAAED,QAAS;IACnB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAE,IAAAiB,sCAA8B,EAAChB,UAAU,CAAE;IACjD,MAAM,EAAEC;EAAO,iBAEf;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,kCAAgB;IAAC,UAAU,EAAED,UAAW;IAAC,SAAS;EAA0B,GAC1ES,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"SelectMimicry.js","names":["sizeYClassNames","none","SizeType","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","usePlatform","useAdaptivity","sizeY","title","undefined","classNames","getPlatformClassName","REGULAR","styles","getFormFieldModeFromSelectType"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        getPlatformClassName(styles['Select'], platform),\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        multiline && styles['Select--multiline'],\n        align && styles[`Select--align-${align}`],\n        before && styles['Select--hasBefore'],\n        after && styles['Select--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAAwE;AAGxE,IAAMA,eAAe;EACnBC,IAAI;AAA8B,GACjCC,oBAAQ,CAACC,OAAO,8BAClB;AAYD;AACA;AACA;AACO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAeA;EAAA,yBAdxBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,wCAAG,oBAAC,0BAAY,OAAG;IAAA,uBACxBC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,IAAMC,KAAK,GAAGhB,QAAQ,IAAID,WAAW;EAErC,oBACE,oBAAC,oBAAS,6BACJY,SAAS;IACb,QAAQ,EAAEP,QAAQ,GAAGa,SAAS,GAAGnB,QAAS;IAC1C,SAAS,EAAE,IAAAoB,gBAAU,gBAEnB,IAAAC,0CAAoB,gBAAmBP,QAAQ,CAAC,EAChDG,KAAK,KAAKpB,oBAAQ,CAACyB,OAAO,IAAI3B,eAAe,CAACsB,KAAK,CAAC,EACpDZ,SAAS,2BAA+B,EACxCF,KAAK,IAAIoB,MAAM,yBAAkBpB,KAAK,EAAG,EACzCK,MAAM,2BAA+B,EACrCC,KAAK,0BAA8B,EACnCG,SAAS,CACT;IACF,UAAU,EAAER,UAAW;IACvB,OAAO,EAAEE,QAAQ,GAAGa,SAAS,GAAGZ,OAAQ;IACxC,QAAQ,EAAED,QAAS;IACnB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAE,IAAAe,sCAA8B,EAACd,UAAU,CAAE;IACjD,MAAM,EAAEC;EAAO,iBAEf;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,kCAAgB;IAAC,UAAU,EAAED,UAAW;IAAC,SAAS;EAA0B,GAC1EQ,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/SelectTypography/SelectTypography.js

@@ -10,8 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _usePlatform = require("../../hooks/usePlatform");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _usePlatform = require("../../hooks/usePlatform");
 var _excluded = ["selectType", "children", "className"];
 var sizeYClassNames = {
   none: "vkuiSelectTypography--sizeY-none",

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

@@ -1 +1 @@
-{"version":3,"file":"SelectTypography.js","names":["sizeYClassNames","none","compact","regular","platformClassNames","vkcom","android","selectTypeClassNames","default","plain","accent","SelectTypography","selectType","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","classNames"],"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { SelectType } from '../Select/Select';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n  regular: '',\n};\n\nconst platformClassNames: Record<string, string> = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nconst selectTypeClassNames = {\n  default: styles['SelectTypography--selectType-default'],\n  plain: styles['SelectTypography--selectType-plain'],\n  accent: styles['SelectTypography--selectType-accent'],\n};\n\nexport interface SelectTypographyProps {\n  selectType?: SelectType;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames[platform],\n        sizeYClassNames[sizeY],\n        selectTypeClassNames[selectType],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AAA0D;AAG1D,IAAMA,eAAe,GAAG;EACtBC,IAAI,oCAAwC;EAC5CC,OAAO,uCAA2C;EAClDC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,kBAA0C,GAAG;EACjDC,KAAK,+BAAmC;EACxCC,OAAO;AACT,CAAC;AAED,IAAMC,oBAAoB,GAAG;EAC3BC,OAAO,4CAAgD;EACvDC,KAAK,0CAA8C;EACnDC,MAAM;AACR,CAAC;AAQD;AACA;AACA;AACO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKA;EAAA,2BAJ3BC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,0BAEnBhB,kBAAkB,CAACY,QAAQ,CAAC,EAC5BhB,eAAe,CAACmB,KAAK,CAAC,EACtBZ,oBAAoB,CAACK,UAAU,CAAC,EAChCE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC;AAAC"}
+{"version":3,"file":"SelectTypography.js","names":["sizeYClassNames","none","compact","regular","platformClassNames","vkcom","android","selectTypeClassNames","default","plain","accent","SelectTypography","selectType","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","classNames"],"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n  regular: '',\n};\n\nconst platformClassNames: Record<string, string> = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nconst selectTypeClassNames = {\n  default: styles['SelectTypography--selectType-default'],\n  plain: styles['SelectTypography--selectType-plain'],\n  accent: styles['SelectTypography--selectType-accent'],\n};\n\nexport interface SelectTypographyProps {\n  selectType?: SelectType;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames[platform],\n        sizeYClassNames[sizeY],\n        selectTypeClassNames[selectType],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAAsD;AAItD,IAAMA,eAAe,GAAG;EACtBC,IAAI,oCAAwC;EAC5CC,OAAO,uCAA2C;EAClDC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,kBAA0C,GAAG;EACjDC,KAAK,+BAAmC;EACxCC,OAAO;AACT,CAAC;AAED,IAAMC,oBAAoB,GAAG;EAC3BC,OAAO,4CAAgD;EACvDC,KAAK,0CAA8C;EACnDC,MAAM;AACR,CAAC;AAQD;AACA;AACA;AACO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKA;EAAA,2BAJ3BC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,0BAEnBhB,kBAAkB,CAACY,QAAQ,CAAC,EAC5BhB,eAAe,CAACmB,KAAK,CAAC,EACtBZ,oBAAoB,CAACK,UAAU,CAAC,EAChCE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC;AAAC"}

package/dist/cjs/components/SimpleCell/SimpleCell.js

@@ -8,18 +8,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.SimpleCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
+var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
-var _Tappable = require("../Tappable/Tappable");
-var _icons = require("@vkontakte/icons");
-var _platform = require("../../lib/platform");
-var _usePlatform = require("../../hooks/usePlatform");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
+var _platform = require("../../lib/platform");
+var _Tappable = require("../Tappable/Tappable");
 var _Headline = require("../Typography/Headline/Headline");
 var _Subhead = require("../Typography/Subhead/Subhead");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _excluded = ["badgeBeforeTitle", "badgeAfterTitle", "badgeBeforeSubtitle", "badgeAfterSubtitle", "before", "indicator", "children", "after", "expandable", "multiline", "subhead", "subtitle", "extraSubtitle", "className"];
+var _sizeYClassNames;
+var sizeYClassNames = (_sizeYClassNames = {
+  none: "vkuiSimpleCell--sizeY-none"
+}, (0, _defineProperty2.default)(_sizeYClassNames, _adaptivity.SizeType.COMPACT, "vkuiSimpleCell--sizeY-compact"), (0, _defineProperty2.default)(_sizeYClassNames, _adaptivity.SizeType.REGULAR, "vkuiSimpleCell--sizeY-regular"), _sizeYClassNames);
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
  */
@@ -42,9 +47,10 @@ var SimpleCell = function SimpleCell(_ref) {
   var platform = (0, _usePlatform.usePlatform)();
   var hasAfter = (0, _vkjs.hasReactNode)(after) || expandable && platform === _platform.Platform.IOS;
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiSimpleCell", (0, _getPlatformClassName.getPlatformClassName)("vkuiSimpleCell", platform), (0, _getSizeYClassName.getSizeYClassName)("vkuiSimpleCell", sizeY), expandable && "vkuiSimpleCell--exp", multiline && "vkuiSimpleCell--mult", className)
+    className: (0, _vkjs.classNames)("vkuiSimpleCell", (0, _getPlatformClassName.getPlatformClassName)("vkuiSimpleCell", platform), sizeYClassNames[sizeY], expandable && "vkuiSimpleCell--exp", multiline && "vkuiSimpleCell--mult", className)
   }), before, /*#__PURE__*/React.createElement("div", {
     className: "vkuiSimpleCell__main"
   }, subhead && /*#__PURE__*/React.createElement(_Subhead.Subhead, {

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleCell.js","names":["SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","usePlatform","hasAfter","hasReactNode","Platform","IOS","useAdaptivity","sizeY","classNames","getPlatformClassName","getSizeYClassName"],"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent } from '../../types';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { Icon24Chevron } from '@vkontakte/icons';\nimport { Platform } from '../../lib/platform';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './SimpleCell.module.css';\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === Platform.IOS);\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        getPlatformClassName(styles['SimpleCell'], platform),\n        getSizeYClassName(styles['SimpleCell'], sizeY),\n        expandable && styles['SimpleCell--exp'],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={styles['SimpleCell__main']}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <span\n              className={classNames(\n                styles['SimpleCell__typography'],\n                styles['SimpleCell__text'],\n                styles['SimpleCell__subtitle'],\n              )}\n            >\n              {subtitle}\n            </span>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <span\n            className={classNames(\n              styles['SimpleCell__typography'],\n              styles['SimpleCell__text'],\n              styles['SimpleCell__extraSubtitle'],\n            )}\n          >\n            {extraSubtitle}\n          </span>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={styles['SimpleCell__after']}>\n          {after}\n          {expandable && platform === Platform.IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AA4DpE;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAgBA;EAAA,IAfrBC,gBAAgB,QAAhBA,gBAAgB;IAChBC,eAAe,QAAfA,eAAe;IACfC,mBAAmB,QAAnBA,mBAAmB;IACnBC,kBAAkB,QAAlBA,kBAAkB;IAClBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAMC,QAAQ,GAAG,IAAAC,kBAAY,EAACX,KAAK,CAAC,IAAKC,UAAU,IAAIO,QAAQ,KAAKI,kBAAQ,CAACC,GAAI;EACjF,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,kBAAQ,6BACHR,SAAS;IACb,SAAS,EAAE,IAAAS,gBAAU,oBAEnB,IAAAC,0CAAoB,oBAAuBT,QAAQ,CAAC,EACpD,IAAAU,oCAAiB,oBAAuBH,KAAK,CAAC,EAC9Cd,UAAU,yBAA6B,EACvCC,SAAS,0BAA8B,EACvCI,SAAS;EACT,IAEDT,MAAM,eACP;IAAK,SAAS;EAA6B,GACxCM,OAAO,iBACN,oBAAC,gBAAO;IACN,SAAS,EAAC,MAAM;IAChB,SAAS,EAAE,IAAAa,gBAAU;EAA4D,GAEhFb,OAAO,CAEX,eACD;IAAK,SAAS;EAAgC,GAC3CV,gBAAgB,iBACf;IAAM,SAAS;EAA8B,GAAEA,gBAAgB,CAChE,eACD,oBAAC,kBAAQ;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS,4BAAiC;IAAC,MAAM,EAAC;EAAG,GAC7EM,QAAQ,CACA,EACV,IAAAY,kBAAY,EAACjB,eAAe,CAAC,iBAC5B;IAAM,SAAS;EAA8B,GAAEA,eAAe,CAC/D,CACG,EACLU,QAAQ,iBACP;IAAK,SAAS;EAAgC,GAC3CT,mBAAmB,iBAClB;IAAM,SAAS;EAA8B,GAAEA,mBAAmB,CACnE,eACD;IACE,SAAS,EAAE,IAAAqB,gBAAU;EAInB,GAEDZ,QAAQ,CACJ,EACNR,kBAAkB,iBACjB;IAAM,SAAS;EAA8B,GAAEA,kBAAkB,CAClE,CAEJ,EACAS,aAAa,iBACZ;IACE,SAAS,EAAE,IAAAW,gBAAU;EAInB,GAEDX,aAAa,CAEjB,CACG,EACL,IAAAM,kBAAY,EAACb,SAAS,CAAC,iBACtB,oBAAC,kBAAQ;IAAC,SAAS,EAAC,MAAM;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAkC,GAC9EA,SAAS,CAEb,EACAY,QAAQ,iBACP;IAAK,SAAS;EAA8B,GACzCV,KAAK,EACLC,UAAU,IAAIO,QAAQ,KAAKI,kBAAQ,CAACC,GAAG,iBAAI,oBAAC,oBAAa,OAAG,CAEhE,CACQ;AAEf,CAAC;AAAC"}
+{"version":3,"file":"SimpleCell.js","names":["sizeYClassNames","none","SizeType","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","usePlatform","hasAfter","hasReactNode","Platform","IOS","useAdaptivity","sizeY","classNames","getPlatformClassName"],"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SimpleCell--sizeY-none'],\n  [SizeType.COMPACT]: styles['SimpleCell--sizeY-compact'],\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === Platform.IOS);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        getPlatformClassName(styles['SimpleCell'], platform),\n        sizeYClassNames[sizeY],\n        expandable && styles['SimpleCell--exp'],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={styles['SimpleCell__main']}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <span\n              className={classNames(\n                styles['SimpleCell__typography'],\n                styles['SimpleCell__text'],\n                styles['SimpleCell__subtitle'],\n              )}\n            >\n              {subtitle}\n            </span>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <span\n            className={classNames(\n              styles['SimpleCell__typography'],\n              styles['SimpleCell__text'],\n              styles['SimpleCell__extraSubtitle'],\n            )}\n          >\n            {extraSubtitle}\n          </span>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={styles['SimpleCell__after']}>\n          {after}\n          {expandable && platform === Platform.IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAwD;AAAA;AAGxD,IAAMA,eAAe;EACnBC,IAAI;AAAkC,mDACrCC,oBAAQ,CAACC,OAAO,oFAChBD,oBAAQ,CAACE,OAAO,qDAClB;AA2DD;AACA;AACA;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAgBA;EAAA,IAfrBC,gBAAgB,QAAhBA,gBAAgB;IAChBC,eAAe,QAAfA,eAAe;IACfC,mBAAmB,QAAnBA,mBAAmB;IACnBC,kBAAkB,QAAlBA,kBAAkB;IAClBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAMC,QAAQ,GAAG,IAAAC,kBAAY,EAACX,KAAK,CAAC,IAAKC,UAAU,IAAIO,QAAQ,KAAKI,kBAAQ,CAACC,GAAI;EACjF,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,kBAAQ,6BACHR,SAAS;IACb,SAAS,EAAE,IAAAS,gBAAU,oBAEnB,IAAAC,0CAAoB,oBAAuBT,QAAQ,CAAC,EACpDrB,eAAe,CAAC4B,KAAK,CAAC,EACtBd,UAAU,yBAA6B,EACvCC,SAAS,0BAA8B,EACvCI,SAAS;EACT,IAEDT,MAAM,eACP;IAAK,SAAS;EAA6B,GACxCM,OAAO,iBACN,oBAAC,gBAAO;IACN,SAAS,EAAC,MAAM;IAChB,SAAS,EAAE,IAAAa,gBAAU;EAA4D,GAEhFb,OAAO,CAEX,eACD;IAAK,SAAS;EAAgC,GAC3CV,gBAAgB,iBACf;IAAM,SAAS;EAA8B,GAAEA,gBAAgB,CAChE,eACD,oBAAC,kBAAQ;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS,4BAAiC;IAAC,MAAM,EAAC;EAAG,GAC7EM,QAAQ,CACA,EACV,IAAAY,kBAAY,EAACjB,eAAe,CAAC,iBAC5B;IAAM,SAAS;EAA8B,GAAEA,eAAe,CAC/D,CACG,EACLU,QAAQ,iBACP;IAAK,SAAS;EAAgC,GAC3CT,mBAAmB,iBAClB;IAAM,SAAS;EAA8B,GAAEA,mBAAmB,CACnE,eACD;IACE,SAAS,EAAE,IAAAqB,gBAAU;EAInB,GAEDZ,QAAQ,CACJ,EACNR,kBAAkB,iBACjB;IAAM,SAAS;EAA8B,GAAEA,kBAAkB,CAClE,CAEJ,EACAS,aAAa,iBACZ;IACE,SAAS,EAAE,IAAAW,gBAAU;EAInB,GAEDX,aAAa,CAEjB,CACG,EACL,IAAAM,kBAAY,EAACb,SAAS,CAAC,iBACtB,oBAAC,kBAAQ;IAAC,SAAS,EAAC,MAAM;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAkC,GAC9EA,SAAS,CAEb,EACAY,QAAQ,iBACP;IAAK,SAAS;EAA8B,GACzCV,KAAK,EACLC,UAAU,IAAIO,QAAQ,KAAKI,kBAAQ,CAACC,GAAG,iBAAI,oBAAC,oBAAa,OAAG,CAEhE,CACQ;AAEf,CAAC;AAAC"}

package/dist/cjs/components/Snackbar/Snackbar.js

@@ -10,19 +10,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _Touch = require("../Touch/Touch");
 var _vkjs = require("@vkontakte/vkjs");
+var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+var _usePlatform = require("../../hooks/usePlatform");
+var _useTimeout = require("../../hooks/useTimeout");
+var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
+var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _touch = require("../../lib/touch");
-var _adaptivity = require("../../lib/adaptivity");
+var _AppRootPortal = require("../AppRoot/AppRootPortal");
+var _Button = require("../Button/Button");
+var _Touch = require("../Touch/Touch");
 var _Paragraph = require("../Typography/Paragraph/Paragraph");
 var _Subhead = require("../Typography/Subhead/Subhead");
-var _Button = require("../Button/Button");
-var _AppRootPortal = require("../AppRoot/AppRootPortal");
-var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
-var _usePlatform = require("../../hooks/usePlatform");
-var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
-var _useTimeout = require("../../hooks/useTimeout");
 var _excluded = ["children", "layout", "action", "before", "after", "duration", "onActionClick", "onClose", "mode", "className", "subtitle"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","names":["Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","viewWidth","isDesktop","ViewWidth","SMALL_TABLET","useWaitTransitionFinish","waitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","classNames","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Button } from '../Button/Button';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          styles[`Snackbar--layout-${layout}`],\n          styles[`Snackbar--mode-${mode}`],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Snackbar.js","names":["Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","viewWidth","isDesktop","ViewWidth","SMALL_TABLET","useWaitTransitionFinish","waitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","classNames","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          styles[`Snackbar--layout-${layout}`],\n          styles[`Snackbar--mode-${mode}`],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/Spinner/Spinner.js

@@ -9,8 +9,8 @@ exports.Spinner = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
 var _icons = require("@vkontakte/icons");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["size", "aria-label", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner