@vkontakte/vkui 5.0.2 → 5.1.0

package/dist/cssm/components/PullToRefresh/PullToRefreshSpinner.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
+import * as React from 'react';
 export interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
-    size?: number;
-    strokeWidth?: number;
-    on?: boolean;
-    progress?: number;
-    "aria-label"?: string;
+    'size'?: number;
+    'strokeWidth'?: number;
+    'on'?: boolean;
+    'progress'?: number;
+    'aria-label'?: string;
 }
 export declare const PullToRefreshSpinner: ({ on, size, strokeWidth, style, progress, "aria-label": ariaLabel, }: PullToRefreshSpinnerProps) => JSX.Element;

package/dist/cssm/components/PullToRefresh/PullToRefreshSpinner.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import "./PullToRefresh.module.css";
 function calcStrokeDashOffset(value, radius) {
   var progress = value / 100;
@@ -15,14 +15,14 @@ export var PullToRefreshSpinner = function PullToRefreshSpinner(_ref) {
     style = _ref.style,
     _ref$progress = _ref.progress,
     progress = _ref$progress === void 0 ? 0 : _ref$progress,
-    _ref$ariaLabel = _ref["aria-label"],
-    ariaLabel = _ref$ariaLabel === void 0 ? "Пожалуйста, подождите..." : _ref$ariaLabel;
+    _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Пожалуйста, подождите...' : _ref$ariaLabel;
   var radius = 0.5 * size - 0.5 * strokeWidth;
   var dasharray = 2 * Math.PI * radius;
   var circleCenter = 0.5 * size;
   var dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNamesString("vkuiPullToRefresh__spinner", on && "vkuiPullToRefresh__spinner--on"),
+    className: classNames("vkuiPullToRefresh__spinner", on && "vkuiPullToRefresh__spinner--on"),
     style: style,
     "aria-label": on ? ariaLabel : undefined
   }, /*#__PURE__*/React.createElement("svg", {

package/dist/cssm/components/PullToRefresh/PullToRefreshSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"PullToRefreshSpinner.js","names":["React","classNamesString","calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","undefined","width","height","transformOrigin"],"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./PullToRefresh.module.css\";\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  size?: number;\n  strokeWidth?: number;\n  on?: boolean;\n  progress?: number;\n  \"aria-label\"?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  \"aria-label\": ariaLabel = \"Пожалуйста, подождите...\",\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNamesString(\n        styles[\"PullToRefresh__spinner\"],\n        on && styles[\"PullToRefresh__spinner--on\"]\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles[\"PullToRefresh__spinner-self\"]}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles[\"PullToRefresh__spinner-path\"]}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAAC;AAGxD,SAASC,oBAAoB,CAACC,KAAa,EAAEC,MAAc,EAAE;EAC3D,IAAMC,QAAQ,GAAGF,KAAK,GAAG,GAAG;EAC5B,OAAO,CAAC,GAAGG,IAAI,CAACC,EAAE,GAAGH,MAAM,IAAI,CAAC,GAAGC,QAAQ,CAAC;AAC9C;AAWA,OAAO,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAoB,OAOA;EAAA,mBAN/BC,EAAE;IAAFA,EAAE,wBAAG,IAAI;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IAAA,wBACTC,WAAW;IAAXA,WAAW,iCAAG,GAAG;IACjBC,KAAK,QAALA,KAAK;IAAA,qBACLP,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IAAA,sBACZ,YAAY;IAAEQ,SAAS,+BAAG,0BAA0B;EAEpD,IAAMT,MAAM,GAAG,GAAG,GAAGM,IAAI,GAAG,GAAG,GAAGC,WAAW;EAC7C,IAAMG,SAAS,GAAG,CAAC,GAAGR,IAAI,CAACC,EAAE,GAAGH,MAAM;EACtC,IAAMW,YAAY,GAAG,GAAG,GAAGL,IAAI;EAE/B,IAAMM,UAAU,GAAGd,oBAAoB,CAACO,EAAE,GAAG,EAAE,GAAGJ,QAAQ,EAAED,MAAM,CAAC;EAEnE,oBACE;IACE,SAAS,EAAEH,gBAAgB,+BAEzBQ,EAAE,oCAAwC,CAC1C;IACF,KAAK,EAAEG,KAAM;IACb,cAAYH,EAAE,GAAGI,SAAS,GAAGI;EAAU,gBAEvC;IACE,IAAI,EAAC,cAAc;IACnB,SAAS,mCAAwC;IACjD,KAAK,EAAE;MACLC,KAAK,EAAER,IAAI;MACXS,MAAM,EAAET;IACV,CAAE;IACF,OAAO,gBAASA,IAAI,cAAIA,IAAI,CAAG;IAC/B,KAAK,EAAC;EAA4B,gBAElC;IACE,KAAK,EAAE;MACLQ,KAAK,EAAER,IAAI;MACXS,MAAM,EAAET,IAAI;MACZU,eAAe,YAAKL,YAAY,gBAAMA,YAAY;IACpD;EAAE,gBAEF;IACE,SAAS,mCAAwC;IACjD,IAAI,EAAC,MAAM;IACX,eAAe,EAAED,SAAU;IAC3B,gBAAgB,EAAEE,UAAW;IAC7B,WAAW,EAAEL,WAAY;IACzB,aAAa,EAAC,OAAO;IACrB,EAAE,EAAEI,YAAa;IACjB,EAAE,EAAEA,YAAa;IACjB,CAAC,EAAEX;EAAO,EACV,CACA,CACA,CACF;AAEV,CAAC"}
+{"version":3,"file":"PullToRefreshSpinner.js","names":["React","classNames","calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","undefined","width","height","transformOrigin"],"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  'size'?: number;\n  'strokeWidth'?: number;\n  'on'?: boolean;\n  'progress'?: number;\n  'aria-label'?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAG7C,SAASC,oBAAoB,CAACC,KAAa,EAAEC,MAAc,EAAE;EAC3D,IAAMC,QAAQ,GAAGF,KAAK,GAAG,GAAG;EAC5B,OAAO,CAAC,GAAGG,IAAI,CAACC,EAAE,GAAGH,MAAM,IAAI,CAAC,GAAGC,QAAQ,CAAC;AAC9C;AAUA,OAAO,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAoB,OAOA;EAAA,mBAN/BC,EAAE;IAAFA,EAAE,wBAAG,IAAI;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IAAA,wBACTC,WAAW;IAAXA,WAAW,iCAAG,GAAG;IACjBC,KAAK,QAALA,KAAK;IAAA,qBACLP,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IAAA,sBACZ,YAAY;IAAEQ,SAAS,+BAAG,0BAA0B;EAEpD,IAAMT,MAAM,GAAG,GAAG,GAAGM,IAAI,GAAG,GAAG,GAAGC,WAAW;EAC7C,IAAMG,SAAS,GAAG,CAAC,GAAGR,IAAI,CAACC,EAAE,GAAGH,MAAM;EACtC,IAAMW,YAAY,GAAG,GAAG,GAAGL,IAAI;EAE/B,IAAMM,UAAU,GAAGd,oBAAoB,CAACO,EAAE,GAAG,EAAE,GAAGJ,QAAQ,EAAED,MAAM,CAAC;EAEnE,oBACE;IACE,SAAS,EAAEH,UAAU,+BAEnBQ,EAAE,oCAAwC,CAC1C;IACF,KAAK,EAAEG,KAAM;IACb,cAAYH,EAAE,GAAGI,SAAS,GAAGI;EAAU,gBAEvC;IACE,IAAI,EAAC,cAAc;IACnB,SAAS,mCAAwC;IACjD,KAAK,EAAE;MACLC,KAAK,EAAER,IAAI;MACXS,MAAM,EAAET;IACV,CAAE;IACF,OAAO,gBAASA,IAAI,cAAIA,IAAI,CAAG;IAC/B,KAAK,EAAC;EAA4B,gBAElC;IACE,KAAK,EAAE;MACLQ,KAAK,EAAER,IAAI;MACXS,MAAM,EAAET,IAAI;MACZU,eAAe,YAAKL,YAAY,gBAAMA,YAAY;IACpD;EAAE,gBAEF;IACE,SAAS,mCAAwC;IACjD,IAAI,EAAC,MAAM;IACX,eAAe,EAAED,SAAU;IAC3B,gBAAgB,EAAEE,UAAW;IAC7B,WAAW,EAAEL,WAAY;IACzB,aAAa,EAAC,OAAO;IACrB,EAAE,EAAEI,YAAa;IACjB,EAAE,EAAEA,YAAa;IACjB,CAAC,EAAEX;EAAO,EACV,CACA,CACA,CACF;AAEV,CAAC"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
 export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLLabelElement> {
     description?: React.ReactNode;
 }

package/dist/cssm/components/Radio/Radio.js

@@ -1,16 +1,15 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "description", "style", "className", "getRootRef"];
-import * as React from "react";
-import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
-import { Footnote } from "../Typography/Footnote/Footnote";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import * as React from 'react';
+import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { usePlatform } from '../../hooks/usePlatform';
+import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import "./Radio.module.css";
 var RadioIcon = function RadioIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -48,7 +47,7 @@ export var Radio = function Radio(_ref) {
   return /*#__PURE__*/React.createElement(Tappable, {
     Component: "label",
     style: style,
-    className: classNamesString("vkuiRadio", getSizeYClassName("vkuiRadio", sizeY), className),
+    className: classNames("vkuiRadio", getSizeYClassName("vkuiRadio", sizeY), className),
     activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
     disabled: restProps.disabled,
     getRootRef: getRootRef

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["React","ACTIVE_EFFECT_DELAY","Tappable","classNamesString","Platform","usePlatform","hasReactNode","VisuallyHiddenInput","Footnote","getSizeYClassName","useAdaptivity","RadioIcon","props","Radio","children","description","style","className","getRootRef","restProps","platform","sizeY","IOS","disabled"],"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ACTIVE_EFFECT_DELAY, Tappable } from \"../Tappable/Tappable\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport styles from \"./Radio.module.css\";\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden\n      {...props}\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"11\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        fill=\"none\"\n      />\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"7.5\"\n        className={styles[\"Radio__pin\"]}\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNamesString(\n        styles[\"Radio\"],\n        getSizeYClassName(styles[\"Radio\"], sizeY),\n        className\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        className={styles[\"Radio__input\"]}\n        type=\"radio\"\n      />\n      <div className={styles[\"Radio__container\"]}>\n        <RadioIcon className={styles[\"Radio__icon\"]} />\n        <div className={styles[\"Radio__content\"]}>\n          <div className={styles[\"Radio__children\"]}>{children}</div>\n          {hasReactNode(description) && (\n            <Footnote className={styles[\"Radio__description\"]}>\n              {description}\n            </Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,sBAAsB;AACpE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,mBAAmB,QAAQ,4CAA4C;AAChF,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAAC;AAG1D,IAAMC,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAAoC,EAAK;EAC1D,oBACE;IACE,KAAK,EAAC,4BAA4B;IAClC,OAAO,EAAC,WAAW;IACnB;EAAW,GACPA,KAAK,gBAET;IACE,EAAE,EAAC,IAAI;IACP,EAAE,EAAC,IAAI;IACP,CAAC,EAAC,IAAI;IACN,MAAM,EAAC,cAAc;IACrB,WAAW,EAAC,GAAG;IACf,IAAI,EAAC;EAAM,EACX,eACF;IACE,EAAE,EAAC,IAAI;IACP,EAAE,EAAC,IAAI;IACP,CAAC,EAAC,KAAK;IACP,SAAS,kBAAuB;IAChC,IAAI,EAAC;EAAc,EACnB,CACE;AAEV,CAAC;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAGf,WAAW,EAAE;EAC9B,qBAAkBK,aAAa,EAAE;IAAzBW,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEL,KAAM;IACb,SAAS,EAAEb,gBAAgB,cAEzBM,iBAAiB,cAAkBY,KAAK,CAAC,EACzCJ,SAAS,CACT;IACF,iBAAiB,EAAEG,QAAQ,KAAKhB,QAAQ,CAACkB,GAAG,GAAG,GAAG,GAAGrB,mBAAoB;IACzE,QAAQ,EAAEkB,SAAS,CAACI,QAAS;IAC7B,UAAU,EAAEL;EAAW,gBAEvB,oBAAC,mBAAmB,eACdC,SAAS;IACb,SAAS,oBAAyB;IAClC,IAAI,EAAC;EAAO,GACZ,eACF;IAAK,SAAS;EAA6B,gBACzC,oBAAC,SAAS;IAAC,SAAS;EAAwB,EAAG,eAC/C;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA4B,GAAEL,QAAQ,CAAO,EAC1DR,YAAY,CAACS,WAAW,CAAC,iBACxB,oBAAC,QAAQ;IAAC,SAAS;EAA+B,GAC/CA,WAAW,CAEf,CACG,CACF,CACG;AAEf,CAAC"}
+{"version":3,"file":"Radio.js","names":["React","ACTIVE_EFFECT_DELAY","Tappable","classNames","hasReactNode","Platform","usePlatform","VisuallyHiddenInput","Footnote","getSizeYClassName","useAdaptivity","RadioIcon","props","Radio","children","description","style","className","getRootRef","restProps","platform","sizeY","IOS","disabled"],"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './Radio.module.css';\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(styles['Radio'], getSizeYClassName(styles['Radio'], sizeY), className)}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput {...restProps} className={styles['Radio__input']} type=\"radio\" />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__children']}>{children}</div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,sBAAsB;AACpE,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,mBAAmB,QAAQ,4CAA4C;AAChF,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAAC;AAG1D,IAAMC,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAAoC,EAAK;EAC1D,oBACE;IAAK,KAAK,EAAC,4BAA4B;IAAC,OAAO,EAAC,WAAW;IAAC;EAAW,GAAKA,KAAK,gBAC/E;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,MAAM,EAAC,cAAc;IAAC,WAAW,EAAC,GAAG;IAAC,IAAI,EAAC;EAAM,EAAG,eACnF;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,KAAK;IAAC,SAAS,kBAAuB;IAAC,IAAI,EAAC;EAAc,EAAG,CACnF;AAEV,CAAC;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAGd,WAAW,EAAE;EAC9B,qBAAkBI,aAAa,EAAE;IAAzBW,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEL,KAAM;IACb,SAAS,EAAEb,UAAU,cAAkBM,iBAAiB,cAAkBY,KAAK,CAAC,EAAEJ,SAAS,CAAE;IAC7F,iBAAiB,EAAEG,QAAQ,KAAKf,QAAQ,CAACiB,GAAG,GAAG,GAAG,GAAGrB,mBAAoB;IACzE,QAAQ,EAAEkB,SAAS,CAACI,QAAS;IAC7B,UAAU,EAAEL;EAAW,gBAEvB,oBAAC,mBAAmB,eAAKC,SAAS;IAAE,SAAS,oBAAyB;IAAC,IAAI,EAAC;EAAO,GAAG,eACtF;IAAK,SAAS;EAA6B,gBACzC,oBAAC,SAAS;IAAC,SAAS;EAAwB,EAAG,eAC/C;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA4B,GAAEL,QAAQ,CAAO,EAC1DV,YAAY,CAACW,WAAW,CAAC,iBACxB,oBAAC,QAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,CACF,CACG;AAEf,CAAC"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    mode?: "vertical" | "horizontal";
+    mode?: 'vertical' | 'horizontal';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup

package/dist/cssm/components/RadioGroup/RadioGroup.js

@@ -1,20 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode", "children", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import "./RadioGroup.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
  */
 export var RadioGroup = function RadioGroup(_ref) {
   var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "vertical" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'vertical' : _ref$mode,
     children = _ref.children,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNamesString("vkuiRadioGroup", styles["RadioGroup--mode-".concat(mode)], className)
+    className: classNames("vkuiRadioGroup", styles["RadioGroup--mode-".concat(mode)], className)
   }, restProps), children);
 };
 var styles = {

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["React","classNamesString","RadioGroup","mode","children","className","restProps","styles"],"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./RadioGroup.module.css\";\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: \"vertical\" | \"horizontal\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = \"vertical\",\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNamesString(\n      styles[\"RadioGroup\"],\n      styles[`RadioGroup--mode-${mode}`],\n      className\n    )}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAAC;AAOxD;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU;EAAA,qBACrBC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ;IACE,SAAS,EAAEL,gBAAgB,mBAEzBM,MAAM,4BAAqBJ,IAAI,EAAG,EAClCE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACL;AAAA,CACP;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"file":"RadioGroup.js","names":["React","classNames","RadioGroup","mode","children","className","restProps","styles"],"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNames(styles['RadioGroup'], styles[`RadioGroup--mode-${mode}`], className)}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAO7C;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU;EAAA,qBACrBC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ;IACE,SAAS,EAAEL,UAAU,mBAAuBM,MAAM,4BAAqBJ,IAAI,EAAG,EAAEE,SAAS;EAAE,GACvFC,SAAS,GAEZF,QAAQ,CACL;AAAA,CACP;AAAC;EAAA;EAAA;AAAA"}

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

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

package/dist/cssm/components/RangeSlider/RangeSlider.js

@@ -1,25 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onChange", "defaultValue", "min", "max", "step"];
-import * as React from "react";
-import { clamp } from "../../helpers/math";
-import { UniversalSlider } from "./UniversalSlider";
+var _excluded = ["onChange", "min", "max", "defaultValue", "step"];
+import * as React from 'react';
+import { clamp } from '../../helpers/math';
+import { UniversalSlider } from './UniversalSlider';
 /**
  * @see https://vkcom.github.io/VKUI/#/RangeSlider
  */
 export var RangeSlider = function RangeSlider(_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$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? [min, max] : _ref$defaultValue,
     _ref$step = _ref.step,
     step = _ref$step === void 0 ? 0 : _ref$step,
     props = _objectWithoutProperties(_ref, _excluded);
-  var isControlled = Boolean(props.value);
-  var _React$useState = React.useState(defaultValue || [min, max]),
+  var isControlled = props.value !== undefined;
+  var _React$useState = React.useState(defaultValue),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     localValue = _React$useState2[0],
     setValue = _React$useState2[1];

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

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","names":["React","clamp","UniversalSlider","RangeSlider","onChange","defaultValue","min","max","step","props","isControlled","Boolean","value","useState","localValue","setValue","start","end","useMemo","handleChange","useCallback","nextValue","event","disabled"],"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clamp } from \"../../helpers/math\";\nimport { UniversalSlider, UniversalSliderProps } from \"./UniversalSlider\";\nimport { TouchEvent } from \"../Touch/Touch\";\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n  onChange,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 0,\n  ...props\n}: RangeSliderProps) => {\n  const isControlled = Boolean(props.value);\n\n  const [localValue, setValue] = React.useState(\n    defaultValue || ([min, max] as Value)\n  );\n  const [start, end] = props.value || localValue;\n  const value = React.useMemo(\n    () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n    [end, max, min, start]\n  );\n\n  const handleChange: RangeSliderProps[\"onChange\"] = React.useCallback(\n    (nextValue: Value, event: TouchEvent) => {\n      if (\n        props.disabled ||\n        (value[0] === nextValue[0] && value[1] === nextValue[1])\n      ) {\n        return;\n      }\n      !isControlled && setValue(nextValue);\n      onChange && onChange(nextValue, event);\n    },\n    [props.disabled, value, isControlled, onChange]\n  );\n\n  return (\n    <UniversalSlider\n      {...props}\n      value={value}\n      onChange={handleChange}\n      min={min}\n      max={max}\n      step={step}\n    />\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,eAAe,QAA8B,mBAAmB;AAMzE;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IAAA,gBACZC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACLC,KAAK;EAER,IAAMC,YAAY,GAAGC,OAAO,CAACF,KAAK,CAACG,KAAK,CAAC;EAEzC,sBAA+BZ,KAAK,CAACa,QAAQ,CAC3CR,YAAY,IAAK,CAACC,GAAG,EAAEC,GAAG,CAAW,CACtC;IAAA;IAFMO,UAAU;IAAEC,QAAQ;EAG3B,YAAqBN,KAAK,CAACG,KAAK,IAAIE,UAAU;IAAA;IAAvCE,KAAK;IAAEC,GAAG;EACjB,IAAML,KAAK,GAAGZ,KAAK,CAACkB,OAAO,CACzB;IAAA,OAAM,CAACjB,KAAK,CAACe,KAAK,EAAEV,GAAG,EAAEC,GAAG,CAAC,EAAEN,KAAK,CAACgB,GAAG,EAAEX,GAAG,EAAEC,GAAG,CAAC,CAAC;EAAA,CAAS,EAC7D,CAACU,GAAG,EAAEV,GAAG,EAAED,GAAG,EAAEU,KAAK,CAAC,CACvB;EAED,IAAMG,YAA0C,GAAGnB,KAAK,CAACoB,WAAW,CAClE,UAACC,SAAgB,EAAEC,KAAiB,EAAK;IACvC,IACEb,KAAK,CAACc,QAAQ,IACbX,KAAK,CAAC,CAAC,CAAC,KAAKS,SAAS,CAAC,CAAC,CAAC,IAAIT,KAAK,CAAC,CAAC,CAAC,KAAKS,SAAS,CAAC,CAAC,CAAE,EACxD;MACA;IACF;IACA,CAACX,YAAY,IAAIK,QAAQ,CAACM,SAAS,CAAC;IACpCjB,QAAQ,IAAIA,QAAQ,CAACiB,SAAS,EAAEC,KAAK,CAAC;EACxC,CAAC,EACD,CAACb,KAAK,CAACc,QAAQ,EAAEX,KAAK,EAAEF,YAAY,EAAEN,QAAQ,CAAC,CAChD;EAED,oBACE,oBAAC,eAAe,eACVK,KAAK;IACT,KAAK,EAAEG,KAAM;IACb,QAAQ,EAAEO,YAAa;IACvB,GAAG,EAAEb,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAEC;EAAK,GACX;AAEN,CAAC"}
+{"version":3,"file":"RangeSlider.js","names":["React","clamp","UniversalSlider","RangeSlider","onChange","min","max","defaultValue","step","props","isControlled","value","undefined","useState","localValue","setValue","start","end","useMemo","handleChange","useCallback","nextValue","event","disabled"],"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { UniversalSlider, UniversalSliderProps } from './UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = [min, max],\n  step = 0,\n  ...props\n}: RangeSliderProps) => {\n  const isControlled = props.value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const [start, end] = props.value || localValue;\n  const value = React.useMemo(\n    () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n    [end, max, min, start],\n  );\n\n  const handleChange: RangeSliderProps['onChange'] = React.useCallback(\n    (nextValue: Value, event: TouchEvent) => {\n      if (props.disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n        return;\n      }\n      !isControlled && setValue(nextValue);\n      onChange && onChange(nextValue, event);\n    },\n    [props.disabled, value, isControlled, onChange],\n  );\n\n  return (\n    <UniversalSlider\n      {...props}\n      value={value}\n      onChange={handleChange}\n      min={min}\n      max={max}\n      step={step}\n    />\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,eAAe,QAA8B,mBAAmB;AAMzE;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAG,CAACF,GAAG,EAAEC,GAAG,CAAC;IAAA,iBACzBE,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACLC,KAAK;EAER,IAAMC,YAAY,GAAGD,KAAK,CAACE,KAAK,KAAKC,SAAS;EAE9C,sBAA+BZ,KAAK,CAACa,QAAQ,CAACN,YAAY,CAAC;IAAA;IAApDO,UAAU;IAAEC,QAAQ;EAC3B,YAAqBN,KAAK,CAACE,KAAK,IAAIG,UAAU;IAAA;IAAvCE,KAAK;IAAEC,GAAG;EACjB,IAAMN,KAAK,GAAGX,KAAK,CAACkB,OAAO,CACzB;IAAA,OAAM,CAACjB,KAAK,CAACe,KAAK,EAAEX,GAAG,EAAEC,GAAG,CAAC,EAAEL,KAAK,CAACgB,GAAG,EAAEZ,GAAG,EAAEC,GAAG,CAAC,CAAC;EAAA,CAAS,EAC7D,CAACW,GAAG,EAAEX,GAAG,EAAED,GAAG,EAAEW,KAAK,CAAC,CACvB;EAED,IAAMG,YAA0C,GAAGnB,KAAK,CAACoB,WAAW,CAClE,UAACC,SAAgB,EAAEC,KAAiB,EAAK;IACvC,IAAIb,KAAK,CAACc,QAAQ,IAAKZ,KAAK,CAAC,CAAC,CAAC,KAAKU,SAAS,CAAC,CAAC,CAAC,IAAIV,KAAK,CAAC,CAAC,CAAC,KAAKU,SAAS,CAAC,CAAC,CAAE,EAAE;MAC9E;IACF;IACA,CAACX,YAAY,IAAIK,QAAQ,CAACM,SAAS,CAAC;IACpCjB,QAAQ,IAAIA,QAAQ,CAACiB,SAAS,EAAEC,KAAK,CAAC;EACxC,CAAC,EACD,CAACb,KAAK,CAACc,QAAQ,EAAEZ,KAAK,EAAED,YAAY,EAAEN,QAAQ,CAAC,CAChD;EAED,oBACE,oBAAC,eAAe,eACVK,KAAK;IACT,KAAK,EAAEE,KAAM;IACb,QAAQ,EAAEQ,YAAa;IACvB,GAAG,EAAEd,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAEE;EAAK,GACX;AAEN,CAAC"}

package/dist/cssm/components/RangeSlider/UniversalSlider.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { TouchEvent } from "../Touch/Touch";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { TouchEvent } from '../Touch/Touch';
+import { HasRootRef } from '../../types';
 export declare type UniversalValue = [number | null, number];
-export interface UniversalSliderProps<Value> extends HasRootRef<HTMLDivElement>, Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange"> {
+export interface UniversalSliderProps<Value> extends HasRootRef<HTMLDivElement>, Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
     min?: number;
     max?: number;
     step?: number;

package/dist/cssm/components/RangeSlider/UniversalSlider.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["min", "max", "step", "value", "defaultValue", "onChange", "getRootRef", "disabled", "className"];
-import * as React from "react";
-import { Touch } from "../Touch/Touch";
-import { classNamesString } from "../../lib/classNames";
-import { rescale } from "../../helpers/math";
-import { useExternRef } from "../../hooks/useExternRef";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { Touch } from '../Touch/Touch';
+import { classNames } from '@vkontakte/vkjs';
+import { rescale } from '../../helpers/math';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import "../Slider/Slider.module.css";
 export var UniversalSlider = function UniversalSlider(_ref) {
   var _ref$min = _ref.min,
@@ -48,18 +48,18 @@ export var UniversalSlider = function UniversalSlider(_ref) {
       return [null, nextValue];
     }
     var dragging = gesture.dragging;
-    if (dragging === "start") {
+    if (dragging === 'start') {
       if (nextValue > end) {
         // "перехватиться", если перетянули за конец
-        gesture.dragging = "end";
+        gesture.dragging = 'end';
         return [end, nextValue];
       }
       return [nextValue, end];
     }
-    if (dragging === "end") {
+    if (dragging === 'end') {
       if (nextValue < start) {
         // "перехватиться", если перетянули за начало
-        gesture.dragging = "start";
+        gesture.dragging = 'start';
         return [nextValue, start];
       }
       return [start, nextValue];
@@ -68,12 +68,12 @@ export var UniversalSlider = function UniversalSlider(_ref) {
   };
   var snapDirection = function snapDirection(pos, target) {
     if (target === thumbStart.current) {
-      return "start";
+      return 'start';
     }
     if (target === thumbEnd.current) {
-      return "end";
+      return 'end';
     }
-    return Math.abs((start !== null && start !== void 0 ? start : 0) - pos) <= Math.abs(end - pos) ? "start" : "end";
+    return Math.abs((start !== null && start !== void 0 ? start : 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';
   };
   var onStart = function onStart(e) {
     var _container$current, _boundingRect$width, _boundingRect$left;
@@ -105,13 +105,13 @@ export var UniversalSlider = function UniversalSlider(_ref) {
     width: "".concat(toPercent(end), "%")
   };
   return /*#__PURE__*/React.createElement(Touch, _extends({
-    "data-value": isRange ? value.join(",") : value
+    "data-value": isRange ? value.join(',') : value
   }, restProps, disabled ? {} : {
     onStart: onStart,
     onMove: onMove,
     onEnd: onEnd
   }, {
-    className: classNamesString("vkuiSlider", getSizeYClassName("vkuiSlider", sizeY), disabled && "vkuiSlider--disabled", className)
+    className: classNames("vkuiSlider", getSizeYClassName("vkuiSlider", sizeY), disabled && "vkuiSlider--disabled", className)
   }), /*#__PURE__*/React.createElement("div", {
     ref: container,
     className: "vkuiSlider__in"
@@ -119,10 +119,10 @@ export var UniversalSlider = function UniversalSlider(_ref) {
     className: "vkuiSlider__dragger",
     style: draggerStyle
   }, isRange && /*#__PURE__*/React.createElement("span", {
-    className: classNamesString("vkuiSlider__thumb", "vkuiSlider__thumb--start"),
+    className: classNames("vkuiSlider__thumb", "vkuiSlider__thumb--start"),
     ref: thumbStart
   }), /*#__PURE__*/React.createElement("span", {
-    className: classNamesString("vkuiSlider__thumb", "vkuiSlider__thumb--end"),
+    className: classNames("vkuiSlider__thumb", "vkuiSlider__thumb--end"),
     ref: thumbEnd
   }))));
 };

package/dist/cssm/components/RangeSlider/UniversalSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalSlider.js","names":["React","Touch","classNamesString","rescale","useExternRef","useAdaptivity","getSizeYClassName","UniversalSlider","min","max","step","value","defaultValue","onChange","getRootRef","disabled","className","restProps","start","end","isRange","gesture","useRef","dragging","startX","containerWidth","current","container","thumbStart","thumbEnd","sizeY","offsetToValue","absolute","updateRange","nextValue","snapDirection","pos","target","Math","abs","onStart","e","boundingRect","getBoundingClientRect","width","absolutePosition","left","originalEvent","stopPropagation","onMove","shiftX","preventDefault","onEnd","toPercent","v","draggerStyle","join"],"sources":["../../../../src/components/RangeSlider/UniversalSlider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent, TouchEventHandler } from \"../Touch/Touch\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { rescale } from \"../../helpers/math\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"../Slider/Slider.module.css\";\n\nexport type UniversalValue = [number | null, number];\n\nexport interface UniversalSliderProps<Value>\n  extends HasRootRef<HTMLDivElement>,\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      \"value\" | \"defaultValue\" | \"onChange\"\n    > {\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: Value;\n  defaultValue?: Value;\n  disabled?: boolean;\n  onChange?(value: Value, e: TouchEvent): void;\n}\n\nexport const UniversalSlider = ({\n  min = 0,\n  max = 100,\n  step,\n  value = [0, 0],\n  defaultValue,\n  onChange,\n  getRootRef,\n  disabled,\n  className,\n  ...restProps\n}: UniversalSliderProps<UniversalValue>) => {\n  const [start, end] = value;\n  const isRange = start != null;\n  const gesture = React.useRef({\n    dragging: false as false | \"start\" | \"end\",\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const container = useExternRef(getRootRef);\n  const thumbStart = React.useRef<HTMLDivElement>(null);\n  const thumbEnd = React.useRef<HTMLDivElement>(null);\n  const { sizeY } = useAdaptivity();\n\n  const offsetToValue = (absolute: number) => {\n    return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });\n  };\n\n  const updateRange = (nextValue: number): UniversalValue => {\n    if (start == null) {\n      return [null, nextValue];\n    }\n\n    const { dragging } = gesture;\n    if (dragging === \"start\") {\n      if (nextValue > end) {\n        // \"перехватиться\", если перетянули за конец\n        gesture.dragging = \"end\";\n        return [end, nextValue];\n      }\n      return [nextValue, end];\n    }\n    if (dragging === \"end\") {\n      if (nextValue < start) {\n        // \"перехватиться\", если перетянули за начало\n        gesture.dragging = \"start\";\n        return [nextValue, start];\n      }\n      return [start, nextValue];\n    }\n\n    return value;\n  };\n\n  const snapDirection = (pos: number, target: EventTarget | null) => {\n    if (target === thumbStart.current) {\n      return \"start\";\n    }\n    if (target === thumbEnd.current) {\n      return \"end\";\n    }\n    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos)\n      ? \"start\"\n      : \"end\";\n  };\n\n  const onStart: TouchEventHandler = (e: TouchEvent) => {\n    const boundingRect = container.current?.getBoundingClientRect();\n    gesture.containerWidth = boundingRect?.width ?? 0;\n\n    const absolutePosition = e.startX - (boundingRect?.left ?? 0);\n    const pos = offsetToValue(absolutePosition);\n    gesture.dragging = snapDirection(pos, e.originalEvent.target);\n    gesture.startX = absolutePosition;\n\n    onChange?.(updateRange(pos), e);\n    e.originalEvent.stopPropagation();\n  };\n\n  const onMove: TouchEventHandler = (e: TouchEvent) => {\n    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);\n\n    e.originalEvent.stopPropagation();\n    e.originalEvent.preventDefault();\n  };\n\n  const onEnd: TouchEventHandler = (e) => {\n    gesture.dragging = false;\n    e.originalEvent.stopPropagation();\n  };\n\n  const toPercent = (v: number) => ((v - min) / (max - min)) * 100;\n  const draggerStyle = isRange\n    ? {\n        width: `${toPercent(end) - toPercent(start ?? 0)}%`,\n        left: `${toPercent(start ?? 0)}%`,\n      }\n    : {\n        width: `${toPercent(end)}%`,\n      };\n\n  return (\n    <Touch\n      data-value={isRange ? value.join(\",\") : value}\n      {...restProps}\n      {...(disabled ? {} : { onStart, onMove, onEnd })}\n      className={classNamesString(\n        styles[\"Slider\"],\n        getSizeYClassName(styles[\"Slider\"], sizeY),\n        disabled && styles[\"Slider--disabled\"],\n        className\n      )}\n    >\n      <div ref={container} className={styles[\"Slider__in\"]}>\n        <div className={styles[\"Slider__dragger\"]} style={draggerStyle}>\n          {isRange && (\n            <span\n              className={classNamesString(\n                styles[\"Slider__thumb\"],\n                styles[\"Slider__thumb--start\"]\n              )}\n              ref={thumbStart}\n            />\n          )}\n          <span\n            className={classNamesString(\n              styles[\"Slider__thumb\"],\n              styles[\"Slider__thumb--end\"]\n            )}\n            ref={thumbEnd}\n          />\n        </div>\n      </div>\n    </Touch>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"UniversalSlider.js","names":["React","Touch","classNames","rescale","useExternRef","useAdaptivity","getSizeYClassName","UniversalSlider","min","max","step","value","defaultValue","onChange","getRootRef","disabled","className","restProps","start","end","isRange","gesture","useRef","dragging","startX","containerWidth","current","container","thumbStart","thumbEnd","sizeY","offsetToValue","absolute","updateRange","nextValue","snapDirection","pos","target","Math","abs","onStart","e","boundingRect","getBoundingClientRect","width","absolutePosition","left","originalEvent","stopPropagation","onMove","shiftX","preventDefault","onEnd","toPercent","v","draggerStyle","join"],"sources":["../../../../src/components/RangeSlider/UniversalSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Touch, TouchEvent, TouchEventHandler } from '../Touch/Touch';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { rescale } from '../../helpers/math';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from '../Slider/Slider.module.css';\n\nexport type UniversalValue = [number | null, number];\n\nexport interface UniversalSliderProps<Value>\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: Value;\n  defaultValue?: Value;\n  disabled?: boolean;\n  onChange?(value: Value, e: TouchEvent): void;\n}\n\nexport const UniversalSlider = ({\n  min = 0,\n  max = 100,\n  step,\n  value = [0, 0],\n  defaultValue,\n  onChange,\n  getRootRef,\n  disabled,\n  className,\n  ...restProps\n}: UniversalSliderProps<UniversalValue>) => {\n  const [start, end] = value;\n  const isRange = start != null;\n  const gesture = React.useRef({\n    dragging: false as false | 'start' | 'end',\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const container = useExternRef(getRootRef);\n  const thumbStart = React.useRef<HTMLDivElement>(null);\n  const thumbEnd = React.useRef<HTMLDivElement>(null);\n  const { sizeY } = useAdaptivity();\n\n  const offsetToValue = (absolute: number) => {\n    return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });\n  };\n\n  const updateRange = (nextValue: number): UniversalValue => {\n    if (start == null) {\n      return [null, nextValue];\n    }\n\n    const { dragging } = gesture;\n    if (dragging === 'start') {\n      if (nextValue > end) {\n        // \"перехватиться\", если перетянули за конец\n        gesture.dragging = 'end';\n        return [end, nextValue];\n      }\n      return [nextValue, end];\n    }\n    if (dragging === 'end') {\n      if (nextValue < start) {\n        // \"перехватиться\", если перетянули за начало\n        gesture.dragging = 'start';\n        return [nextValue, start];\n      }\n      return [start, nextValue];\n    }\n\n    return value;\n  };\n\n  const snapDirection = (pos: number, target: EventTarget | null) => {\n    if (target === thumbStart.current) {\n      return 'start';\n    }\n    if (target === thumbEnd.current) {\n      return 'end';\n    }\n    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';\n  };\n\n  const onStart: TouchEventHandler = (e: TouchEvent) => {\n    const boundingRect = container.current?.getBoundingClientRect();\n    gesture.containerWidth = boundingRect?.width ?? 0;\n\n    const absolutePosition = e.startX - (boundingRect?.left ?? 0);\n    const pos = offsetToValue(absolutePosition);\n    gesture.dragging = snapDirection(pos, e.originalEvent.target);\n    gesture.startX = absolutePosition;\n\n    onChange?.(updateRange(pos), e);\n    e.originalEvent.stopPropagation();\n  };\n\n  const onMove: TouchEventHandler = (e: TouchEvent) => {\n    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);\n\n    e.originalEvent.stopPropagation();\n    e.originalEvent.preventDefault();\n  };\n\n  const onEnd: TouchEventHandler = (e) => {\n    gesture.dragging = false;\n    e.originalEvent.stopPropagation();\n  };\n\n  const toPercent = (v: number) => ((v - min) / (max - min)) * 100;\n  const draggerStyle = isRange\n    ? {\n        width: `${toPercent(end) - toPercent(start ?? 0)}%`,\n        left: `${toPercent(start ?? 0)}%`,\n      }\n    : {\n        width: `${toPercent(end)}%`,\n      };\n\n  return (\n    <Touch\n      data-value={isRange ? value.join(',') : value}\n      {...restProps}\n      {...(disabled ? {} : { onStart, onMove, onEnd })}\n      className={classNames(\n        styles['Slider'],\n        getSizeYClassName(styles['Slider'], sizeY),\n        disabled && styles['Slider--disabled'],\n        className,\n      )}\n    >\n      <div ref={container} className={styles['Slider__in']}>\n        <div className={styles['Slider__dragger']} style={draggerStyle}>\n          {isRange && (\n            <span\n              className={classNames(styles['Slider__thumb'], styles['Slider__thumb--start'])}\n              ref={thumbStart}\n            />\n          )}\n          <span\n            className={classNames(styles['Slider__thumb'], styles['Slider__thumb--end'])}\n            ref={thumbEnd}\n          />\n        </div>\n      </div>\n    </Touch>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface RemovableProps {
     /**
      * iOS only. Текст в выезжающей кнопке для удаления ячейки.
@@ -14,7 +14,7 @@ interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, Remova
     /**
      * Расположение кнопки удаления.
      */
-    align?: "start" | "center";
+    align?: 'start' | 'center';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable

package/dist/cssm/components/Removable/Removable.js

@@ -2,19 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { getTitleFromChildren, noop } from "../../lib/utils";
-import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { useDOM } from "../../lib/dom";
-import { Platform } from "../../lib/platform";
-import { Icon24Cancel } from "@vkontakte/icons";
-import { IconButton } from "../IconButton/IconButton";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { Tappable } from "../Tappable/Tappable";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { getTitleFromChildren } from '../../lib/utils';
+import { useExternRef } from '../../hooks/useExternRef';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useDOM } from '../../lib/dom';
+import { Platform } from '../../lib/platform';
+import { Icon24Cancel } from '@vkontakte/icons';
+import { IconButton } from '../IconButton/IconButton';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { Tappable } from '../Tappable/Tappable';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import "./Removable.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
@@ -32,7 +32,7 @@ var RemovableIos = function RemovableIos(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     removeOffset = _React$useState2[0],
     updateRemoveOffset = _React$useState2[1];
-  useGlobalEventListener(window, "click", function () {
+  useGlobalEventListener(window, 'click', function () {
     if (removeOffset > 0) {
       updateRemoveOffset(0);
     }
@@ -66,7 +66,7 @@ var RemovableIos = function RemovableIos(_ref) {
     hasActive: false,
     hasHover: false,
     "aria-label": removePlaceholderString,
-    className: classNamesString("vkuiRemovable__action", "vkuiRemovable__toggle"),
+    className: classNames("vkuiRemovable__action", "vkuiRemovable__toggle"),
     onClick: onRemoveActivateClick,
     disabled: removeOffset > 0
   }, /*#__PURE__*/React.createElement("i", {
@@ -96,9 +96,9 @@ export var Removable = function Removable(_ref2) {
     _ref2$onRemove = _ref2.onRemove,
     onRemove = _ref2$onRemove === void 0 ? noop : _ref2$onRemove,
     _ref2$removePlacehold = _ref2.removePlaceholder,
-    removePlaceholder = _ref2$removePlacehold === void 0 ? "Удалить" : _ref2$removePlacehold,
+    removePlaceholder = _ref2$removePlacehold === void 0 ? 'Удалить' : _ref2$removePlacehold,
     _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? "center" : _ref2$align,
+    align = _ref2$align === void 0 ? 'center' : _ref2$align,
     className = _ref2.className,
     restProps = _objectWithoutProperties(_ref2, _excluded);
   var platform = usePlatform();
@@ -112,7 +112,7 @@ export var Removable = function Removable(_ref2) {
   var removePlaceholderString = getTitleFromChildren(removePlaceholder);
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: ref,
-    className: classNamesString("vkuiRemovable", platform === Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], getSizeYClassName("vkuiRemovable", sizeY), className)
+    className: classNames("vkuiRemovable", platform === Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], getSizeYClassName("vkuiRemovable", sizeY), className)
   }), platform !== Platform.IOS && /*#__PURE__*/React.createElement("div", {
     className: "vkuiRemovable__content"
   }, children, /*#__PURE__*/React.createElement(IconButton, {

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

@@ -1 +1 @@
-{"version":3,"file":"Removable.js","names":["React","classNamesString","getTitleFromChildren","noop","useExternRef","usePlatform","useAdaptivity","useDOM","Platform","Icon24Cancel","IconButton","useGlobalEventListener","Tappable","getSizeYClassName","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","Removable","getRootRef","align","className","restProps","platform","sizeY","ref","onRemoveClick","preventDefault","IOS","styles"],"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getTitleFromChildren, noop } from \"../../lib/utils\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Platform } from \"../../lib/platform\";\nimport { Icon24Cancel } from \"@vkontakte/icons\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Removable.module.css\";\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    \"click\",\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true }\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={styles[\"Removable__content\"]}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNamesString(\n          styles[\"Removable__action\"],\n          styles[\"Removable__toggle\"]\n        )}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles[\"Removable__toggle-in\"]} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles[\"Removable__offset\"]} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles[\"Removable__remove\"]}\n        onClick={onRemove}\n      >\n        <span className={styles[\"Removable__remove-in\"]}>\n          {removePlaceholder}\n        </span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: \"start\" | \"center\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = \"Удалить\",\n  align = \"center\",\n  className,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string =\n    getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNamesString(\n        styles[\"Removable\"],\n        platform === Platform.IOS && styles[\"Removable--ios\"],\n        styles[`Removable--align-${align}`],\n        getSizeYClassName(styles[\"Removable\"], sizeY),\n        className\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={styles[\"Removable__content\"]}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles[\"Removable__action\"]}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles[\"Removable__offset\"]} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Removable.js","names":["React","classNames","noop","getTitleFromChildren","useExternRef","usePlatform","useAdaptivity","useDOM","Platform","Icon24Cancel","IconButton","useGlobalEventListener","Tappable","getSizeYClassName","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","Removable","getRootRef","align","className","restProps","platform","sizeY","ref","onRemoveClick","preventDefault","IOS","styles"],"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { Tappable } from '../Tappable/Tappable';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={styles['Removable__content']}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        styles['Removable'],\n        platform === Platform.IOS && styles['Removable--ios'],\n        styles[`Removable--align-${align}`],\n        getSizeYClassName(styles['Removable'], sizeY),\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={styles['Removable__content']}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { TappableProps } from "../Tappable/Tappable";
+import * as React from 'react';
+import { TappableProps } from '../Tappable/Tappable';
 export interface RichCellProps extends TappableProps {
     /**
      * Контейнер для текста над `children`.