@vkontakte/vkui 4.22.0 → 4.24.0

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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["min", "max", "step", "value", "defaultValue", "onChange", "getRootRef", "sizeY", "disabled"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from 'react';
+import * as React from "react";
 import { Touch } from "../Touch/Touch";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
@@ -54,20 +54,20 @@ var UniversalSliderDumb = function UniversalSliderDumb(_ref) {
 
     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];
       }
 
@@ -79,14 +79,14 @@ var UniversalSliderDumb = function UniversalSliderDumb(_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 - pos) <= Math.abs(end - pos) ? 'start' : 'end';
+    return Math.abs(start - pos) <= Math.abs(end - pos) ? "start" : "end";
   };
 
   var onStart = function onStart(e) {
@@ -122,13 +122,13 @@ var UniversalSliderDumb = function UniversalSliderDumb(_ref) {
     width: "".concat(toPercent(end), "%")
   };
   return createScopedElement(Touch, _extends({
-    "data-value": isRange ? value.join(',') : value
+    "data-value": isRange ? value.join(",") : value
   }, restProps, disabled ? {} : {
     onStart: onStart,
     onMove: onMove,
     onEnd: onEnd
   }, {
-    vkuiClass: classNames(getClassName('Slider', platform), "Slider--sizeY-".concat(sizeY), disabled && 'Slider--disabled')
+    vkuiClass: classNames(getClassName("Slider", platform), "Slider--sizeY-".concat(sizeY), disabled && "Slider--disabled")
   }), createScopedElement("div", {
     ref: container,
     vkuiClass: "Slider__in"
@@ -136,10 +136,10 @@ var UniversalSliderDumb = function UniversalSliderDumb(_ref) {
     vkuiClass: "Slider__dragger",
     style: draggerStyle
   }, isRange && createScopedElement("span", {
-    vkuiClass: classNames('Slider__thumb', 'Slider__thumb--start'),
+    vkuiClass: classNames("Slider__thumb", "Slider__thumb--start"),
     ref: thumbStart
   }), createScopedElement("span", {
-    vkuiClass: classNames('Slider__thumb', 'Slider__thumb--end'),
+    vkuiClass: classNames("Slider__thumb", "Slider__thumb--end"),
     ref: thumbEnd
   }))));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RangeSlider/UniversalSlider.tsx"],"names":["React","Touch","getClassName","classNames","rescale","withAdaptivity","useExternRef","usePlatform","UniversalSliderDumb","min","max","step","value","defaultValue","onChange","getRootRef","sizeY","disabled","restProps","platform","start","end","isRange","gesture","useRef","dragging","startX","containerWidth","current","container","thumbStart","thumbEnd","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","UniversalSlider"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Touch, TouchEvent, TouchEventHandler } from '../Touch/Touch';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { HasRootRef } from '../../types';\nimport { rescale } from '../../helpers/math';\nimport { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport '../Slider/Slider.css';\n\nexport type UniversalValue = [number | null, number];\n\nexport interface UniversalSliderProps<Value> extends\n  HasRootRef<HTMLDivElement>,\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>,\n  AdaptivityProps {\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\nconst UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({\n  min, max, step,\n  value, defaultValue, onChange,\n  getRootRef,\n  sizeY,\n  disabled,\n  ...restProps\n}) => {\n  const platform = usePlatform();\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>();\n  const thumbEnd = React.useRef<HTMLDivElement>();\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) => {\n    if (target === thumbStart.current) {\n      return 'start';\n    }\n    if (target === thumbEnd.current) {\n      return 'end';\n    }\n    return Math.abs(start - 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;\n\n    const absolutePosition = e.startX - boundingRect.left;\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    width: `${toPercent(end) - toPercent(start)}%`,\n    left: `${toPercent(start)}%`,\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      vkuiClass={classNames(\n        getClassName('Slider', platform),\n        `Slider--sizeY-${sizeY}`,\n        disabled && 'Slider--disabled',\n      )}\n    >\n      <div ref={container} vkuiClass=\"Slider__in\">\n        <div vkuiClass=\"Slider__dragger\" style={draggerStyle}>\n          {isRange && <span vkuiClass={classNames('Slider__thumb', 'Slider__thumb--start')} ref={thumbStart} />}\n          <span vkuiClass={classNames('Slider__thumb', 'Slider__thumb--end')} ref={thumbEnd} />\n        </div>\n      </div>\n    </Touch>\n  );\n};\n\nexport const UniversalSlider = withAdaptivity(UniversalSliderDumb, {\n  sizeY: true,\n});\n"],"file":"UniversalSlider.js"}
+{"version":3,"sources":["../../../../src/components/RangeSlider/UniversalSlider.tsx"],"names":["React","Touch","getClassName","classNames","rescale","withAdaptivity","useExternRef","usePlatform","UniversalSliderDumb","min","max","step","value","defaultValue","onChange","getRootRef","sizeY","disabled","restProps","platform","start","end","isRange","gesture","useRef","dragging","startX","containerWidth","current","container","thumbStart","thumbEnd","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","UniversalSlider"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent, TouchEventHandler } from \"../Touch/Touch\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { rescale } from \"../../helpers/math\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"../Slider/Slider.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    AdaptivityProps {\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\nconst UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({\n  min,\n  max,\n  step,\n  value,\n  defaultValue,\n  onChange,\n  getRootRef,\n  sizeY,\n  disabled,\n  ...restProps\n}) => {\n  const platform = usePlatform();\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>();\n  const thumbEnd = React.useRef<HTMLDivElement>();\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) => {\n    if (target === thumbStart.current) {\n      return \"start\";\n    }\n    if (target === thumbEnd.current) {\n      return \"end\";\n    }\n    return Math.abs(start - 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;\n\n    const absolutePosition = e.startX - boundingRect.left;\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)}%`,\n        left: `${toPercent(start)}%`,\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      vkuiClass={classNames(\n        getClassName(\"Slider\", platform),\n        `Slider--sizeY-${sizeY}`,\n        disabled && \"Slider--disabled\"\n      )}\n    >\n      <div ref={container} vkuiClass=\"Slider__in\">\n        <div vkuiClass=\"Slider__dragger\" style={draggerStyle}>\n          {isRange && (\n            <span\n              vkuiClass={classNames(\"Slider__thumb\", \"Slider__thumb--start\")}\n              ref={thumbStart}\n            />\n          )}\n          <span\n            vkuiClass={classNames(\"Slider__thumb\", \"Slider__thumb--end\")}\n            ref={thumbEnd}\n          />\n        </div>\n      </div>\n    </Touch>\n  );\n};\n\nexport const UniversalSlider = withAdaptivity(UniversalSliderDumb, {\n  sizeY: true,\n});\n"],"file":"UniversalSlider.js"}

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from 'react';
+import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { getTitleFromChildren, noop } from "../../lib/utils";
 import { useExternRef } from "../../hooks/useExternRef";
@@ -12,7 +12,7 @@ import { getClassName } from "../../helpers/getClassName";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useDOM } from "../../lib/dom";
 import { ANDROID, IOS, VKCOM } from "../../lib/platform";
-import { Icon24Cancel } from '@vkontakte/icons';
+import { Icon24Cancel } from "@vkontakte/icons";
 import IconButton from "../IconButton/IconButton";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import Tappable from "../Tappable/Tappable";
@@ -25,7 +25,7 @@ var RemovableIos = function RemovableIos(_ref) {
       children = _ref.children;
 
   var _useDOM = useDOM(),
-      document = _useDOM.document;
+      window = _useDOM.window;
 
   var removeButtonRef = React.useRef(null);
 
@@ -34,8 +34,10 @@ var RemovableIos = function RemovableIos(_ref) {
       removeOffset = _React$useState2[0],
       updateRemoveOffset = _React$useState2[1];
 
-  useGlobalEventListener(document, 'click', removeOffset > 0 && function () {
-    updateRemoveOffset(0);
+  useGlobalEventListener(window, "click", function () {
+    if (removeOffset > 0) {
+      updateRemoveOffset(0);
+    }
   });
 
   var onRemoveTransitionEnd = function onRemoveTransitionEnd() {
@@ -46,7 +48,9 @@ var RemovableIos = function RemovableIos(_ref) {
     }
   };
 
-  var onRemoveActivateClick = function onRemoveActivateClick() {
+  var onRemoveActivateClick = function onRemoveActivateClick(e) {
+    e.stopPropagation();
+
     var _removeButtonRef$curr2 = removeButtonRef === null || removeButtonRef === void 0 ? void 0 : removeButtonRef.current,
         _removeButtonRef$curr3 = _removeButtonRef$curr2.offsetWidth,
         offsetWidth = _removeButtonRef$curr3 === void 0 ? 0 : _removeButtonRef$curr3;
@@ -80,8 +84,7 @@ var RemovableIos = function RemovableIos(_ref) {
     disabled: removeOffset === 0,
     getRootRef: removeButtonRef,
     vkuiClass: "Removable__remove",
-    onClick: onRemoveClick,
-    onTransitionEnd: onRemoveTransitionEnd
+    onClick: onRemoveClick
   }, createScopedElement("span", {
     vkuiClass: "Removable__remove-in"
   }, removePlaceholder)));
@@ -93,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,
       restProps = _objectWithoutProperties(_ref2, _excluded);
 
   var platform = usePlatform();
@@ -113,7 +116,7 @@ export var Removable = function Removable(_ref2) {
   var removePlaceholderString = getTitleFromChildren(removePlaceholder);
   return createScopedElement("div", _extends({}, restProps, {
     ref: ref,
-    vkuiClass: classNames(getClassName('Removable', platform), "Removable--".concat(align), "Removable--sizeY-".concat(sizeY))
+    vkuiClass: classNames(getClassName("Removable", platform), "Removable--".concat(align), "Removable--sizeY-".concat(sizeY))
   }), (platform === ANDROID || platform === VKCOM) && createScopedElement("div", {
     vkuiClass: "Removable__content"
   }, children, createScopedElement(IconButton, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"names":["React","classNames","getTitleFromChildren","noop","useExternRef","usePlatform","getClassName","useAdaptivity","useDOM","ANDROID","IOS","VKCOM","Icon24Cancel","IconButton","useGlobalEventListener","Tappable","RemovableIos","onRemoveClick","removePlaceholder","removePlaceholderString","children","document","removeButtonRef","useRef","useState","removeOffset","updateRemoveOffset","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","offsetWidth","transform","Removable","getRootRef","onRemove","align","restProps","platform","sizeY","ref","e","preventDefault"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,UAAT;AACA,SAASC,oBAAT,EAA+BC,IAA/B;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,aAAT;AACA,SAASC,MAAT;AACA,SAASC,OAAT,EAAkBC,GAAlB,EAAuBC,KAAvB;AACA,SAASC,YAAT,QAA6B,kBAA7B;AACA,OAAOC,UAAP;AACA,SAASC,sBAAT;AACA,OAAOC,QAAP;AACA;;AAkBA,IAAMC,YAA4C,GAAG,SAA/CA,YAA+C,OAK/C;AAAA,MAJJC,aAII,QAJJA,aAII;AAAA,MAHJC,iBAGI,QAHJA,iBAGI;AAAA,MAFJC,uBAEI,QAFJA,uBAEI;AAAA,MADJC,QACI,QADJA,QACI;;AACJ,gBAAqBZ,MAAM,EAA3B;AAAA,MAAQa,QAAR,WAAQA,QAAR;;AAEA,MAAMC,eAAe,GAAGtB,KAAK,CAACuB,MAAN,CAAa,IAAb,CAAxB;;AACA,wBAA2CvB,KAAK,CAACwB,QAAN,CAAe,CAAf,CAA3C;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,kBAArB;;AAEAZ,EAAAA,sBAAsB,CAACO,QAAD,EAAW,OAAX,EAAoBI,YAAY,GAAG,CAAf,IAAqB,YAAM;AACnEC,IAAAA,kBAAkB,CAAC,CAAD,CAAlB;AACD,GAFqB,CAAtB;;AAIA,MAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAClC,QAAIF,YAAY,GAAG,CAAnB,EAAsB;AAAA;;AACpBH,MAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,qCAAAA,eAAe,CAAEM,OAAjB,gFAA0BC,KAA1B;AACD;AACF,GAJD;;AAMA,MAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAClC,iCAA4BR,eAA5B,aAA4BA,eAA5B,uBAA4BA,eAAe,CAAEM,OAA7C;AAAA,wDAAQG,WAAR;AAAA,QAAQA,WAAR,uCAAsB,CAAtB;;AACAL,IAAAA,kBAAkB,CAACK,WAAD,CAAlB;AACD,GAHD;;AAKA,SACE;AACE,IAAA,SAAS,EAAC,oBADZ;AAEE,IAAA,KAAK,EAAE;AAAEC,MAAAA,SAAS,wBAAiBP,YAAjB,aAAiBA,YAAjB,cAAiBA,YAAjB,GAAiC,CAAjC;AAAX,KAFT;AAGE,IAAA,eAAe,EAAEE;AAHnB,KAKE,oBAAC,UAAD;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,QAAQ,EAAE,KAFZ;AAGE,kBAAYR,uBAHd;AAIE,IAAA,SAAS,EAAC,qCAJZ;AAKE,IAAA,OAAO,EAAEW,qBALX;AAME,IAAA,QAAQ,EAAEL,YAAY,GAAG;AAN3B,KAQE;AAAG,IAAA,SAAS,EAAC,sBAAb;AAAoC,IAAA,IAAI,EAAC;AAAzC,IARF,CALF,EAeGL,QAfH,EAiBE;AAAM,IAAA,SAAS,EAAC,mBAAhB;AAAoC,mBAAY;AAAhD,IAjBF,EAmBE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,QADZ;AAEE,IAAA,SAAS,EAAE,KAFb;AAGE,IAAA,QAAQ,EAAE,KAHZ;AAIE,IAAA,QAAQ,EAAEK,YAAY,KAAK,CAJ7B;AAKE,IAAA,UAAU,EAAEH,eALd;AAME,IAAA,SAAS,EAAC,mBANZ;AAOE,IAAA,OAAO,EAAEL,aAPX;AAQE,IAAA,eAAe,EAAEU;AARnB,KAUE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAwCT,iBAAxC,CAVF,CAnBF,CADF;AAkCD,CA5DD;;AAqEA,OAAO,IAAMe,SAAsC,GAAG,SAAzCA,SAAyC,QAO7B;AAAA,MANvBC,UAMuB,SANvBA,UAMuB;AAAA,MALvBd,QAKuB,SALvBA,QAKuB;AAAA,6BAJvBe,QAIuB;AAAA,MAJvBA,QAIuB,+BAJZhC,IAIY;AAAA,oCAHvBe,iBAGuB;AAAA,MAHvBA,iBAGuB,sCAHH,SAGG;AAAA,0BAFvBkB,KAEuB;AAAA,MAFvBA,KAEuB,4BAFf,QAEe;AAAA,MADpBC,SACoB;;AACvB,MAAMC,QAAQ,GAAGjC,WAAW,EAA5B;;AACA,uBAAkBE,aAAa,EAA/B;AAAA,MAAQgC,KAAR,kBAAQA,KAAR;;AAEA,MAAMC,GAAG,GAAGpC,YAAY,CAAC8B,UAAD,CAAxB;;AAEA,MAAMjB,aAAa,GAAG,SAAhBA,aAAgB,CAACwB,CAAD,EAAyB;AAC7CA,IAAAA,CAAC,CAACC,cAAF;AACAP,IAAAA,QAAQ,CAACM,CAAD,CAAR;AACD,GAHD;;AAKA,MAAMtB,uBAA+B,GAAGjB,oBAAoB,CAACgB,iBAAD,CAA5D;AAEA,SACE,wCACMmB,SADN;AAEE,IAAA,GAAG,EAAEG,GAFP;AAGE,IAAA,SAAS,EAAEvC,UAAU,CACnBK,YAAY,CAAC,WAAD,EAAcgC,QAAd,CADO,uBAELF,KAFK,8BAGCG,KAHD;AAHvB,MASG,CAACD,QAAQ,KAAK7B,OAAb,IAAwB6B,QAAQ,KAAK3B,KAAtC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGS,QADH,EAGE,oBAAC,UAAD;AACE,IAAA,UAAU,EAAC,SADb;AAEE,IAAA,SAAS,EAAC,SAFZ;AAGE,IAAA,SAAS,EAAC,mBAHZ;AAIE,IAAA,OAAO,EAAEH,aAJX;AAKE,kBAAYE;AALd,KAOE,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IAPF,CAHF,CAVJ,EAyBGmB,QAAQ,KAAK5B,GAAb,IACC,oBAAC,YAAD;AACE,IAAA,aAAa,EAAEO,aADjB;AAEE,IAAA,iBAAiB,EAAEC,iBAFrB;AAGE,IAAA,uBAAuB,EAAEC;AAH3B,KAKGC,QALH,CA1BJ,CADF;AAqCD,CAzDM","sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { classNames } from '../../lib/classNames';\nimport { getTitleFromChildren, noop } from '../../lib/utils';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport IconButton from '../IconButton/IconButton';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport Tappable from '../Tappable/Tappable';\nimport './Removable.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n}\n\ninterface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {\n  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n  removePlaceholderString?: string;\n}\n\nconst RemovableIos: React.FC<RemovableIosOwnProps> = ({\n  onRemoveClick,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}) => {\n  const { document } = useDOM();\n\n  const removeButtonRef = React.useRef(null);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(document, 'click', removeOffset > 0 && (() => {\n    updateRemoveOffset(0);\n  }));\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    }\n  };\n\n  const onRemoveActivateClick = () => {\n    const { offsetWidth = 0 } = removeButtonRef?.current;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      vkuiClass=\"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        vkuiClass=\"Removable__action Removable__toggle\"\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i vkuiClass=\"Removable__toggle-in\" role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span vkuiClass=\"Removable__offset\" aria-hidden=\"true\"></span>\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={removeOffset === 0}\n        getRootRef={removeButtonRef}\n        vkuiClass=\"Removable__remove\"\n        onClick={onRemoveClick}\n        onTransitionEnd={onRemoveTransitionEnd}\n      >\n        <span vkuiClass=\"Removable__remove-in\">{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\nexport const Removable: React.FC<RemovableOwnProps> = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\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      vkuiClass={classNames(\n        getClassName('Removable', platform),\n        `Removable--${align}`,\n        `Removable--sizeY-${sizeY}`,\n      )}\n    >\n      {(platform === ANDROID || platform === VKCOM) && (\n        <div vkuiClass=\"Removable__content\">\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            vkuiClass=\"Removable__action\"\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n        </div>\n      )}\n\n      {platform === IOS && (\n        <RemovableIos\n          onRemoveClick={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"file":"Removable.js"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"names":["React","classNames","getTitleFromChildren","noop","useExternRef","usePlatform","getClassName","useAdaptivity","useDOM","ANDROID","IOS","VKCOM","Icon24Cancel","IconButton","useGlobalEventListener","Tappable","RemovableIos","onRemoveClick","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","useState","removeOffset","updateRemoveOffset","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","Removable","getRootRef","onRemove","align","restProps","platform","sizeY","ref","preventDefault"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getTitleFromChildren, noop } from \"../../lib/utils\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport { ANDROID, IOS, VKCOM } from \"../../lib/platform\";\nimport { Icon24Cancel } from \"@vkontakte/icons\";\nimport IconButton from \"../IconButton/IconButton\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport Tappable from \"../Tappable/Tappable\";\nimport \"./Removable.css\";\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n}\n\ninterface RemovableIosOwnProps\n  extends Pick<RemovableProps, \"removePlaceholder\"> {\n  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n  removePlaceholderString?: string;\n}\n\nconst RemovableIos: React.FC<RemovableIosOwnProps> = ({\n  onRemoveClick,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef(null);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(window, \"click\", () => {\n    if (removeOffset > 0) {\n      updateRemoveOffset(0);\n    }\n  });\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n\n    const { offsetWidth = 0 } = removeButtonRef?.current;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      vkuiClass=\"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        vkuiClass=\"Removable__action Removable__toggle\"\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i vkuiClass=\"Removable__toggle-in\" role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span vkuiClass=\"Removable__offset\" aria-hidden=\"true\"></span>\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={removeOffset === 0}\n        getRootRef={removeButtonRef}\n        vkuiClass=\"Removable__remove\"\n        onClick={onRemoveClick}\n      >\n        <span vkuiClass=\"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\nexport const Removable: React.FC<RemovableOwnProps> = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = \"Удалить\",\n  align = \"center\",\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      vkuiClass={classNames(\n        getClassName(\"Removable\", platform),\n        `Removable--${align}`,\n        `Removable--sizeY-${sizeY}`\n      )}\n    >\n      {(platform === ANDROID || platform === VKCOM) && (\n        <div vkuiClass=\"Removable__content\">\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            vkuiClass=\"Removable__action\"\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n        </div>\n      )}\n\n      {platform === IOS && (\n        <RemovableIos\n          onRemoveClick={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"file":"Removable.js"}

package/dist/cssm/components/RichCell/RichCell.js

@@ -26,8 +26,8 @@ var RichCell = function RichCell(_ref) {
 
   var platform = usePlatform();
   return createScopedElement(Tappable, _extends({}, restProps, {
-    vkuiClass: classNames(getClassName('RichCell', platform), {
-      'RichCell--mult': multiline
+    vkuiClass: classNames(getClassName("RichCell", platform), {
+      "RichCell--mult": multiline
     }, "RichCell--sizeY-".concat(sizeY))
   }), before, createScopedElement("div", {
     vkuiClass: "RichCell__in"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"names":["classNames","usePlatform","getClassName","Tappable","hasReactNode","Text","Subhead","withAdaptivity","RichCell","children","text","caption","before","after","bottom","actions","multiline","sizeY","restProps","platform"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,YAAT;AACA,OAAOC,IAAP;AACA,OAAOC,OAAP;AACA,SAASC,cAAT;AACA;;AAkCA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAWpC;AAAA,MAVJC,QAUI,QAVJA,QAUI;AAAA,MATJC,IASI,QATJA,IASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGlB,WAAW,EAA5B;AAEA,SACE,oBAAC,QAAD,eACMiB,SADN;AAEE,IAAA,SAAS,EACPlB,UAAU,CACRE,YAAY,CAAC,UAAD,EAAaiB,QAAb,CADJ,EAER;AACE,wBAAkBH;AADpB,KAFQ,4BAKWC,KALX;AAHd,MAYGL,MAZH,EAaE;AAAK,IAAA,SAAS,EAAC;AAAf,KAEGC,KAFH,EAGE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,QAAb;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAqCJ,QAArC,CADF,EAEGL,YAAY,CAACS,KAAD,CAAZ,IAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CAF1B,CAHF,EAOGT,YAAY,CAACM,IAAD,CAAZ,IAAsB,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,SAAb;AAAuB,IAAA,SAAS,EAAC;AAAjC,KAAmDA,IAAnD,CAPzB,EAQGN,YAAY,CAACO,OAAD,CAAZ,IAAyB,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC,MAAnB;AAA0B,IAAA,MAAM,EAAC,SAAjC;AAA2C,IAAA,SAAS,EAAC;AAArD,KAA0EA,OAA1E,CAR5B,EASG,CAACP,YAAY,CAACU,MAAD,CAAZ,IAAwBV,YAAY,CAACW,OAAD,CAArC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,MADH,EAEGV,YAAY,CAACW,OAAD,CAAZ,IAAyB;AAAK,IAAA,SAAS,EAAC;AAAf,KAAoCA,OAApC,CAF5B,CAVJ,CAbF,CADF;AAgCD,CA9CD;;AAgDA,eAAeR,cAAc,CAACC,QAAD,EAAW;AAAES,EAAAA,KAAK,EAAE;AAAT,CAAX,CAA7B","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport Tappable, { TappableProps } from '../Tappable/Tappable';\nimport { hasReactNode } from '../../lib/utils';\nimport Text from '../Typography/Text/Text';\nimport Subhead from '../Typography/Subhead/Subhead';\nimport { withAdaptivity } from '../../hoc/withAdaptivity';\nimport './RichCell.css';\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"s\" />`\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопка или набор кнопок `<Button size=\"s\" />`. Располагается под `bottom`.\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  multiline?: boolean;\n}\n\nconst RichCell: React.FC<RichCellProps> = ({\n  children,\n  text,\n  caption,\n  before,\n  after,\n  bottom,\n  actions,\n  multiline,\n  sizeY,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={\n        classNames(\n          getClassName('RichCell', platform),\n          {\n            'RichCell--mult': multiline,\n          },\n          `RichCell--sizeY-${sizeY}`,\n        )\n      }\n    >\n      {before}\n      <div vkuiClass=\"RichCell__in\">\n        {/* Этот after будет скрыт из верстки. Он нужен для CSS */}\n        {after}\n        <Text weight=\"medium\" vkuiClass=\"RichCell__content\">\n          <div vkuiClass=\"RichCell__children\">{children}</div>\n          {hasReactNode(after) && <div vkuiClass=\"RichCell__after\">{after}</div>}\n        </Text>\n        {hasReactNode(text) && <Text weight=\"regular\" vkuiClass=\"RichCell__text\">{text}</Text>}\n        {hasReactNode(caption) && <Subhead Component=\"span\" weight=\"regular\" vkuiClass=\"RichCell__caption\">{caption}</Subhead>}\n        {(hasReactNode(bottom) || hasReactNode(actions)) && (\n          <div vkuiClass=\"RichCell__bottom\">\n            {bottom}\n            {hasReactNode(actions) && <div vkuiClass=\"RichCell__actions\">{actions}</div>}\n          </div>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n\nexport default withAdaptivity(RichCell, { sizeY: true });\n"],"file":"RichCell.js"}
+{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"names":["classNames","usePlatform","getClassName","Tappable","hasReactNode","Text","Subhead","withAdaptivity","RichCell","children","text","caption","before","after","bottom","actions","multiline","sizeY","restProps","platform"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,YAAT;AACA,OAAOC,IAAP;AACA,OAAOC,OAAP;AACA,SAASC,cAAT;AACA;;AAkCA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAWpC;AAAA,MAVJC,QAUI,QAVJA,QAUI;AAAA,MATJC,IASI,QATJA,IASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGlB,WAAW,EAA5B;AAEA,SACE,oBAAC,QAAD,eACMiB,SADN;AAEE,IAAA,SAAS,EAAElB,UAAU,CACnBE,YAAY,CAAC,UAAD,EAAaiB,QAAb,CADO,EAEnB;AACE,wBAAkBH;AADpB,KAFmB,4BAKAC,KALA;AAFvB,MAUGL,MAVH,EAWE;AAAK,IAAA,SAAS,EAAC;AAAf,KAEGC,KAFH,EAGE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,QAAb;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAqCJ,QAArC,CADF,EAEGL,YAAY,CAACS,KAAD,CAAZ,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CAHJ,CAHF,EASGT,YAAY,CAACM,IAAD,CAAZ,IACC,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,SAAb;AAAuB,IAAA,SAAS,EAAC;AAAjC,KACGA,IADH,CAVJ,EAcGN,YAAY,CAACO,OAAD,CAAZ,IACC,oBAAC,OAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGA,OALH,CAfJ,EAuBG,CAACP,YAAY,CAACU,MAAD,CAAZ,IAAwBV,YAAY,CAACW,OAAD,CAArC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,MADH,EAEGV,YAAY,CAACW,OAAD,CAAZ,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAoCA,OAApC,CAHJ,CAxBJ,CAXF,CADF;AA8CD,CA5DD;;AA8DA,eAAeR,cAAc,CAACC,QAAD,EAAW;AAAES,EAAAA,KAAK,EAAE;AAAT,CAAX,CAA7B","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Tappable, { TappableProps } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Text from \"../Typography/Text/Text\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport \"./RichCell.css\";\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"s\" />`\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопка или набор кнопок `<Button size=\"s\" />`. Располагается под `bottom`.\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  multiline?: boolean;\n}\n\nconst RichCell: React.FC<RichCellProps> = ({\n  children,\n  text,\n  caption,\n  before,\n  after,\n  bottom,\n  actions,\n  multiline,\n  sizeY,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"RichCell\", platform),\n        {\n          \"RichCell--mult\": multiline,\n        },\n        `RichCell--sizeY-${sizeY}`\n      )}\n    >\n      {before}\n      <div vkuiClass=\"RichCell__in\">\n        {/* Этот after будет скрыт из верстки. Он нужен для CSS */}\n        {after}\n        <Text weight=\"medium\" vkuiClass=\"RichCell__content\">\n          <div vkuiClass=\"RichCell__children\">{children}</div>\n          {hasReactNode(after) && (\n            <div vkuiClass=\"RichCell__after\">{after}</div>\n          )}\n        </Text>\n        {hasReactNode(text) && (\n          <Text weight=\"regular\" vkuiClass=\"RichCell__text\">\n            {text}\n          </Text>\n        )}\n        {hasReactNode(caption) && (\n          <Subhead\n            Component=\"span\"\n            weight=\"regular\"\n            vkuiClass=\"RichCell__caption\"\n          >\n            {caption}\n          </Subhead>\n        )}\n        {(hasReactNode(bottom) || hasReactNode(actions)) && (\n          <div vkuiClass=\"RichCell__bottom\">\n            {bottom}\n            {hasReactNode(actions) && (\n              <div vkuiClass=\"RichCell__actions\">{actions}</div>\n            )}\n          </div>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n\nexport default withAdaptivity(RichCell, { sizeY: true });\n"],"file":"RichCell.js"}

package/dist/cssm/components/RichTooltip/RichTooltip.css

@@ -0,0 +1 @@
+.vkuiRichTooltip{box-shadow:0 0 4px rgba(0,0,0,.04),0 4px 32px rgba(0,0,0,.16);border-radius:8px;background:#fff;background:var(--background_content);-webkit-animation:vkui-popper-fadein .2s ease;animation:vkui-popper-fadein .2s ease}.vkuiRichTooltip__arrow{color:#fff;color:var(--background_content)}

package/dist/cssm/components/RichTooltip/RichTooltip.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "arrow"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import { HoverPopper } from "../HoverPopper/HoverPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useAppearance } from "../../hooks/useAppearance";
+import { classNames } from "../../lib/classNames";
+import { prefixClass } from "../../lib/prefixClass";
+import "./RichTooltip.css"; // Приходится избегать экстендов от HoverPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
+// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
+
+export var RichTooltip = function RichTooltip(_ref) {
+  var children = _ref.children,
+      _ref$arrow = _ref.arrow,
+      arrow = _ref$arrow === void 0 ? true : _ref$arrow,
+      popperProps = _objectWithoutProperties(_ref, _excluded);
+
+  var platform = usePlatform();
+  var appearance = useAppearance();
+  return createScopedElement(HoverPopper, _extends({
+    vkuiClass: classNames(getClassName("RichTooltip", platform), _defineProperty({}, "RichTooltip--".concat(appearance), !!appearance)),
+    arrow: arrow,
+    arrowClassName: prefixClass("RichTooltip__arrow")
+  }, popperProps), children);
+};
+//# sourceMappingURL=RichTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"names":["HoverPopper","getClassName","usePlatform","useAppearance","classNames","prefixClass","RichTooltip","children","arrow","popperProps","platform","appearance"],"mappings":";;;;;AACA,SAASA,WAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,aAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AAEA,2B,CAEA;AACA;;AA0CA,OAAO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,OAI/B;AAAA,MAHtBC,QAGsB,QAHtBA,QAGsB;AAAA,wBAFtBC,KAEsB;AAAA,MAFtBA,KAEsB,2BAFd,IAEc;AAAA,MADnBC,WACmB;;AACtB,MAAMC,QAAQ,GAAGR,WAAW,EAA5B;AACA,MAAMS,UAAU,GAAGR,aAAa,EAAhC;AAEA,SACE,oBAAC,WAAD;AACE,IAAA,SAAS,EAAEC,UAAU,CAACH,YAAY,CAAC,aAAD,EAAgBS,QAAhB,CAAb,6CACFC,UADE,GACa,CAAC,CAACA,UADf,EADvB;AAIE,IAAA,KAAK,EAAEH,KAJT;AAKE,IAAA,cAAc,EAAEH,WAAW,CAAC,oBAAD;AAL7B,KAMMI,WANN,GAQGF,QARH,CADF;AAYD,CApBM","sourcesContent":["import * as React from \"react\";\nimport { HoverPopper } from \"../HoverPopper/HoverPopper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAppearance } from \"../../hooks/useAppearance\";\nimport { classNames } from \"../../lib/classNames\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { Placement } from \"../Popper/Popper\";\nimport \"./RichTooltip.css\";\n\n// Приходится избегать экстендов от HoverPopperProps и PopperProps, потому что react-docgen не умеет в Omit.\n// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.\nexport interface RichTooltipProps {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  arrow?: boolean;\n}\n\nexport const RichTooltip: React.FC<RichTooltipProps> = ({\n  children,\n  arrow = true,\n  ...popperProps\n}: RichTooltipProps) => {\n  const platform = usePlatform();\n  const appearance = useAppearance();\n\n  return (\n    <HoverPopper\n      vkuiClass={classNames(getClassName(\"RichTooltip\", platform), {\n        [`RichTooltip--${appearance}`]: !!appearance,\n      })}\n      arrow={arrow}\n      arrowClassName={prefixClass(\"RichTooltip__arrow\")}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"file":"RichTooltip.js"}

package/dist/cssm/components/Root/Root.css

@@ -1 +1 @@
-.vkuiRoot{width:100%;height:100%;position:relative}.vkuiRoot--transition{pointer-events:none}.vkuiRoot__view{width:100%;height:100%;position:relative}.vkuiRoot--transition .vkuiRoot__view{position:fixed;left:0;top:0;overflow:hidden}.vkuiRoot__scrollCompensation{width:100%;height:100%}.vkuiRoot__view--show-back,.vkuiRoot__view--hide-forward{z-index:1}.vkuiRoot__view--show-forward,.vkuiRoot__view--hide-back{z-index:2}.vkuiRoot__popout{position:fixed;left:0;top:0;z-index:100;width:100%;height:100%}.vkuiRoot__modal{position:fixed;left:0;top:0;z-index:99;width:100%;height:100%}.vkuiRoot__modal:empty{display:none}.vkuiRoot--ios .vkuiRoot__view--show-back::after,.vkuiRoot--ios .vkuiRoot__view--hide-forward::after{position:absolute;width:100%;height:100%;left:0;top:0;display:block;content:'';background-color:#000;z-index:6}.vkuiRoot--ios .vkuiRoot__view--show-back::after{-webkit-animation:vkui-root-ios-animation-show-back .6s cubic-bezier(.36,.66,.04,1);animation:vkui-root-ios-animation-show-back .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-root-ios-animation-show-back .6s var(--ios-easing);animation:vkui-root-ios-animation-show-back .6s var(--ios-easing)}.vkuiRoot--ios .vkuiRoot__view--hide-forward::after{-webkit-animation:vkui-root-ios-animation-hide-forward .6s cubic-bezier(.36,.66,.04,1);animation:vkui-root-ios-animation-hide-forward .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-root-ios-animation-hide-forward .6s var(--ios-easing);animation:vkui-root-ios-animation-hide-forward .6s var(--ios-easing)}.vkuiRoot--ios .vkuiRoot__view--show-forward{-webkit-animation:vkui-root-ios-animation-show-forward .6s cubic-bezier(.36,.66,.04,1);animation:vkui-root-ios-animation-show-forward .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-root-ios-animation-show-forward .6s var(--ios-easing);animation:vkui-root-ios-animation-show-forward .6s var(--ios-easing)}.vkuiRoot--ios .vkuiRoot__view--hide-back{-webkit-animation:vkui-root-ios-animation-hide-back .6s cubic-bezier(.36,.66,.04,1);animation:vkui-root-ios-animation-hide-back .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-root-ios-animation-hide-back .6s var(--ios-easing);animation:vkui-root-ios-animation-hide-back .6s var(--ios-easing)}@-webkit-keyframes vkui-root-ios-animation-show-back{0%{opacity:.3}to{opacity:0}}@keyframes vkui-root-ios-animation-show-back{0%{opacity:.3}to{opacity:0}}@-webkit-keyframes vkui-root-ios-animation-hide-forward{0%{opacity:0}to{opacity:.3}}@keyframes vkui-root-ios-animation-hide-forward{0%{opacity:0}to{opacity:.3}}@-webkit-keyframes vkui-root-ios-animation-hide-back{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes vkui-root-ios-animation-hide-back{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes vkui-root-ios-animation-show-forward{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes vkui-root-ios-animation-show-forward{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.vkuiRoot--android .vkuiRoot__view--show-forward,.vkuiRoot--vkcom .vkuiRoot__view--show-forward{-webkit-animation:vkui-root-android-animation-show-forward .3s cubic-bezier(.4,0,.2,1);animation:vkui-root-android-animation-show-forward .3s cubic-bezier(.4,0,.2,1);-webkit-animation:vkui-root-android-animation-show-forward .3s var(--android-easing);animation:vkui-root-android-animation-show-forward .3s var(--android-easing)}.vkuiRoot--android .vkuiRoot__view--hide-back,.vkuiRoot--vkcom .vkuiRoot__view--hide-back{-webkit-animation:vkui-root-android-animation-hide-back .3s cubic-bezier(.4,0,.2,1);animation:vkui-root-android-animation-hide-back .3s cubic-bezier(.4,0,.2,1);-webkit-animation:vkui-root-android-animation-hide-back .3s var(--android-easing);animation:vkui-root-android-animation-hide-back .3s var(--android-easing)}@-webkit-keyframes vkui-root-android-animation-hide-back{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}to{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:0}}@keyframes vkui-root-android-animation-hide-back{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}to{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:0}}@-webkit-keyframes vkui-root-android-animation-show-forward{0%{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes vkui-root-android-animation-show-forward{0%{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.vkuiRoot--ios.vkuiRoot--no-motion .vkuiRoot__view,.vkuiRoot--android.vkuiRoot--no-motion .vkuiRoot__view,.vkuiRoot--vkcom.vkuiRoot--no-motion .vkuiRoot__view{-webkit-animation:none;animation:none}
+.vkuiRoot{width:100%;height:100%;position:relative}.vkuiRoot--transition{pointer-events:none}.vkuiRoot__view{width:100%;height:100%;position:relative}.vkuiRoot--transition .vkuiRoot__view{position:fixed;left:0;top:0;overflow:hidden}.vkuiRoot__scrollCompensation{width:100%;height:100%}.vkuiRoot__view--show-back,.vkuiRoot__view--hide-forward{z-index:1}.vkuiRoot__view--show-forward,.vkuiRoot__view--hide-back{z-index:2}.vkuiRoot__popout{position:fixed;left:0;top:0;z-index:100;width:100%;height:100%}.vkuiRoot__modal{position:fixed;left:0;top:0;z-index:99;width:100%;height:100%}.vkuiRoot__modal:empty{display:none}.vkuiRoot--ios .vkuiRoot__view--show-back::after,.vkuiRoot--ios .vkuiRoot__view--hide-forward::after{position:absolute;width:100%;height:100%;left:0;top:0;display:block;content:"";background-color:#000;z-index:6}.vkuiRoot--ios .vkuiRoot__view--show-back::after{-webkit-animation:vkui-root-ios-animation-show-back .6s cubic-bezier(.36,.66,.04,1);animation:vkui-root-ios-animation-show-back .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-root-ios-animation-show-back .6s var(--ios-easing);animation:vkui-root-ios-animation-show-back .6s var(--ios-easing)}.vkuiRoot--ios .vkuiRoot__view--hide-forward::after{-webkit-animation:vkui-root-ios-animation-hide-forward .6s cubic-bezier(.36,.66,.04,1);animation:vkui-root-ios-animation-hide-forward .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-root-ios-animation-hide-forward .6s var(--ios-easing);animation:vkui-root-ios-animation-hide-forward .6s var(--ios-easing)}.vkuiRoot--ios .vkuiRoot__view--show-forward{-webkit-animation:vkui-root-ios-animation-show-forward .6s cubic-bezier(.36,.66,.04,1);animation:vkui-root-ios-animation-show-forward .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-root-ios-animation-show-forward .6s var(--ios-easing);animation:vkui-root-ios-animation-show-forward .6s var(--ios-easing)}.vkuiRoot--ios .vkuiRoot__view--hide-back{-webkit-animation:vkui-root-ios-animation-hide-back .6s cubic-bezier(.36,.66,.04,1);animation:vkui-root-ios-animation-hide-back .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-root-ios-animation-hide-back .6s var(--ios-easing);animation:vkui-root-ios-animation-hide-back .6s var(--ios-easing)}@-webkit-keyframes vkui-root-ios-animation-show-back{0%{opacity:.3}to{opacity:0}}@keyframes vkui-root-ios-animation-show-back{0%{opacity:.3}to{opacity:0}}@-webkit-keyframes vkui-root-ios-animation-hide-forward{0%{opacity:0}to{opacity:.3}}@keyframes vkui-root-ios-animation-hide-forward{0%{opacity:0}to{opacity:.3}}@-webkit-keyframes vkui-root-ios-animation-hide-back{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes vkui-root-ios-animation-hide-back{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes vkui-root-ios-animation-show-forward{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes vkui-root-ios-animation-show-forward{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.vkuiRoot--android .vkuiRoot__view--show-forward,.vkuiRoot--vkcom .vkuiRoot__view--show-forward{-webkit-animation:vkui-root-android-animation-show-forward .3s cubic-bezier(.4,0,.2,1);animation:vkui-root-android-animation-show-forward .3s cubic-bezier(.4,0,.2,1);-webkit-animation:vkui-root-android-animation-show-forward .3s var(--android-easing);animation:vkui-root-android-animation-show-forward .3s var(--android-easing)}.vkuiRoot--android .vkuiRoot__view--hide-back,.vkuiRoot--vkcom .vkuiRoot__view--hide-back{-webkit-animation:vkui-root-android-animation-hide-back .3s cubic-bezier(.4,0,.2,1);animation:vkui-root-android-animation-hide-back .3s cubic-bezier(.4,0,.2,1);-webkit-animation:vkui-root-android-animation-hide-back .3s var(--android-easing);animation:vkui-root-android-animation-hide-back .3s var(--android-easing)}@-webkit-keyframes vkui-root-android-animation-hide-back{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}to{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:0}}@keyframes vkui-root-android-animation-hide-back{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}to{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:0}}@-webkit-keyframes vkui-root-android-animation-show-forward{0%{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes vkui-root-android-animation-show-forward{0%{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.vkuiRoot--ios.vkuiRoot--no-motion .vkuiRoot__view,.vkuiRoot--android.vkuiRoot--no-motion .vkuiRoot__view,.vkuiRoot--vkcom.vkuiRoot--no-motion .vkuiRoot__view{-webkit-animation:none;animation:none}

package/dist/cssm/components/Root/Root.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["popout", "modal", "children", "activeView", "onTransition", "nav"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from 'react';
+import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { IOS } from "../../lib/platform";
@@ -19,7 +19,7 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useTimeout } from "../../hooks/useTimeout";
 import { usePlatform } from "../../hooks/usePlatform";
 import "./Root.css";
-var warn = warnOnce('Root');
+var warn = warnOnce("Root");
 
 var Root = function Root(_ref) {
   var _ref$popout = _ref.popout,
@@ -121,15 +121,15 @@ var Root = function Root(_ref) {
   }, [transition]);
 
   var onAnimationEnd = function onAnimationEnd(e) {
-    if (['vkui-root-android-animation-hide-back', 'vkui-root-android-animation-show-forward', 'vkui-root-ios-animation-hide-back', 'vkui-root-ios-animation-show-forward'].includes(e.animationName)) {
+    if (["vkui-root-android-animation-hide-back", "vkui-root-android-animation-show-forward", "vkui-root-ios-animation-hide-back", "vkui-root-ios-animation-show-forward"].includes(e.animationName)) {
       finishTransition();
     }
   };
 
   return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames(getClassName('Root', platform), {
-      'Root--transition': !disableAnimation && transition,
-      'Root--no-motion': disableAnimation
+    vkuiClass: classNames(getClassName("Root", platform), {
+      "Root--transition": !disableAnimation && transition,
+      "Root--no-motion": disableAnimation
     })
   }), views.map(function (view) {
     var viewId = getNavId(view.props, warn);
@@ -146,12 +146,12 @@ var Root = function Root(_ref) {
         return viewNodes[viewId] = e;
       },
       onAnimationEnd: isTransitionTarget ? onAnimationEnd : null,
-      vkuiClass: classNames('Root__view', {
-        'Root__view--hide-back': transition && viewId === prevView && isBack,
-        'Root__view--hide-forward': transition && viewId === prevView && !isBack,
-        'Root__view--show-back': transition && viewId === activeView && isBack,
-        'Root__view--show-forward': transition && viewId === activeView && !isBack,
-        'Root__view--active': !transition && viewId === activeView
+      vkuiClass: classNames("Root__view", {
+        "Root__view--hide-back": transition && viewId === prevView && isBack,
+        "Root__view--hide-forward": transition && viewId === prevView && !isBack,
+        "Root__view--show-back": transition && viewId === activeView && isBack,
+        "Root__view--show-forward": transition && viewId === activeView && !isBack,
+        "Root__view--active": !transition && viewId === activeView
       })
     }, createScopedElement(NavTransitionProvider, {
       entering: transition && viewId === activeView

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"names":["React","classNames","getClassName","IOS","ConfigProviderContext","SplitColContext","AppRootPortal","ScrollContext","NavTransitionProvider","getNavId","warnOnce","useDOM","useIsomorphicLayoutEffect","useTimeout","usePlatform","warn","Root","popout","modal","children","_activeView","activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","activeElement","blur","scrollTo","from","to","fallbackTransition","useEffect","clear","set","onAnimationEnd","e","includes","animationName","viewId","isTransitionTarget","compensateScroll","marginTop"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getClassName } from '../../helpers/getClassName';\nimport { IOS } from '../../lib/platform';\nimport { ConfigProviderContext } from '../ConfigProvider/ConfigProviderContext';\nimport { SplitColContext } from '../SplitCol/SplitCol';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Root.css';\n\nconst warn = warnOnce('Root');\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте одноименное свойство у `SplitLayout`.\n   *\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте одноименное свойство у `SplitLayout`.\n   *\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst Root: React.FC<RootProps> = ({\n  popout = null, modal, children,\n  activeView: _activeView, onTransition,\n  nav,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement>>({}).current;\n\n  const { transitionMotionEnabled = true } = React.useContext(ConfigProviderContext);\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({ activeView: panel, prevView: activeView, transition: true, isBack });\n    }\n  };\n  const finishTransition = () => _setState({ activeView, prevView, isBack, transition: false });\n\n  useIsomorphicLayoutEffect(() => {\n    (document.activeElement as HTMLElement)?.blur();\n  }, [!!popout, activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition && onTransition({ isBack, from: prevView, to: activeView });\n    }\n  }, [transition]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    disableAnimation ? finishTransition() : fallbackTransition.set();\n  }, [transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if ([\n      'vkui-root-android-animation-hide-back',\n      'vkui-root-android-animation-show-forward',\n      'vkui-root-ios-animation-hide-back',\n      'vkui-root-ios-animation-show-forward',\n    ].includes(e.animationName)) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div {...restProps} vkuiClass={classNames(getClassName('Root', platform), {\n      'Root--transition': !disableAnimation && transition,\n      'Root--no-motion': disableAnimation,\n    })}>\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll = transition && (viewId === prevView || isBack && viewId === activeView);\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewNodes[viewId] = e}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : null}\n            vkuiClass={classNames('Root__view', {\n              'Root__view--hide-back': transition && viewId === prevView && isBack,\n              'Root__view--hide-forward': transition && viewId === prevView && !isBack,\n              'Root__view--show-back': transition && viewId === activeView && isBack,\n              'Root__view--show-forward': transition && viewId === activeView && !isBack,\n              'Root__view--active': !transition && viewId === activeView,\n            })}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                vkuiClass=\"Root__scrollCompensation\"\n                style={{ marginTop: compensateScroll ? -scrolls[viewId] : null }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n      <AppRootPortal>\n        {!!popout && <div vkuiClass=\"Root__popout\">{popout}</div>}\n        {!!modal && <div vkuiClass=\"Root__modal\">{modal}</div>}\n      </AppRootPortal>\n    </div>\n  );\n};\n\nexport default Root;\n"],"file":"Root.js"}
+{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"names":["React","classNames","getClassName","IOS","ConfigProviderContext","SplitColContext","AppRootPortal","ScrollContext","NavTransitionProvider","getNavId","warnOnce","useDOM","useIsomorphicLayoutEffect","useTimeout","usePlatform","warn","Root","popout","modal","children","_activeView","activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","activeElement","blur","scrollTo","from","to","fallbackTransition","useEffect","clear","set","onAnimationEnd","e","includes","animationName","viewId","isTransitionTarget","compensateScroll","marginTop"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { IOS } from \"../../lib/platform\";\nimport { ConfigProviderContext } from \"../ConfigProvider/ConfigProviderContext\";\nimport { SplitColContext } from \"../SplitCol/SplitCol\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { ScrollContext } from \"../AppRoot/ScrollContext\";\nimport { NavTransitionProvider } from \"../NavTransitionContext/NavTransitionContext\";\nimport { getNavId, NavIdProps } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./Root.css\";\n\nconst warn = warnOnce(\"Root\");\n\nexport interface RootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте одноименное свойство у `SplitLayout`.\n   *\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте одноименное свойство у `SplitLayout`.\n   *\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst Root: React.FC<RootProps> = ({\n  popout = null,\n  modal,\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement>>({}).current;\n\n  const { transitionMotionEnabled = true } = React.useContext(\n    ConfigProviderContext\n  );\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] =\n    React.useState<RootState>({\n      activeView: _activeView,\n      transition: false,\n    });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: true,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = () =>\n    _setState({ activeView, prevView, isBack, transition: false });\n\n  useIsomorphicLayoutEffect(() => {\n    (document.activeElement as HTMLElement)?.blur();\n  }, [!!popout, activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition && onTransition({ isBack, from: prevView, to: activeView });\n    }\n  }, [transition]);\n\n  const fallbackTransition = useTimeout(\n    finishTransition,\n    platform === IOS ? 600 : 300\n  );\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    disableAnimation ? finishTransition() : fallbackTransition.set();\n  }, [transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        \"vkui-root-android-animation-hide-back\",\n        \"vkui-root-android-animation-show-forward\",\n        \"vkui-root-ios-animation-hide-back\",\n        \"vkui-root-ios-animation-show-forward\",\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(getClassName(\"Root\", platform), {\n        \"Root--transition\": !disableAnimation && transition,\n        \"Root--no-motion\": disableAnimation,\n      })}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget =\n          transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition &&\n          (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : null}\n            vkuiClass={classNames(\"Root__view\", {\n              \"Root__view--hide-back\":\n                transition && viewId === prevView && isBack,\n              \"Root__view--hide-forward\":\n                transition && viewId === prevView && !isBack,\n              \"Root__view--show-back\":\n                transition && viewId === activeView && isBack,\n              \"Root__view--show-forward\":\n                transition && viewId === activeView && !isBack,\n              \"Root__view--active\": !transition && viewId === activeView,\n            })}\n          >\n            <NavTransitionProvider\n              entering={transition && viewId === activeView}\n            >\n              <div\n                vkuiClass=\"Root__scrollCompensation\"\n                style={{\n                  marginTop: compensateScroll ? -scrolls[viewId] : null,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n      <AppRootPortal>\n        {!!popout && <div vkuiClass=\"Root__popout\">{popout}</div>}\n        {!!modal && <div vkuiClass=\"Root__modal\">{modal}</div>}\n      </AppRootPortal>\n    </div>\n  );\n};\n\nexport default Root;\n"],"file":"Root.js"}

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js

@@ -16,7 +16,7 @@ var ScreenSpinner = function ScreenSpinner(props) {
   var platform = usePlatform();
   return createScopedElement(PopoutWrapper, {
     hasMask: false,
-    vkuiClass: getClassName('ScreenSpinner', platform),
+    vkuiClass: getClassName("ScreenSpinner", platform),
     className: className,
     style: style
   }, createScopedElement("div", {
@@ -27,8 +27,8 @@ var ScreenSpinner = function ScreenSpinner(props) {
 };
 
 ScreenSpinner.defaultProps = {
-  'size': 'large',
-  'aria-label': 'Пожалуйста, подождите...'
+  size: "large",
+  "aria-label": "Пожалуйста, подождите..."
 };
 export default ScreenSpinner;
 //# sourceMappingURL=ScreenSpinner.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":["Spinner","PopoutWrapper","getClassName","usePlatform","ScreenSpinner","props","style","className","restProps","platform","defaultProps"],"mappings":";;;;AACA,OAAOA,OAAP;AACA,SAASC,aAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA;;AAIA,IAAMC,aAA2C,GAAG,SAA9CA,aAA8C,CAACC,KAAD,EAA+B;AACjF,MAAQC,KAAR,GAA2CD,KAA3C,CAAQC,KAAR;AAAA,MAAeC,SAAf,GAA2CF,KAA3C,CAAeE,SAAf;AAAA,MAA6BC,SAA7B,4BAA2CH,KAA3C;;AACA,MAAMI,QAAQ,GAAGN,WAAW,EAA5B;AAEA,SACE,oBAAC,aAAD;AACE,IAAA,OAAO,EAAE,KADX;AAEE,IAAA,SAAS,EAAED,YAAY,CAAC,eAAD,EAAkBO,QAAlB,CAFzB;AAGE,IAAA,SAAS,EAAEF,SAHb;AAIE,IAAA,KAAK,EAAED;AAJT,KAME;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAAgDE,SAAhD,EADF,CANF,CADF;AAYD,CAhBD;;AAkBAJ,aAAa,CAACM,YAAd,GAA6B;AAC3B,UAAQ,OADmB;AAE3B,gBAAc;AAFa,CAA7B;AAKA,eAAeN,aAAf","sourcesContent":["import * as React from 'react';\nimport Spinner, { SpinnerProps } from '../Spinner/Spinner';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { getClassName } from '../../helpers/getClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './ScreenSpinner.css';\n\nexport type ScreenSpinnerProps = React.HTMLAttributes<HTMLDivElement> & SpinnerProps;\n\nconst ScreenSpinner: React.FC<ScreenSpinnerProps> = (props: ScreenSpinnerProps) => {\n  const { style, className, ...restProps } = props;\n  const platform = usePlatform();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      vkuiClass={getClassName('ScreenSpinner', platform)}\n      className={className}\n      style={style}\n    >\n      <div vkuiClass=\"ScreenSpinner__container\">\n        <Spinner vkuiClass=\"ScreenSpinner__spinner\" {...restProps} />\n      </div>\n    </PopoutWrapper>\n  );\n};\n\nScreenSpinner.defaultProps = {\n  'size': 'large',\n  'aria-label': 'Пожалуйста, подождите...',\n};\n\nexport default ScreenSpinner;\n"],"file":"ScreenSpinner.js"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":["Spinner","PopoutWrapper","getClassName","usePlatform","ScreenSpinner","props","style","className","restProps","platform","defaultProps","size"],"mappings":";;;;AACA,OAAOA,OAAP;AACA,SAASC,aAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA;;AAKA,IAAMC,aAA2C,GAAG,SAA9CA,aAA8C,CAClDC,KADkD,EAE/C;AACH,MAAQC,KAAR,GAA2CD,KAA3C,CAAQC,KAAR;AAAA,MAAeC,SAAf,GAA2CF,KAA3C,CAAeE,SAAf;AAAA,MAA6BC,SAA7B,4BAA2CH,KAA3C;;AACA,MAAMI,QAAQ,GAAGN,WAAW,EAA5B;AAEA,SACE,oBAAC,aAAD;AACE,IAAA,OAAO,EAAE,KADX;AAEE,IAAA,SAAS,EAAED,YAAY,CAAC,eAAD,EAAkBO,QAAlB,CAFzB;AAGE,IAAA,SAAS,EAAEF,SAHb;AAIE,IAAA,KAAK,EAAED;AAJT,KAME;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAAgDE,SAAhD,EADF,CANF,CADF;AAYD,CAlBD;;AAoBAJ,aAAa,CAACM,YAAd,GAA6B;AAC3BC,EAAAA,IAAI,EAAE,OADqB;AAE3B,gBAAc;AAFa,CAA7B;AAKA,eAAeP,aAAf","sourcesContent":["import * as React from \"react\";\nimport Spinner, { SpinnerProps } from \"../Spinner/Spinner\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./ScreenSpinner.css\";\n\nexport type ScreenSpinnerProps = React.HTMLAttributes<HTMLDivElement> &\n  SpinnerProps;\n\nconst ScreenSpinner: React.FC<ScreenSpinnerProps> = (\n  props: ScreenSpinnerProps\n) => {\n  const { style, className, ...restProps } = props;\n  const platform = usePlatform();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      vkuiClass={getClassName(\"ScreenSpinner\", platform)}\n      className={className}\n      style={style}\n    >\n      <div vkuiClass=\"ScreenSpinner__container\">\n        <Spinner vkuiClass=\"ScreenSpinner__spinner\" {...restProps} />\n      </div>\n    </PopoutWrapper>\n  );\n};\n\nScreenSpinner.defaultProps = {\n  size: \"large\",\n  \"aria-label\": \"Пожалуйста, подождите...\",\n};\n\nexport default ScreenSpinner;\n"],"file":"ScreenSpinner.js"}

package/dist/cssm/components/Search/Search.css

@@ -1 +1 @@
-.vkuiSearch{overflow:hidden;font-weight:400;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);line-height:normal}.vkuiSearch__in{position:relative}.vkuiSearch__width{height:36px;height:var(--search_default_height);white-space:nowrap;color:transparent;width:10000px}.vkuiSearch__control{display:flex;justify-content:flex-start;align-items:center;position:absolute;left:0;top:0;width:calc(100% - 1px);height:100%;border-radius:10px}.vkuiSearch__input{-webkit-appearance:none;border:0;margin:0;height:36px;height:var(--search_default_height);position:relative;padding:0 22px 0 36px;box-sizing:border-box;font-size:17px;border-radius:10px;max-width:100%;flex-grow:1;min-width:0;background-color:transparent;z-index:2;color:#000;color:var(--text_primary)}.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch--has-after .vkuiSearch__input{border-radius:10px 0 0 10px}.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder,.vkuiSearch--has-icon .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{font-size:17px;height:36px;height:var(--search_default_height);line-height:36px;line-height:var(--search_default_height);padding-left:12px;padding-right:4px;flex-shrink:0;pointer-events:none;cursor:text}.vkuiSearch__placeholder{position:absolute;left:0;width:100%;cursor:text;z-index:1;text-align:left;height:36px;height:var(--search_default_height);font-size:0;padding-left:12px;padding-right:22px;pointer-events:none;box-sizing:border-box;display:flex}.vkuiSearch__placeholder-in{height:36px;height:var(--search_default_height);display:flex;align-items:center;overflow:hidden;flex-grow:1;max-width:100%}.vkuiSearch__placeholder-text{margin-left:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{position:absolute;right:100%;top:0;display:flex;align-items:center;justify-content:center;color:#818c99;color:var(--search_bar_field_tint)}.vkuiSearch__icon{width:40px;height:36px;height:var(--search_default_height);display:flex;align-items:center;justify-content:center}.vkuiSearch__after{position:absolute;left:100%;top:0;line-height:36px;line-height:var(--search_default_height);z-index:2;-webkit-transform:translate(0);transform:translate(0);transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing);cursor:default}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{-webkit-transform:translate(-100%);transform:translate(-100%)}.vkuiSearch__after::before{position:absolute;right:calc(100% - 1px);display:block;height:100%;width:10px;content:'';pointer-events:none}.vkuiSearch__after-in{position:relative;z-index:2;cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px}.vkuiSearch__after::after{position:absolute;right:100%;display:block;height:100%;width:10px;content:'';top:0;border-radius:0 10px 10px 0;cursor:text;pointer-events:none}.vkuiGroup--plain .vkuiSearch{padding-top:4px}.vkuiSearch{background:#fff;background:var(--search_bar_background)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--search_bar_field_background)}.vkuiSearch__input{color:#000;color:var(--text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--search_bar_field_tint)}.vkuiSearch__after-width{background:#ebedf0;background:var(--search_bar_field_background);color:#ebedf0;color:var(--search_bar_field_background)}.vkuiSearch__after{background:#fff;background:var(--search_bar_background);color:#2688eb;color:var(--accent)}.vkuiSearch__after::after{background-color:#ebedf0;background-color:var(--search_bar_field_background)}.vkuiSearch__after::before{background-color:#fff;background-color:var(--search_bar_background)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#818c99;color:var(--header_search_field_tint)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--header_search_field_background);color:#ebedf0;color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--header_background);color:#2688eb;color:var(--header_tint)}.vkuiPanelHeader .vkuiSearch__after::after{background-color:#ebedf0;background-color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__after::before{background-color:#fff;background-color:var(--header_background)}.vkuiSearch--ios{padding:8px 12px}.vkuiSearch--android{padding:8px 16px}.vkuiSearch--vkcom,.vkuiPanelHeader--vkcom .vkuiSearch{background:0 0}.vkuiSearch--vkcom .vkuiSearch__in{padding-top:6px;padding-bottom:6px}.vkuiSearch--vkcom .vkuiSearch__input{font-size:15px;line-height:20px;padding-left:40px}.vkuiSearch--vkcom .vkuiSearch__placeholder{padding-left:16px}.vkuiSearch--vkcom .vkuiSearch__icons{top:4px;right:calc(100% + 8px)}.vkuiSearch--vkcom.vkuiSearch--has-value .vkuiSearch__input{padding-right:56px}.vkuiSearch--vkcom.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input{padding-right:92px}.vkuiSearch--vkcom .vkuiSearch__icon{width:40px;height:40px}.vkuiSearch--vkcom .vkuiSearch__icon:hover{background-color:rgba(0,0,0,.04);background-color:var(--background_hover);border-radius:50%}.vkuiSearch--vkcom .vkuiSearch__control{background-color:transparent}.vkuiPanelHeader--vkcom .vkuiSearch__separator{display:none}.vkuiSearch--vkcom .vkuiSearch__separator{color:#e1e3e6;color:var(--input_border)}.vkuiGroup--card .vkuiSearch--vkcom{margin:0 -8px}.vkuiGroup--card .vkuiSearch--vkcom:first-child{margin-top:-8px}.vkuiGroup--card .vkuiSearch--vkcom:not(:last-child){margin-bottom:8px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__placeholder{padding-left:20px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__input{padding-left:44px}
+.vkuiSearch{overflow:hidden;font-weight:400;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);line-height:normal}.vkuiSearch__in{position:relative}.vkuiSearch__width{height:36px;height:var(--search_default_height);white-space:nowrap;color:transparent;width:10000px}.vkuiSearch__control{display:flex;justify-content:flex-start;align-items:center;position:absolute;left:0;top:0;width:calc(100% - 1px);height:100%;border-radius:10px}.vkuiSearch__input{-webkit-appearance:none;border:0;margin:0;height:36px;height:var(--search_default_height);position:relative;padding:0 22px 0 36px;box-sizing:border-box;font-size:17px;border-radius:10px;max-width:100%;flex-grow:1;min-width:0;background-color:transparent;z-index:2;color:#000;color:var(--text_primary)}.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch--has-after .vkuiSearch__input{border-radius:10px 0 0 10px}.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder,.vkuiSearch--has-icon .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{font-size:17px;height:36px;height:var(--search_default_height);line-height:36px;line-height:var(--search_default_height);padding-left:12px;padding-right:4px;flex-shrink:0;pointer-events:none;cursor:text}.vkuiSearch__placeholder{position:absolute;left:0;width:100%;cursor:text;z-index:1;text-align:left;height:36px;height:var(--search_default_height);font-size:0;padding-left:12px;padding-right:22px;pointer-events:none;box-sizing:border-box;display:flex}.vkuiSearch__placeholder-in{height:36px;height:var(--search_default_height);display:flex;align-items:center;overflow:hidden;flex-grow:1;max-width:100%}.vkuiSearch__placeholder-text{margin-left:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{position:absolute;right:100%;top:0;display:flex;align-items:center;justify-content:center;color:#818c99;color:var(--search_bar_field_tint)}.vkuiSearch__icon{width:40px;height:36px;height:var(--search_default_height);display:flex;align-items:center;justify-content:center}.vkuiSearch__after{position:absolute;left:100%;top:0;line-height:36px;line-height:var(--search_default_height);z-index:2;-webkit-transform:translate(0);transform:translate(0);transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing);cursor:default}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{-webkit-transform:translate(-100%);transform:translate(-100%)}.vkuiSearch__after::before{position:absolute;right:calc(100% - 1px);display:block;height:100%;width:10px;content:"";pointer-events:none}.vkuiSearch__after-in{position:relative;z-index:2;cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px}.vkuiSearch__after::after{position:absolute;right:100%;display:block;height:100%;width:10px;content:"";top:0;border-radius:0 10px 10px 0;cursor:text;pointer-events:none}.vkuiGroup--plain .vkuiSearch{padding-top:4px}.vkuiSearch{background:#fff;background:var(--search_bar_background)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--search_bar_field_background)}.vkuiSearch__input{color:#000;color:var(--text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--search_bar_field_tint)}.vkuiSearch__after-width{background:#ebedf0;background:var(--search_bar_field_background);color:#ebedf0;color:var(--search_bar_field_background)}.vkuiSearch__after{background:#fff;background:var(--search_bar_background);color:#2688eb;color:var(--accent)}.vkuiSearch__after::after{background-color:#ebedf0;background-color:var(--search_bar_field_background)}.vkuiSearch__after::before{background-color:#fff;background-color:var(--search_bar_background)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#818c99;color:var(--header_search_field_tint)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--header_search_field_background);color:#ebedf0;color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--header_background);color:#2688eb;color:var(--header_tint)}.vkuiPanelHeader .vkuiSearch__after::after{background-color:#ebedf0;background-color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__after::before{background-color:#fff;background-color:var(--header_background)}.vkuiSearch--ios{padding:8px 12px}.vkuiSearch--android{padding:8px 16px}.vkuiSearch--vkcom,.vkuiPanelHeader--vkcom .vkuiSearch{background:0 0}.vkuiSearch--vkcom .vkuiSearch__in{padding-top:6px;padding-bottom:6px}.vkuiSearch--vkcom .vkuiSearch__input{font-size:15px;line-height:20px;padding-left:40px}.vkuiSearch--vkcom .vkuiSearch__placeholder{padding-left:16px}.vkuiSearch--vkcom .vkuiSearch__icons{top:4px;right:calc(100% + 8px)}.vkuiSearch--vkcom.vkuiSearch--has-value .vkuiSearch__input{padding-right:56px}.vkuiSearch--vkcom.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input{padding-right:92px}.vkuiSearch--vkcom .vkuiSearch__icon{width:40px;height:40px}.vkuiSearch--vkcom .vkuiSearch__icon:hover{background-color:rgba(0,0,0,.04);background-color:var(--background_hover);border-radius:50%}.vkuiSearch--vkcom .vkuiSearch__control{background-color:transparent}.vkuiPanelHeader--vkcom .vkuiSearch__separator{display:none}.vkuiSearch--vkcom .vkuiSearch__separator{color:#e1e3e6;color:var(--input_border)}.vkuiGroup--card .vkuiSearch--vkcom{margin:0 -8px}.vkuiGroup--card .vkuiSearch--vkcom:first-child{margin-top:-8px}.vkuiGroup--card .vkuiSearch--vkcom:not(:last-child){margin-bottom:8px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__placeholder{padding-left:20px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__input{padding-left:44px}