@vkontakte/vkui 5.0.3 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["SelectTypography","selectType","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","classNamesString","getPlatformClassName","getSizeYClassName","styles","Select","options","popupDirection","renderOption","props","hasPointer","useAdaptivityHasPointer","undefined","map","label","value"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { NativeSelect } from \"../NativeSelect/NativeSelect\";\nimport { CustomSelect, SelectProps } from \"../CustomSelect/CustomSelect\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useAdaptivityHasPointer } from \"../../hooks/useAdaptivityHasPointer\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Select.module.css\";\n\nexport type SelectType = \"default\" | \"plain\" | \"accent\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectTypography\n */\nexport const SelectTypography = ({\n  selectType = \"default\",\n  children,\n  className,\n  ...restProps\n}: React.PropsWithChildren<Pick<SelectProps, \"selectType\" | \"className\">>) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <span\n      className={classNamesString(\n        styles[\"SelectTypography\"],\n        getPlatformClassName(styles[\"SelectTypography\"], platform),\n        getSizeYClassName(styles[\"SelectTypography\"], sizeY),\n        styles[`SelectTypography--selectType-${selectType}`],\n        className\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\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={classNamesString(styles[\"Select__custom\"], className)}\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect\n          className={classNamesString(styles[\"Select__native\"], className)}\n          {...props}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;EAAA;AAKpE;AACA;AACA;AACO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKiD;EAAA,2BAJ5EC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAE,IAAAC,4BAAgB,0BAEzB,IAAAC,0CAAoB,0BAA6BL,QAAQ,CAAC,EAC1D,IAAAM,oCAAiB,0BAA6BH,KAAK,CAAC,EACpDI,MAAM,wCAAiCX,UAAU,EAAG,EACpDE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC;;AAED;AACA;AACA;AAFA;AAGO,IAAMW,MAAM,GAAG,SAATA,MAAM,QAOA;EAAA,IANjBX,QAAQ,SAARA,QAAQ;IAAA,sBACRY,OAAO;IAAPA,OAAO,8BAAG,EAAE;IACZC,cAAc,SAAdA,cAAc;IACdC,YAAY,SAAZA,YAAY;IACZb,SAAS,SAATA,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,IAAAT,4BAAgB,wBAA2BN,SAAS,CAAE;IACjE,OAAO,EAAEW,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,YAAY,EAAEC;EAAa,GACvBC,KAAK,EAEZ,EACA,CAACC,UAAU,KAAKE,SAAS,IAAI,CAACF,UAAU,kBACvC,oBAAC,0BAAY;IACX,SAAS,EAAE,IAAAT,4BAAgB,wBAA2BN,SAAS;EAAE,GAC7Dc,KAAK,GAERH,OAAO,CAACO,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;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Select.js","names":["SelectTypography","selectType","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","classNames","getPlatformClassName","getSizeYClassName","styles","Select","options","popupDirection","renderOption","props","hasPointer","useAdaptivityHasPointer","undefined","map","label","value"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Select.module.css';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectTypography\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: React.PropsWithChildren<Pick<SelectProps, 'selectType' | 'className'>>) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        getPlatformClassName(styles['SelectTypography'], platform),\n        getSizeYClassName(styles['SelectTypography'], sizeY),\n        styles[`SelectTypography--selectType-${selectType}`],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\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;AACA;AACA;AACA;AACA;AAAoE;EAAA;AAKpE;AACA;AACA;AACO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKiD;EAAA,2BAJ5EC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,0BAEnB,IAAAC,0CAAoB,0BAA6BL,QAAQ,CAAC,EAC1D,IAAAM,oCAAiB,0BAA6BH,KAAK,CAAC,EACpDI,MAAM,wCAAiCX,UAAU,EAAG,EACpDE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC;;AAED;AACA;AACA;AAFA;AAGO,IAAMW,MAAM,GAAG,SAATA,MAAM,QAOA;EAAA,IANjBX,QAAQ,SAARA,QAAQ;IAAA,sBACRY,OAAO;IAAPA,OAAO,8BAAG,EAAE;IACZC,cAAc,SAAdA,cAAc;IACdC,YAAY,SAAZA,YAAY;IACZb,SAAS,SAATA,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,IAAAT,gBAAU,wBAA2BN,SAAS,CAAE;IAC3D,OAAO,EAAEW,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,YAAY,EAAEC;EAAa,GACvBC,KAAK,EAEZ,EACA,CAACC,UAAU,KAAKE,SAAS,IAAI,CAACF,UAAU,kBACvC,oBAAC,0BAAY;IAAC,SAAS,EAAE,IAAAT,gBAAU,wBAA2BN,SAAS;EAAE,GAAKc,KAAK,GAChFH,OAAO,CAACO,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;AAAA;EAAA;EAAA;EAAA;AAAA"}

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

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

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

@@ -9,7 +9,7 @@ exports.SelectMimicry = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
 var _FormField = require("../FormField/FormField");
 var _usePlatform = require("../../hooks/usePlatform");
@@ -37,7 +37,7 @@ var SelectMimicry = function SelectMimicry(_ref) {
     _ref$after = _ref.after,
     after = _ref$after === void 0 ? /*#__PURE__*/React.createElement(_DropdownIcon.DropdownIcon, null) : _ref$after,
     _ref$selectType = _ref.selectType,
-    selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
+    selectType = _ref$selectType === void 0 ? 'default' : _ref$selectType,
     status = _ref.status,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -48,7 +48,7 @@ var SelectMimicry = function SelectMimicry(_ref) {
   var title = children || placeholder;
   return /*#__PURE__*/React.createElement(_FormField.FormField, (0, _extends2.default)({}, restProps, {
     tabIndex: disabled ? undefined : tabIndex,
-    className: (0, _classNames.classNamesString)("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), (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),
     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","classNamesString","getPlatformClassName","getSizeXClassName","getSizeYClassName","styles","getFormFieldModeFromSelectType"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\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 { SelectType, SelectTypography } from \"../Select/Select\";\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={classNamesString(\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\n          selectType={selectType}\n          className={styles[\"Select__title\"]}\n        >\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;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,4BAAgB,gBAEzB,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,wBAAgB;IACf,UAAU,EAAED,UAAW;IACvB,SAAS;EAA0B,GAElCS,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"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 { SelectType, SelectTypography } from '../Select/Select';\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;AACA;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,wBAAgB;IAAC,UAAU,EAAED,UAAW;IAAC,SAAS;EAA0B,GAC1ES,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * С этим свойством компонент не будет иметь отступы слева и справа

package/dist/cjs/components/Separator/Separator.js

@@ -9,7 +9,7 @@ exports.Separator = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["wide", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
@@ -19,8 +19,8 @@ var Separator = function Separator(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    "aria-hidden": "true",
-    className: (0, _classNames.classNamesString)("vkuiSeparator", !wide && "vkuiSeparator--padded", className),
+    "aria-hidden": true,
+    className: (0, _vkjs.classNames)("vkuiSeparator", !wide && "vkuiSeparator--padded", className),
     role: "separator"
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiSeparator__in"

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":["Separator","wide","className","restProps","classNamesString"],"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./Separator.module.css\";\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n  wide,\n  className,\n  ...restProps\n}: SeparatorProps) => (\n  <div\n    {...restProps}\n    aria-hidden=\"true\"\n    className={classNamesString(\n      styles[\"Separator\"],\n      !wide && styles[\"Separator--padded\"],\n      className\n    )}\n    role=\"separator\"\n  >\n    <div className={styles[\"Separator__in\"]} />\n  </div>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAAwD;AAUxD;AACA;AACA;AACO,IAAMA,SAAS,GAAG,SAAZA,SAAS;EAAA,IACpBC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ,sDACMA,SAAS;IACb,eAAY,MAAM;IAClB,SAAS,EAAE,IAAAC,4BAAgB,mBAEzB,CAACH,IAAI,2BAA+B,EACpCC,SAAS,CACT;IACF,IAAI,EAAC;EAAW,iBAEhB;IAAK,SAAS;EAA0B,EAAG,CACvC;AAAA,CACP;AAAC"}
+{"version":3,"file":"Separator.js","names":["Separator","wide","className","restProps","classNames"],"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    aria-hidden\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n    role=\"separator\"\n  >\n    <div className={styles['Separator__in']} />\n  </div>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAU7C;AACA;AACA;AACO,IAAMA,SAAS,GAAG,SAAZA,SAAS;EAAA,IAAMC,IAAI,QAAJA,IAAI;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBACvD,sDACMA,SAAS;IACb,mBAAW;IACX,SAAS,EAAE,IAAAC,gBAAU,mBAAsB,CAACH,IAAI,2BAA+B,EAAEC,SAAS,CAAE;IAC5F,IAAI,EAAC;EAAW,iBAEhB;IAAK,SAAS;EAA0B,EAAG,CACvC;AAAA,CACP;AAAC"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { HasComponent } from "../../types";
-import { TappableProps } from "../Tappable/Tappable";
+import * as React from 'react';
+import { HasComponent } from '../../types';
+import { TappableProps } from '../Tappable/Tappable';
 export interface SimpleCellOwnProps extends HasComponent {
     /**
      * Иконка 28 или `<Avatar size={28|32|40|48|72} />`

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

@@ -9,13 +9,12 @@ exports.SimpleCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+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 _utils = require("../../lib/utils");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _Headline = require("../Typography/Headline/Headline");
 var _Subhead = require("../Typography/Subhead/Subhead");
@@ -41,16 +40,16 @@ var SimpleCell = function SimpleCell(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
-  var hasAfter = (0, _utils.hasReactNode)(after) || expandable && platform === _platform.Platform.IOS;
+  var hasAfter = (0, _vkjs.hasReactNode)(after) || expandable && platform === _platform.Platform.IOS;
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
     sizeY = _useAdaptivity.sizeY;
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("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), (0, _getSizeYClassName.getSizeYClassName)("vkuiSimpleCell", sizeY), expandable && "vkuiSimpleCell--exp", multiline && "vkuiSimpleCell--mult", className)
   }), before, /*#__PURE__*/React.createElement("div", {
     className: "vkuiSimpleCell__main"
   }, subhead && /*#__PURE__*/React.createElement(_Subhead.Subhead, {
     Component: "span",
-    className: (0, _classNames.classNamesString)("vkuiSimpleCell__text", "vkuiSimpleCell__subhead")
+    className: (0, _vkjs.classNames)("vkuiSimpleCell__text", "vkuiSimpleCell__subhead")
   }, subhead), /*#__PURE__*/React.createElement("div", {
     className: "vkuiSimpleCell__content"
   }, badgeBeforeTitle && /*#__PURE__*/React.createElement("span", {
@@ -59,19 +58,19 @@ var SimpleCell = function SimpleCell(_ref) {
     Component: "span",
     className: "vkuiSimpleCell__children",
     weight: "3"
-  }, children), (0, _utils.hasReactNode)(badgeAfterTitle) && /*#__PURE__*/React.createElement("span", {
+  }, children), (0, _vkjs.hasReactNode)(badgeAfterTitle) && /*#__PURE__*/React.createElement("span", {
     className: "vkuiSimpleCell__badge"
   }, badgeAfterTitle)), subtitle && /*#__PURE__*/React.createElement("div", {
     className: "vkuiSimpleCell__content"
   }, badgeBeforeSubtitle && /*#__PURE__*/React.createElement("span", {
     className: "vkuiSimpleCell__badge"
   }, badgeBeforeSubtitle), /*#__PURE__*/React.createElement("span", {
-    className: (0, _classNames.classNamesString)("vkuiSimpleCell__typography", "vkuiSimpleCell__text", "vkuiSimpleCell__subtitle")
+    className: (0, _vkjs.classNames)("vkuiSimpleCell__typography", "vkuiSimpleCell__text", "vkuiSimpleCell__subtitle")
   }, subtitle), badgeAfterSubtitle && /*#__PURE__*/React.createElement("span", {
     className: "vkuiSimpleCell__badge"
   }, badgeAfterSubtitle)), extraSubtitle && /*#__PURE__*/React.createElement("span", {
-    className: (0, _classNames.classNamesString)("vkuiSimpleCell__typography", "vkuiSimpleCell__text", "vkuiSimpleCell__extraSubtitle")
-  }, extraSubtitle)), (0, _utils.hasReactNode)(indicator) && /*#__PURE__*/React.createElement(_Headline.Headline, {
+    className: (0, _vkjs.classNames)("vkuiSimpleCell__typography", "vkuiSimpleCell__text", "vkuiSimpleCell__extraSubtitle")
+  }, extraSubtitle)), (0, _vkjs.hasReactNode)(indicator) && /*#__PURE__*/React.createElement(_Headline.Headline, {
     Component: "span",
     weight: "3",
     className: "vkuiSimpleCell__indicator"

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","classNamesString","getPlatformClassName","getSizeYClassName"],"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { classNamesString } from \"../../lib/classNames\";\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 { hasReactNode } from \"../../lib/utils\";\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 =\n    hasReactNode(after) || (expandable && platform === Platform.IOS);\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNamesString(\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={classNamesString(\n              styles[\"SimpleCell__text\"],\n              styles[\"SimpleCell__subhead\"]\n            )}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles[\"SimpleCell__content\"]}>\n          {badgeBeforeTitle && (\n            <span className={styles[\"SimpleCell__badge\"]}>\n              {badgeBeforeTitle}\n            </span>\n          )}\n          <Headline\n            Component=\"span\"\n            className={styles[\"SimpleCell__children\"]}\n            weight=\"3\"\n          >\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles[\"SimpleCell__badge\"]}>\n              {badgeAfterTitle}\n            </span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles[\"SimpleCell__content\"]}>\n            {badgeBeforeSubtitle && (\n              <span className={styles[\"SimpleCell__badge\"]}>\n                {badgeBeforeSubtitle}\n              </span>\n            )}\n            <span\n              className={classNamesString(\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\"]}>\n                {badgeAfterSubtitle}\n              </span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <span\n            className={classNamesString(\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\n          Component=\"span\"\n          weight=\"3\"\n          className={styles[\"SimpleCell__indicator\"]}\n        >\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;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,GACZ,IAAAC,mBAAY,EAACX,KAAK,CAAC,IAAKC,UAAU,IAAIO,QAAQ,KAAKI,kBAAQ,CAACC,GAAI;EAClE,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,kBAAQ,6BACHR,SAAS;IACb,SAAS,EAAE,IAAAS,4BAAgB,oBAEzB,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,4BAAgB;EAGzB,GAEDb,OAAO,CAEX,eACD;IAAK,SAAS;EAAgC,GAC3CV,gBAAgB,iBACf;IAAM,SAAS;EAA8B,GAC1CA,gBAAgB,CAEpB,eACD,oBAAC,kBAAQ;IACP,SAAS,EAAC,MAAM;IAChB,SAAS,4BAAiC;IAC1C,MAAM,EAAC;EAAG,GAETM,QAAQ,CACA,EACV,IAAAY,mBAAY,EAACjB,eAAe,CAAC,iBAC5B;IAAM,SAAS;EAA8B,GAC1CA,eAAe,CAEnB,CACG,EACLU,QAAQ,iBACP;IAAK,SAAS;EAAgC,GAC3CT,mBAAmB,iBAClB;IAAM,SAAS;EAA8B,GAC1CA,mBAAmB,CAEvB,eACD;IACE,SAAS,EAAE,IAAAqB,4BAAgB;EAIzB,GAEDZ,QAAQ,CACJ,EACNR,kBAAkB,iBACjB;IAAM,SAAS;EAA8B,GAC1CA,kBAAkB,CAEtB,CAEJ,EACAS,aAAa,iBACZ;IACE,SAAS,EAAE,IAAAW,4BAAgB;EAIzB,GAEDX,aAAa,CAEjB,CACG,EACL,IAAAM,mBAAY,EAACb,SAAS,CAAC,iBACtB,oBAAC,kBAAQ;IACP,SAAS,EAAC,MAAM;IAChB,MAAM,EAAC,GAAG;IACV,SAAS;EAAkC,GAE1CA,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":["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"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { UniversalSliderProps } from "../RangeSlider/UniversalSlider";
+import { UniversalSliderProps } from '../RangeSlider/UniversalSlider';
 export declare type SliderProps = UniversalSliderProps<number>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */
-export declare const Slider: ({ onChange, defaultValue, min, max, value, ...props }: SliderProps) => JSX.Element;
+export declare const Slider: ({ onChange, min, max, defaultValue, ...props }: SliderProps) => JSX.Element;

package/dist/cjs/components/Slider/Slider.js

@@ -12,26 +12,25 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var React = _interopRequireWildcard(require("react"));
 var _math = require("../../helpers/math");
 var _UniversalSlider = require("../RangeSlider/UniversalSlider");
-var _excluded = ["onChange", "defaultValue", "min", "max", "value"];
+var _excluded = ["onChange", "min", "max", "defaultValue"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */
 var Slider = function Slider(_ref) {
   var onChange = _ref.onChange,
-    defaultValue = _ref.defaultValue,
     _ref$min = _ref.min,
     min = _ref$min === void 0 ? 0 : _ref$min,
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 100 : _ref$max,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? min : _ref$defaultValue,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var isControlled = value != null;
-  var _React$useState = React.useState(defaultValue == null ? min : defaultValue),
+  var isControlled = props.value !== undefined;
+  var _React$useState = React.useState(defaultValue),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     localValue = _React$useState2[0],
     setValue = _React$useState2[1];
-  var _value = (0, _math.clamp)(isControlled ? value : localValue, min, max);
+  var _value = (0, _math.clamp)(props.value || localValue, min, max);
   var handleChange = React.useCallback(function (nextValue, event) {
     if (props.disabled || _value === nextValue[1]) {
       return;

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["Slider","onChange","defaultValue","min","max","value","props","isControlled","React","useState","localValue","setValue","_value","clamp","handleChange","useCallback","nextValue","event","disabled","rangeValue","useMemo"],"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clamp } from \"../../helpers/math\";\nimport {\n  UniversalSlider,\n  UniversalSliderProps,\n  UniversalValue,\n} from \"../RangeSlider/UniversalSlider\";\nimport { TouchEvent } from \"../Touch/Touch\";\n\nexport type SliderProps = UniversalSliderProps<number>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  onChange,\n  defaultValue,\n  min = 0,\n  max = 100,\n  value = 0,\n  ...props\n}: SliderProps) => {\n  const isControlled = value != null;\n\n  const [localValue, setValue] = React.useState(\n    defaultValue == null ? min : defaultValue\n  );\n  const _value = clamp(isControlled ? value : localValue, min, max);\n\n  const handleChange: UniversalSliderProps<UniversalValue>[\"onChange\"] =\n    React.useCallback(\n      (nextValue: UniversalValue, event: TouchEvent) => {\n        if (props.disabled || _value === nextValue[1]) {\n          return;\n        }\n        !isControlled && setValue(nextValue[1]);\n        onChange && onChange(nextValue[1], event);\n      },\n      [props.disabled, _value, isControlled, onChange]\n    );\n\n  const rangeValue: [null, number] = React.useMemo(\n    () => [null, _value],\n    [_value]\n  );\n  return (\n    <UniversalSlider\n      {...props}\n      value={rangeValue}\n      onChange={handleChange}\n      min={min}\n      max={max}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAIwC;AAKxC;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAOA;EAAA,IANjBC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IAAA,gBACZC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,kBACTC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACNC,KAAK;EAER,IAAMC,YAAY,GAAGF,KAAK,IAAI,IAAI;EAElC,sBAA+BG,KAAK,CAACC,QAAQ,CAC3CP,YAAY,IAAI,IAAI,GAAGC,GAAG,GAAGD,YAAY,CAC1C;IAAA;IAFMQ,UAAU;IAAEC,QAAQ;EAG3B,IAAMC,MAAM,GAAG,IAAAC,WAAK,EAACN,YAAY,GAAGF,KAAK,GAAGK,UAAU,EAAEP,GAAG,EAAEC,GAAG,CAAC;EAEjE,IAAMU,YAA8D,GAClEN,KAAK,CAACO,WAAW,CACf,UAACC,SAAyB,EAAEC,KAAiB,EAAK;IAChD,IAAIX,KAAK,CAACY,QAAQ,IAAIN,MAAM,KAAKI,SAAS,CAAC,CAAC,CAAC,EAAE;MAC7C;IACF;IACA,CAACT,YAAY,IAAII,QAAQ,CAACK,SAAS,CAAC,CAAC,CAAC,CAAC;IACvCf,QAAQ,IAAIA,QAAQ,CAACe,SAAS,CAAC,CAAC,CAAC,EAAEC,KAAK,CAAC;EAC3C,CAAC,EACD,CAACX,KAAK,CAACY,QAAQ,EAAEN,MAAM,EAAEL,YAAY,EAAEN,QAAQ,CAAC,CACjD;EAEH,IAAMkB,UAA0B,GAAGX,KAAK,CAACY,OAAO,CAC9C;IAAA,OAAM,CAAC,IAAI,EAAER,MAAM,CAAC;EAAA,GACpB,CAACA,MAAM,CAAC,CACT;EACD,oBACE,oBAAC,gCAAe,6BACVN,KAAK;IACT,KAAK,EAAEa,UAAW;IAClB,QAAQ,EAAEL,YAAa;IACvB,GAAG,EAAEX,GAAI;IACT,GAAG,EAAEC;EAAI,GACT;AAEN,CAAC;AAAC"}
+{"version":3,"file":"Slider.js","names":["Slider","onChange","min","max","defaultValue","props","isControlled","value","undefined","React","useState","localValue","setValue","_value","clamp","handleChange","useCallback","nextValue","event","disabled","rangeValue","useMemo"],"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport {\n  UniversalSlider,\n  UniversalSliderProps,\n  UniversalValue,\n} from '../RangeSlider/UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type SliderProps = UniversalSliderProps<number>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = min,\n  ...props\n}: SliderProps) => {\n  const isControlled = props.value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const _value = clamp(props.value || localValue, min, max);\n\n  const handleChange: UniversalSliderProps<UniversalValue>['onChange'] = React.useCallback(\n    (nextValue: UniversalValue, event: TouchEvent) => {\n      if (props.disabled || _value === nextValue[1]) {\n        return;\n      }\n      !isControlled && setValue(nextValue[1]);\n      onChange && onChange(nextValue[1], event);\n    },\n    [props.disabled, _value, isControlled, onChange],\n  );\n\n  const rangeValue: [null, number] = React.useMemo(() => [null, _value], [_value]);\n  return (\n    <UniversalSlider {...props} value={rangeValue} onChange={handleChange} min={min} max={max} />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAIwC;AAKxC;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAMA;EAAA,IALjBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAGF,GAAG;IACfG,KAAK;EAER,IAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,KAAKC,SAAS;EAE9C,sBAA+BC,KAAK,CAACC,QAAQ,CAACN,YAAY,CAAC;IAAA;IAApDO,UAAU;IAAEC,QAAQ;EAC3B,IAAMC,MAAM,GAAG,IAAAC,WAAK,EAACT,KAAK,CAACE,KAAK,IAAII,UAAU,EAAET,GAAG,EAAEC,GAAG,CAAC;EAEzD,IAAMY,YAA8D,GAAGN,KAAK,CAACO,WAAW,CACtF,UAACC,SAAyB,EAAEC,KAAiB,EAAK;IAChD,IAAIb,KAAK,CAACc,QAAQ,IAAIN,MAAM,KAAKI,SAAS,CAAC,CAAC,CAAC,EAAE;MAC7C;IACF;IACA,CAACX,YAAY,IAAIM,QAAQ,CAACK,SAAS,CAAC,CAAC,CAAC,CAAC;IACvChB,QAAQ,IAAIA,QAAQ,CAACgB,SAAS,CAAC,CAAC,CAAC,EAAEC,KAAK,CAAC;EAC3C,CAAC,EACD,CAACb,KAAK,CAACc,QAAQ,EAAEN,MAAM,EAAEP,YAAY,EAAEL,QAAQ,CAAC,CACjD;EAED,IAAMmB,UAA0B,GAAGX,KAAK,CAACY,OAAO,CAAC;IAAA,OAAM,CAAC,IAAI,EAAER,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAChF,oBACE,oBAAC,gCAAe,6BAAKR,KAAK;IAAE,KAAK,EAAEe,UAAW;IAAC,QAAQ,EAAEL,YAAa;IAAC,GAAG,EAAEb,GAAI;IAAC,GAAG,EAAEC;EAAI,GAAG;AAEjG,CAAC;AAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Название кнопки действия в уведомлении
@@ -21,7 +21,7 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
      * Варианты расположения кнопки действия
      * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`
      */
-    layout?: "vertical" | "horizontal";
+    layout?: 'vertical' | 'horizontal';
     /**
      * Время в миллисекундах, через которое плашка скроется
      */
@@ -33,7 +33,7 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Задает стиль снекбара
      */
-    mode?: "default" | "dark";
+    mode?: 'default' | 'dark';
     /**
      * Дополнительная строка текста под `children`.
      * Не может использоваться одновременно с `action`

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

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _Touch = require("../Touch/Touch");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../lib/platform");
 var _touch = require("../../lib/touch");
 var _adaptivity = require("../../lib/adaptivity");
@@ -30,7 +30,7 @@ var _excluded = ["children", "layout", "action", "before", "after", "duration",
 var Snackbar = function Snackbar(_ref) {
   var children = _ref.children,
     _ref$layout = _ref.layout,
-    layoutProps = _ref$layout === void 0 ? "horizontal" : _ref$layout,
+    layoutProps = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
     action = _ref.action,
     before = _ref.before,
     after = _ref.after,
@@ -39,7 +39,7 @@ var Snackbar = function Snackbar(_ref) {
     onActionClick = _ref.onActionClick,
     onClose = _ref.onClose,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "default" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
     className = _ref.className,
     subtitle = _ref.subtitle,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -71,7 +71,7 @@ var Snackbar = function Snackbar(_ref) {
   };
   var handleActionClick = function handleActionClick(e) {
     close();
-    if (action && typeof onActionClick === "function") {
+    if (action && typeof onActionClick === 'function') {
       onActionClick(e);
     }
   };
@@ -132,9 +132,9 @@ var Snackbar = function Snackbar(_ref) {
   React.useEffect(function () {
     return closeTimeout.set();
   }, [closeTimeout]);
-  var layout = after || isDesktop || subtitle ? "vertical" : layoutProps;
+  var layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;
   return /*#__PURE__*/React.createElement(_AppRootPortal.AppRootPortal, null, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiSnackbar", platform === _platform.Platform.IOS && "vkuiSnackbar--ios", styles["Snackbar--layout-".concat(layout)], styles["Snackbar--mode-".concat(mode)], closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className)
+    className: (0, _vkjs.classNames)("vkuiSnackbar", platform === _platform.Platform.IOS && "vkuiSnackbar--ios", styles["Snackbar--layout-".concat(layout)], styles["Snackbar--mode-".concat(mode)], closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className)
   }), /*#__PURE__*/React.createElement(_Touch.Touch, {
     className: "vkuiSnackbar__in",
     getRootRef: innerElRef,
@@ -155,7 +155,7 @@ var Snackbar = function Snackbar(_ref) {
   }, subtitle), action && !subtitle && /*#__PURE__*/React.createElement(_Button.Button, {
     align: "left",
     mode: "link",
-    appearance: mode === "dark" ? "overlay" : "accent",
+    appearance: mode === 'dark' ? 'overlay' : 'accent',
     size: "s",
     className: "vkuiSnackbar__action",
     onClick: handleActionClick

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","classNamesString","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { classNamesString } from \"../../lib/classNames\";\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<\n    typeof requestAnimationFrame\n  > | null>(null);\n\n  const transitionFinishDurationFallback =\n    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 =\n      (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(\n      shiftXPercentRef.current,\n      72,\n      1.2,\n      platform !== Platform.IOS\n    );\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={classNamesString(\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 && (\n              <div className={styles[\"Snackbar__before\"]}>{before}</div>\n            )}\n\n            <div className={styles[\"Snackbar__content\"]}>\n              <Paragraph className={styles[\"Snackbar__content-text\"]}>\n                {children}\n              </Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles[\"Snackbar__content-subtitle\"]}>\n                  {subtitle}\n                </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":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoD;AA+CpD;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,QAAQ,QAARA,QAAQ;IAAA,mBACRC,MAAM;IAAEC,WAAW,4BAAG,YAAY;IAClCC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IACfC,aAAa,QAAbA,aAAa;IACbC,OAAO,QAAPA,OAAO;IAAA,iBACPC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EACjB,IAAMC,SAAS,GAAGD,SAAS,IAAIE,qBAAS,CAACC,YAAY;EACrD,4BAAiC,IAAAC,gDAAuB,GAAE;IAAlDC,oBAAoB,yBAApBA,oBAAoB;EAE5B,sBAA8BC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA5CC,OAAO;IAAEC,UAAU;EAC1B,uBAA8BH,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA5CG,OAAO;IAAEC,UAAU;EAE1B,IAAMC,gBAAgB,GAAGN,KAAK,CAACO,MAAM,CAAS,CAAC,CAAC;EAChD,IAAMC,gBAAgB,GAAGR,KAAK,CAACO,MAAM,CAAS,CAAC,CAAC;EAEhD,IAAME,SAAS,GAAGT,KAAK,CAACO,MAAM,CAAwB,IAAI,CAAC;EAC3D,IAAMG,UAAU,GAAGV,KAAK,CAACO,MAAM,CAAwB,IAAI,CAAC;EAE5D,IAAMI,iBAAiB,GAAGX,KAAK,CAACO,MAAM,CAE5B,IAAI,CAAC;EAEf,IAAMK,gCAAgC,GACpCrB,QAAQ,KAAKsB,kBAAQ,CAACC,GAAG,GAAG,GAAG,GAAG,GAAG;EAEvC,IAAMC,KAAK,GAAG,SAARA,KAAK,GAAS;IAClBZ,UAAU,CAAC,IAAI,CAAC;IAChBJ,oBAAoB,CAClBW,UAAU,CAACM,OAAO,EAClB,YAAM;MACJ9B,OAAO,EAAE;IACX,CAAC,EACD0B,gCAAgC,CACjC;EACH,CAAC;EAED,IAAMK,iBAAuD,GAAG,SAA1DA,iBAAuD,CAAIC,CAAC,EAAK;IACrEH,KAAK,EAAE;IAEP,IAAIlC,MAAM,IAAI,OAAOI,aAAa,KAAK,UAAU,EAAE;MACjDA,aAAa,CAACiC,CAAC,CAAC;IAClB;EACF,CAAC;EAED,IAAMC,YAAY,GAAG,IAAAC,sBAAU,EAACL,KAAK,EAAE/B,QAAQ,CAAC;EAEhD,IAAMqC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,OAAe,EAAK;IAC5C,IAAIX,iBAAiB,CAACK,OAAO,KAAK,IAAI,EAAE;MACtCO,oBAAoB,CAACZ,iBAAiB,CAACK,OAAO,CAAC;IACjD;IACAL,iBAAiB,CAACK,OAAO,GAAGQ,qBAAqB,CAAC,YAAM;MACtD,IAAIf,SAAS,CAACO,OAAO,EAAE;QACrBP,SAAS,CAACO,OAAO,CAACS,KAAK,CAACC,SAAS,yBAAkBJ,OAAO,aAAU;MACtE;IACF,CAAC,CAAC;EACJ,CAAC;EAED,IAAMK,YAAY,GAAGR,YAAY,CAACS,KAAK;EAEvC,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAiB,EAAK;IAAA;IAC1C,IAAQC,MAAM,GAAoBD,KAAK,CAA/BC,MAAM;MAAEC,aAAa,GAAKF,KAAK,CAAvBE,aAAa;IAC7BA,aAAa,CAACC,cAAc,EAAE;IAE9B,IAAI,CAAC7B,OAAO,EAAE;MACZC,UAAU,CAAC,IAAI,CAAC;IAClB;IAEAC,gBAAgB,CAACU,OAAO,GACrBe,MAAM,mDAAItB,SAAS,CAACO,OAAO,uDAAjB,mBAAmBkB,WAAW,yEAAI,CAAC,CAAC,GAAI,GAAG;IACxD1B,gBAAgB,CAACQ,OAAO,GAAG,IAAAmB,aAAM,EAC/B7B,gBAAgB,CAACU,OAAO,EACxB,EAAE,EACF,GAAG,EACHzB,QAAQ,KAAKsB,kBAAQ,CAACC,GAAG,CAC1B;IAEDO,gBAAgB,CAACb,gBAAgB,CAACQ,OAAO,CAAC;EAC5C,CAAC;EAED,IAAMoB,UAAU,GAAG,SAAbA,UAAU,CAAIlB,CAAa,EAAK;IACpC,IAAImB,QAAkC;IAEtC,IAAIjC,OAAO,EAAE;MACX,IAAIkC,aAAa,GAAG9B,gBAAgB,CAACQ,OAAO;MAC5C,IAAMuB,gBAAgB,GAAID,aAAa,GAAGpB,CAAC,CAAClC,QAAQ,GAAI,GAAG,GAAG,GAAG;MACjEsD,aAAa,GAAGA,aAAa,GAAGC,gBAAgB;MAEhD,IAAI5C,SAAS,IAAI2C,aAAa,IAAI,CAAC,EAAE,EAAE;QACrCnB,YAAY,CAACS,KAAK,EAAE;QACpB7B,oBAAoB,CAClBU,SAAS,CAACO,OAAO,EACjB,YAAM;UACJ9B,OAAO,EAAE;QACX,CAAC,EACD0B,gCAAgC,CACjC;QACDS,gBAAgB,CAAC,CAAC,GAAG,CAAC;MACxB,CAAC,MAAM,IAAI,CAAC1B,SAAS,IAAI2C,aAAa,IAAI,EAAE,EAAE;QAC5CnB,YAAY,CAACS,KAAK,EAAE;QACpB7B,oBAAoB,CAClBU,SAAS,CAACO,OAAO,EACjB,YAAM;UACJ9B,OAAO,EAAE;QACX,CAAC,EACD0B,gCAAgC,CACjC;QACDS,gBAAgB,CAAC,GAAG,CAAC;MACvB,CAAC,MAAM;QACLgB,QAAQ,GAAG,oBAAM;UACflB,YAAY,CAACqB,GAAG,EAAE;UAClBnB,gBAAgB,CAAC,CAAC,CAAC;QACrB,CAAC;MACH;IACF,CAAC,MAAM;MACLF,YAAY,CAACqB,GAAG,EAAE;IACpB;IAEAnC,UAAU,CAAC,KAAK,CAAC;IACjBgC,QAAQ,IAAIb,qBAAqB,CAACa,QAAQ,CAAC;EAC7C,CAAC;EAEDrC,KAAK,CAACyC,SAAS,CAAC;IAAA,OAAMtB,YAAY,CAACqB,GAAG,EAAE;EAAA,GAAE,CAACrB,YAAY,CAAC,CAAC;EAEzD,IAAMxC,MAAM,GAAGI,KAAK,IAAIY,SAAS,IAAIN,QAAQ,GAAG,UAAU,GAAGT,WAAW;EAExE,oBACE,oBAAC,4BAAa,qBACZ,sDACMU,SAAS;IACb,SAAS,EAAE,IAAAoD,4BAAgB,kBAEzBnD,QAAQ,KAAKsB,kBAAQ,CAACC,GAAG,uBAA2B,EACpD6B,MAAM,4BAAqBhE,MAAM,EAAG,EACpCgE,MAAM,0BAAmBxD,IAAI,EAAG,EAChCe,OAAO,2BAA+B,EACtCE,OAAO,2BAA+B,EACtCT,SAAS,2BAA+B,EACxCP,SAAS;EACT,iBAEF,oBAAC,YAAK;IACJ,SAAS,oBAAyB;IAClC,UAAU,EAAEsB,UAAW;IACvB,OAAO,EAAEiB,YAAa;IACtB,OAAO,EAAEE,YAAa;IACtB,KAAK,EAAEO;EAAW,gBAElB;IAAK,SAAS,sBAA2B;IAAC,GAAG,EAAE3B;EAAU,GACtD3B,MAAM,iBACL;IAAK,SAAS;EAA6B,GAAEA,MAAM,CACpD,eAED;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,oBAAS;IAAC,SAAS;EAAmC,GACpDJ,QAAQ,CACC,EACXW,QAAQ,IAAI,CAACR,MAAM,iBAClB,oBAAC,gBAAO;IAAC,SAAS;EAAuC,GACtDQ,QAAQ,CAEZ,EAEAR,MAAM,IAAI,CAACQ,QAAQ,iBAClB,oBAAC,cAAM;IACL,KAAK,EAAC,MAAM;IACZ,IAAI,EAAC,MAAM;IACX,UAAU,EAAEF,IAAI,KAAK,MAAM,GAAG,SAAS,GAAG,QAAS;IACnD,IAAI,EAAC,GAAG;IACR,SAAS,wBAA6B;IACtC,OAAO,EAAE8B;EAAkB,GAE1BpC,MAAM,CAEV,CACG,EAELE,KAAK,iBAAI;IAAK,SAAS;EAA4B,GAAEA,KAAK,CAAO,CAC9D,CACA,CACJ,CACQ;AAEpB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"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":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoD;AA+CpD;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,QAAQ,QAARA,QAAQ;IAAA,mBACRC,MAAM;IAAEC,WAAW,4BAAG,YAAY;IAClCC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IACfC,aAAa,QAAbA,aAAa;IACbC,OAAO,QAAPA,OAAO;IAAA,iBACPC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EACjB,IAAMC,SAAS,GAAGD,SAAS,IAAIE,qBAAS,CAACC,YAAY;EACrD,4BAAiC,IAAAC,gDAAuB,GAAE;IAAlDC,oBAAoB,yBAApBA,oBAAoB;EAE5B,sBAA8BC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA5CC,OAAO;IAAEC,UAAU;EAC1B,uBAA8BH,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA5CG,OAAO;IAAEC,UAAU;EAE1B,IAAMC,gBAAgB,GAAGN,KAAK,CAACO,MAAM,CAAS,CAAC,CAAC;EAChD,IAAMC,gBAAgB,GAAGR,KAAK,CAACO,MAAM,CAAS,CAAC,CAAC;EAEhD,IAAME,SAAS,GAAGT,KAAK,CAACO,MAAM,CAAwB,IAAI,CAAC;EAC3D,IAAMG,UAAU,GAAGV,KAAK,CAACO,MAAM,CAAwB,IAAI,CAAC;EAE5D,IAAMI,iBAAiB,GAAGX,KAAK,CAACO,MAAM,CAAkD,IAAI,CAAC;EAE7F,IAAMK,gCAAgC,GAAGrB,QAAQ,KAAKsB,kBAAQ,CAACC,GAAG,GAAG,GAAG,GAAG,GAAG;EAE9E,IAAMC,KAAK,GAAG,SAARA,KAAK,GAAS;IAClBZ,UAAU,CAAC,IAAI,CAAC;IAChBJ,oBAAoB,CAClBW,UAAU,CAACM,OAAO,EAClB,YAAM;MACJ9B,OAAO,EAAE;IACX,CAAC,EACD0B,gCAAgC,CACjC;EACH,CAAC;EAED,IAAMK,iBAAuD,GAAG,SAA1DA,iBAAuD,CAAIC,CAAC,EAAK;IACrEH,KAAK,EAAE;IAEP,IAAIlC,MAAM,IAAI,OAAOI,aAAa,KAAK,UAAU,EAAE;MACjDA,aAAa,CAACiC,CAAC,CAAC;IAClB;EACF,CAAC;EAED,IAAMC,YAAY,GAAG,IAAAC,sBAAU,EAACL,KAAK,EAAE/B,QAAQ,CAAC;EAEhD,IAAMqC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,OAAe,EAAK;IAC5C,IAAIX,iBAAiB,CAACK,OAAO,KAAK,IAAI,EAAE;MACtCO,oBAAoB,CAACZ,iBAAiB,CAACK,OAAO,CAAC;IACjD;IACAL,iBAAiB,CAACK,OAAO,GAAGQ,qBAAqB,CAAC,YAAM;MACtD,IAAIf,SAAS,CAACO,OAAO,EAAE;QACrBP,SAAS,CAACO,OAAO,CAACS,KAAK,CAACC,SAAS,yBAAkBJ,OAAO,aAAU;MACtE;IACF,CAAC,CAAC;EACJ,CAAC;EAED,IAAMK,YAAY,GAAGR,YAAY,CAACS,KAAK;EAEvC,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAiB,EAAK;IAAA;IAC1C,IAAQC,MAAM,GAAoBD,KAAK,CAA/BC,MAAM;MAAEC,aAAa,GAAKF,KAAK,CAAvBE,aAAa;IAC7BA,aAAa,CAACC,cAAc,EAAE;IAE9B,IAAI,CAAC7B,OAAO,EAAE;MACZC,UAAU,CAAC,IAAI,CAAC;IAClB;IAEAC,gBAAgB,CAACU,OAAO,GAAIe,MAAM,mDAAItB,SAAS,CAACO,OAAO,uDAAjB,mBAAmBkB,WAAW,yEAAI,CAAC,CAAC,GAAI,GAAG;IACjF1B,gBAAgB,CAACQ,OAAO,GAAG,IAAAmB,aAAM,EAAC7B,gBAAgB,CAACU,OAAO,EAAE,EAAE,EAAE,GAAG,EAAEzB,QAAQ,KAAKsB,kBAAQ,CAACC,GAAG,CAAC;IAE/FO,gBAAgB,CAACb,gBAAgB,CAACQ,OAAO,CAAC;EAC5C,CAAC;EAED,IAAMoB,UAAU,GAAG,SAAbA,UAAU,CAAIlB,CAAa,EAAK;IACpC,IAAImB,QAAkC;IAEtC,IAAIjC,OAAO,EAAE;MACX,IAAIkC,aAAa,GAAG9B,gBAAgB,CAACQ,OAAO;MAC5C,IAAMuB,gBAAgB,GAAID,aAAa,GAAGpB,CAAC,CAAClC,QAAQ,GAAI,GAAG,GAAG,GAAG;MACjEsD,aAAa,GAAGA,aAAa,GAAGC,gBAAgB;MAEhD,IAAI5C,SAAS,IAAI2C,aAAa,IAAI,CAAC,EAAE,EAAE;QACrCnB,YAAY,CAACS,KAAK,EAAE;QACpB7B,oBAAoB,CAClBU,SAAS,CAACO,OAAO,EACjB,YAAM;UACJ9B,OAAO,EAAE;QACX,CAAC,EACD0B,gCAAgC,CACjC;QACDS,gBAAgB,CAAC,CAAC,GAAG,CAAC;MACxB,CAAC,MAAM,IAAI,CAAC1B,SAAS,IAAI2C,aAAa,IAAI,EAAE,EAAE;QAC5CnB,YAAY,CAACS,KAAK,EAAE;QACpB7B,oBAAoB,CAClBU,SAAS,CAACO,OAAO,EACjB,YAAM;UACJ9B,OAAO,EAAE;QACX,CAAC,EACD0B,gCAAgC,CACjC;QACDS,gBAAgB,CAAC,GAAG,CAAC;MACvB,CAAC,MAAM;QACLgB,QAAQ,GAAG,oBAAM;UACflB,YAAY,CAACqB,GAAG,EAAE;UAClBnB,gBAAgB,CAAC,CAAC,CAAC;QACrB,CAAC;MACH;IACF,CAAC,MAAM;MACLF,YAAY,CAACqB,GAAG,EAAE;IACpB;IAEAnC,UAAU,CAAC,KAAK,CAAC;IACjBgC,QAAQ,IAAIb,qBAAqB,CAACa,QAAQ,CAAC;EAC7C,CAAC;EAEDrC,KAAK,CAACyC,SAAS,CAAC;IAAA,OAAMtB,YAAY,CAACqB,GAAG,EAAE;EAAA,GAAE,CAACrB,YAAY,CAAC,CAAC;EAEzD,IAAMxC,MAAM,GAAGI,KAAK,IAAIY,SAAS,IAAIN,QAAQ,GAAG,UAAU,GAAGT,WAAW;EAExE,oBACE,oBAAC,4BAAa,qBACZ,sDACMU,SAAS;IACb,SAAS,EAAE,IAAAoD,gBAAU,kBAEnBnD,QAAQ,KAAKsB,kBAAQ,CAACC,GAAG,uBAA2B,EACpD6B,MAAM,4BAAqBhE,MAAM,EAAG,EACpCgE,MAAM,0BAAmBxD,IAAI,EAAG,EAChCe,OAAO,2BAA+B,EACtCE,OAAO,2BAA+B,EACtCT,SAAS,2BAA+B,EACxCP,SAAS;EACT,iBAEF,oBAAC,YAAK;IACJ,SAAS,oBAAyB;IAClC,UAAU,EAAEsB,UAAW;IACvB,OAAO,EAAEiB,YAAa;IACtB,OAAO,EAAEE,YAAa;IACtB,KAAK,EAAEO;EAAW,gBAElB;IAAK,SAAS,sBAA2B;IAAC,GAAG,EAAE3B;EAAU,GACtD3B,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eAErE;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,oBAAS;IAAC,SAAS;EAAmC,GAAEJ,QAAQ,CAAa,EAC7EW,QAAQ,IAAI,CAACR,MAAM,iBAClB,oBAAC,gBAAO;IAAC,SAAS;EAAuC,GAAEQ,QAAQ,CACpE,EAEAR,MAAM,IAAI,CAACQ,QAAQ,iBAClB,oBAAC,cAAM;IACL,KAAK,EAAC,MAAM;IACZ,IAAI,EAAC,MAAM;IACX,UAAU,EAAEF,IAAI,KAAK,MAAM,GAAG,SAAS,GAAG,QAAS;IACnD,IAAI,EAAC,GAAG;IACR,SAAS,wBAA6B;IACtC,OAAO,EAAE8B;EAAkB,GAE1BpC,MAAM,CAEV,CACG,EAELE,KAAK,iBAAI;IAAK,SAAS;EAA4B,GAAEA,KAAK,CAAO,CAC9D,CACA,CACJ,CACQ;AAEpB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Высота спэйсинга

package/dist/cjs/components/Spacing/Spacing.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["size", "style", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
@@ -25,8 +25,8 @@ var Spacing = function Spacing(_ref) {
     height: size
   }, styleProp);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    "aria-hidden": "true",
-    className: (0, _classNames.classNamesString)(className, "vkuiSpacing"),
+    "aria-hidden": true,
+    className: (0, _vkjs.classNames)(className, "vkuiSpacing"),
     style: style
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Spacing.js","names":["Spacing","size","styleProp","style","className","restProps","height","classNamesString"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./Spacing.module.css\";\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({\n  size = 8,\n  style: styleProp,\n  className,\n  ...restProps\n}: SpacingProps) => {\n  const style = {\n    height: size,\n    ...styleProp,\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-hidden=\"true\"\n      className={classNamesString(className, styles[\"Spacing\"])}\n      style={style}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAAwD;AAWxD;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAKA;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACDC,SAAS,QAAhBC,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMF,KAAK;IACTG,MAAM,EAAEL;EAAI,GACTC,SAAS,CACb;EAED,oBACE,sDACMG,SAAS;IACb,eAAY,MAAM;IAClB,SAAS,EAAE,IAAAE,4BAAgB,EAACH,SAAS,gBAAqB;IAC1D,KAAK,EAAED;EAAM,GACb;AAEN,CAAC;AAAC"}
+{"version":3,"file":"Spacing.js","names":["Spacing","size","styleProp","style","className","restProps","height","classNames"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style = {\n    height: size,\n    ...styleProp,\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-hidden\n      className={classNames(className, styles['Spacing'])}\n      style={style}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAA6C;AAW7C;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAA8E;EAAA,qBAAxEC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAASC,SAAS,QAAhBC,KAAK;IAAaC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC3E,IAAMF,KAAK;IACTG,MAAM,EAAEL;EAAI,GACTC,SAAS,CACb;EAED,oBACE,sDACMG,SAAS;IACb,mBAAW;IACX,SAAS,EAAE,IAAAE,gBAAU,EAACH,SAAS,gBAAqB;IACpD,KAAK,EAAED;EAAM,GACb;AAEN,CAAC;AAAC"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
-    size?: "small" | "regular" | "medium" | "large";
+    size?: 'small' | 'regular' | 'medium' | 'large';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner

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

@@ -9,7 +9,7 @@ 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 _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _icons = require("@vkontakte/icons");
 var _excluded = ["size", "aria-label", "className"];
 /**
@@ -17,9 +17,9 @@ var _excluded = ["size", "aria-label", "className"];
  */
 var Spinner = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "regular" : _ref$size,
-    _ref$ariaLabel = _ref["aria-label"],
-    ariaLabel = _ref$ariaLabel === void 0 ? "Загружается..." : _ref$ariaLabel,
+    size = _ref$size === void 0 ? 'regular' : _ref$size,
+    _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Загружается...' : _ref$ariaLabel,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var SpinnerIcon = {
@@ -32,11 +32,11 @@ var Spinner = /*#__PURE__*/React.memo(function (_ref) {
     role: "status",
     "aria-label": ariaLabel
   }, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiSpinner", className)
+    className: (0, _vkjs.classNames)("vkuiSpinner", className)
   }), /*#__PURE__*/React.createElement(SpinnerIcon, {
     className: "vkuiSpinner__self"
   }));
 });
 exports.Spinner = Spinner;
-Spinner.displayName = "Spinner";
+Spinner.displayName = 'Spinner';
 //# sourceMappingURL=Spinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","names":["Spinner","React","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","classNamesString","displayName"],"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport {\n  Icon24Spinner,\n  Icon32Spinner,\n  Icon44Spinner,\n  Icon16Spinner,\n} from \"@vkontakte/icons\";\nimport styles from \"./Spinner.module.css\";\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: \"small\" | \"regular\" | \"medium\" | \"large\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = \"regular\",\n    \"aria-label\": ariaLabel = \"Загружается...\",\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNamesString(styles[\"Spinner\"], className)}\n      >\n        <SpinnerIcon className={styles[\"Spinner__self\"]} />\n      </span>\n    );\n  }\n);\n\nSpinner.displayName = \"Spinner\";\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAK0B;AAO1B;AACA;AACA;AACO,IAAMA,OAAO,gBAAGC,KAAK,CAACC,IAAI,CAC/B,gBAKoB;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,sBAChB,YAAY;IAAEC,SAAS,+BAAG,gBAAgB;IAC1CC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG;IAClBC,KAAK,EAAEC,oBAAa;IACpBC,OAAO,EAAEC,oBAAa;IACtBC,MAAM,EAAEC,oBAAa;IACrBC,KAAK,EAAEC;EACT,CAAC,CAACZ,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAE,IAAAU,4BAAgB,iBAAoBX,SAAS;EAAE,iBAE1D,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAAC;AAEFL,OAAO,CAACiB,WAAW,GAAG,SAAS"}
+{"version":3,"file":"Spinner.js","names":["Spinner","React","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","classNames","displayName"],"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Icon24Spinner, Icon32Spinner, Icon44Spinner, Icon16Spinner } from '@vkontakte/icons';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNames(styles['Spinner'], className)}\n      >\n        <SpinnerIcon className={styles['Spinner__self']} />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA8F;AAO9F;AACA;AACA;AACO,IAAMA,OAAO,gBAAGC,KAAK,CAACC,IAAI,CAC/B,gBAKoB;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,sBAChB,YAAY;IAAEC,SAAS,+BAAG,gBAAgB;IAC1CC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG;IAClBC,KAAK,EAAEC,oBAAa;IACpBC,OAAO,EAAEC,oBAAa;IACtBC,MAAM,EAAEC,oBAAa;IACrBC,KAAK,EAAEC;EACT,CAAC,CAACZ,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAE,IAAAU,gBAAU,iBAAoBX,SAAS;EAAE,iBAEpD,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAAC;AAEFL,OAAO,CAACiB,WAAW,GAAG,SAAS"}