@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/SimpleCell/SimpleCell.module.css

@@ -1 +1 @@
-.vkuiSimpleCell{align-items:center;color:#000;color:var(--vkui--color_text_primary);display:flex;min-height:48px;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);text-decoration:none;white-space:nowrap}.vkuiSimpleCell--mult{white-space:normal}.vkuiSimpleCell--mult .vkuiSimpleCell__children{text-overflow:clip}.vkuiSimpleCell__main{flex-grow:1;max-width:100%;min-width:0;overflow:hidden}.vkuiSimpleCell>.vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent);flex-shrink:0;padding-bottom:10px;padding-right:12px;padding-top:10px}.vkuiSimpleCell>.vkuiIcon--28{padding-right:16px}.vkuiSimpleCell__subhead{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiSimpleCell__text{overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell__extraSubtitle,.vkuiSimpleCell__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiSimpleCell .vkuiSimpleCell__content{align-content:flex-start;align-items:center;display:flex;justify-content:space-between;max-width:100%}.vkuiSimpleCell:not(.vkuiSimpleCell--mult) .vkuiSimpleCell__content{justify-content:flex-start}.vkuiSimpleCell__children{color:inherit;display:block;overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell--mult .vkuiSimpleCell__children,.vkuiSimpleCell--mult .vkuiSimpleCell__subtitle{flex:1 1 auto}.vkuiSimpleCell__badge{color:#2688eb;color:var(--vkui--color_icon_accent);display:inline-block;flex-grow:0;flex-shrink:0}.vkuiSimpleCell__content>:not(:last-child){margin-right:4px}.vkuiSimpleCell__indicator{color:#818c99;color:var(--vkui--color_text_secondary);min-width:0;overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.vkuiSimpleCell__after{align-items:center;color:#2688eb;color:var(--vkui--color_icon_accent);display:flex;flex-shrink:0}.vkuiSimpleCell__after>.vkuiIcon{padding-left:8px}.vkuiSimpleCell__after>.vkuiIcon:last-child{padding-right:2px}.vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-12px}.vkuiSimpleCell__typography{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_footnote--font_family--regular);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}.vkuiSimpleCell--ios .vkuiSimpleCell__indicator,.vkuiSimpleCell--ios .vkuiSimpleCell__main{padding-bottom:11px;padding-top:9px}.vkuiSimpleCell--ios>.vkuiIcon--28{padding-left:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIcon--chevron_24{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);padding-left:12px;padding-right:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-9px}.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}}.vkuiSimpleCell--android .vkuiSimpleCell__indicator,.vkuiSimpleCell--android .vkuiSimpleCell__main,.vkuiSimpleCell--vkcom .vkuiSimpleCell__indicator,.vkuiSimpleCell--vkcom .vkuiSimpleCell__main{padding-bottom:10px;padding-top:11px}.vkuiSimpleCell--sizeY-compact{min-height:44px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSimpleCell--sizeY-none{min-height:44px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}}.vkuiFormItem>.vkuiSimpleCell{margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}.vkuiSimpleCell__main>:not(:first-child){margin-top:2px}
+.vkuiSimpleCell{align-items:center;color:#000;color:var(--vkui--color_text_primary);display:flex;min-height:48px;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);text-decoration:none;white-space:nowrap}.vkuiSimpleCell--mult{white-space:normal}.vkuiSimpleCell--mult .vkuiSimpleCell__children{text-overflow:clip}.vkuiSimpleCell__main{flex-grow:1;max-width:100%;min-width:0;overflow:hidden}.vkuiSimpleCell>.vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent);flex-shrink:0;padding-bottom:10px;padding-right:12px;padding-top:10px}.vkuiSimpleCell>.vkuiIcon--28{padding-right:16px}.vkuiSimpleCell__subhead{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiSimpleCell__text{overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell__extraSubtitle,.vkuiSimpleCell__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiSimpleCell .vkuiSimpleCell__content{align-content:flex-start;align-items:center;display:flex;justify-content:space-between;max-width:100%}.vkuiSimpleCell:not(.vkuiSimpleCell--mult) .vkuiSimpleCell__content{justify-content:flex-start}.vkuiSimpleCell__children{color:inherit;display:block;overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell--mult .vkuiSimpleCell__children,.vkuiSimpleCell--mult .vkuiSimpleCell__subtitle{flex:1 1 auto}.vkuiSimpleCell__badge{color:#2688eb;color:var(--vkui--color_icon_accent);display:inline-block;flex-grow:0;flex-shrink:0}.vkuiSimpleCell__content>:not(:last-child){margin-right:4px}.vkuiSimpleCell__indicator{color:#818c99;color:var(--vkui--color_text_secondary);min-width:0;overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.vkuiSimpleCell__after{align-items:center;color:#2688eb;color:var(--vkui--color_icon_accent);display:flex;flex-shrink:0}.vkuiSimpleCell__after>.vkuiIcon{padding-left:8px}.vkuiSimpleCell__after>.vkuiIcon:last-child{padding-right:2px}.vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-12px}.vkuiSimpleCell__typography{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_footnote--font_family--regular);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}.vkuiSimpleCell--ios .vkuiSimpleCell__indicator,.vkuiSimpleCell--ios .vkuiSimpleCell__main{padding-bottom:11px;padding-top:9px}.vkuiSimpleCell--ios>.vkuiIcon--28{padding-left:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIcon--chevron_24{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);padding-left:12px;padding-right:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-9px}.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}}.vkuiSimpleCell--android .vkuiSimpleCell__indicator,.vkuiSimpleCell--android .vkuiSimpleCell__main,.vkuiSimpleCell--vkcom .vkuiSimpleCell__indicator,.vkuiSimpleCell--vkcom .vkuiSimpleCell__main{padding-bottom:10px;padding-top:11px}.vkuiSimpleCell--sizeY-compact{min-height:44px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSimpleCell--sizeY-none{min-height:44px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}}.vkuiInternalFormItem>.vkuiSimpleCell{margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}.vkuiSimpleCell__main>:not(:first-child){margin-top:2px}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { UniversalSliderProps } from '../RangeSlider/UniversalSlider';
-export declare type SliderProps = UniversalSliderProps<number>;
+export type SliderProps = UniversalSliderProps<number>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */

package/dist/cssm/components/Slider/Slider.js

@@ -1,44 +1,37 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onChange", "min", "max", "defaultValue", "value"];
 import * as React from 'react';
 import { clamp } from '../../helpers/math';
 import { UniversalSlider } from '../RangeSlider/UniversalSlider';
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
- */
-export var Slider = function Slider(_ref) {
-  var onChange = _ref.onChange,
-    _ref$min = _ref.min,
-    min = _ref$min === void 0 ? 0 : _ref$min,
-    _ref$max = _ref.max,
-    max = _ref$max === void 0 ? 100 : _ref$max,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? min : _ref$defaultValue,
-    value = _ref.value,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var isControlled = value !== undefined;
-  var _React$useState = React.useState(defaultValue),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    localValue = _React$useState2[0],
-    setValue = _React$useState2[1];
-  var _value = clamp(isControlled ? value : localValue, min, max);
-  var handleChange = React.useCallback(function (nextValue, event) {
-    if (props.disabled || _value === nextValue[1]) {
-      return;
-    }
-    !isControlled && setValue(nextValue[1]);
-    onChange && onChange(nextValue[1], event);
-  }, [props.disabled, _value, isControlled, onChange]);
-  var rangeValue = React.useMemo(function () {
-    return [null, _value];
-  }, [_value]);
-  return /*#__PURE__*/React.createElement(UniversalSlider, _extends({}, props, {
-    value: rangeValue,
-    onChange: handleChange,
-    min: min,
-    max: max
-  }));
+ */ export const Slider = ({ onChange , min =0 , max =100 , defaultValue =min , value , ...props })=>{
+    const isControlled = value !== undefined;
+    const [localValue, setValue] = React.useState(defaultValue);
+    const _value = clamp(isControlled ? value : localValue, min, max);
+    const handleChange = React.useCallback((nextValue, event)=>{
+        if (props.disabled || _value === nextValue[1]) {
+            return;
+        }
+        !isControlled && setValue(nextValue[1]);
+        onChange && onChange(nextValue[1], event);
+    }, [
+        props.disabled,
+        _value,
+        isControlled,
+        onChange
+    ]);
+    const rangeValue = React.useMemo(()=>[
+            null,
+            _value
+        ], [
+        _value
+    ]);
+    return /*#__PURE__*/ React.createElement(UniversalSlider, {
+        ...props,
+        value: rangeValue,
+        onChange: handleChange,
+        min: min,
+        max: max
+    });
 };
+
 //# sourceMappingURL=Slider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["React","clamp","UniversalSlider","Slider","onChange","min","max","defaultValue","value","props","isControlled","undefined","useState","localValue","setValue","_value","handleChange","useCallback","nextValue","event","disabled","rangeValue","useMemo"],"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport {\n  UniversalSlider,\n  UniversalSliderProps,\n  UniversalValue,\n} from '../RangeSlider/UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type SliderProps = UniversalSliderProps<number>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = min,\n  value,\n  ...props\n}: SliderProps) => {\n  const isControlled = value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const _value = clamp(isControlled ? value : localValue, min, max);\n\n  const handleChange: UniversalSliderProps<UniversalValue>['onChange'] = React.useCallback(\n    (nextValue: UniversalValue, event: TouchEvent) => {\n      if (props.disabled || _value === nextValue[1]) {\n        return;\n      }\n      !isControlled && setValue(nextValue[1]);\n      onChange && onChange(nextValue[1], event);\n    },\n    [props.disabled, _value, isControlled, onChange],\n  );\n\n  const rangeValue: [null, number] = React.useMemo(() => [null, _value], [_value]);\n  return (\n    <UniversalSlider {...props} value={rangeValue} onChange={handleChange} min={min} max={max} />\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SACEC,eAAe,QAGV,gCAAgC;AAKvC;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAOA;EAAA,IANjBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAGF,GAAG;IAClBG,KAAK,QAALA,KAAK;IACFC,KAAK;EAER,IAAMC,YAAY,GAAGF,KAAK,KAAKG,SAAS;EAExC,sBAA+BX,KAAK,CAACY,QAAQ,CAACL,YAAY,CAAC;IAAA;IAApDM,UAAU;IAAEC,QAAQ;EAC3B,IAAMC,MAAM,GAAGd,KAAK,CAACS,YAAY,GAAGF,KAAK,GAAGK,UAAU,EAAER,GAAG,EAAEC,GAAG,CAAC;EAEjE,IAAMU,YAA8D,GAAGhB,KAAK,CAACiB,WAAW,CACtF,UAACC,SAAyB,EAAEC,KAAiB,EAAK;IAChD,IAAIV,KAAK,CAACW,QAAQ,IAAIL,MAAM,KAAKG,SAAS,CAAC,CAAC,CAAC,EAAE;MAC7C;IACF;IACA,CAACR,YAAY,IAAII,QAAQ,CAACI,SAAS,CAAC,CAAC,CAAC,CAAC;IACvCd,QAAQ,IAAIA,QAAQ,CAACc,SAAS,CAAC,CAAC,CAAC,EAAEC,KAAK,CAAC;EAC3C,CAAC,EACD,CAACV,KAAK,CAACW,QAAQ,EAAEL,MAAM,EAAEL,YAAY,EAAEN,QAAQ,CAAC,CACjD;EAED,IAAMiB,UAA0B,GAAGrB,KAAK,CAACsB,OAAO,CAAC;IAAA,OAAM,CAAC,IAAI,EAAEP,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAChF,oBACE,oBAAC,eAAe,eAAKN,KAAK;IAAE,KAAK,EAAEY,UAAW;IAAC,QAAQ,EAAEL,YAAa;IAAC,GAAG,EAAEX,GAAI;IAAC,GAAG,EAAEC;EAAI,GAAG;AAEjG,CAAC"}
+{"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport {\n  UniversalSlider,\n  UniversalSliderProps,\n  UniversalValue,\n} from '../RangeSlider/UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type SliderProps = UniversalSliderProps<number>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = min,\n  value,\n  ...props\n}: SliderProps) => {\n  const isControlled = value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const _value = clamp(isControlled ? value : localValue, min, max);\n\n  const handleChange: UniversalSliderProps<UniversalValue>['onChange'] = React.useCallback(\n    (nextValue: UniversalValue, event: TouchEvent) => {\n      if (props.disabled || _value === nextValue[1]) {\n        return;\n      }\n      !isControlled && setValue(nextValue[1]);\n      onChange && onChange(nextValue[1], event);\n    },\n    [props.disabled, _value, isControlled, onChange],\n  );\n\n  const rangeValue: [null, number] = React.useMemo(() => [null, _value], [_value]);\n  return (\n    <UniversalSlider {...props} value={rangeValue} onChange={handleChange} min={min} max={max} />\n  );\n};\n"],"names":["React","clamp","UniversalSlider","Slider","onChange","min","max","defaultValue","value","props","isControlled","undefined","localValue","setValue","useState","_value","handleChange","useCallback","nextValue","event","disabled","rangeValue","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SACEC,eAAe,QAGV,iCAAiC;AAKxC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,SAAQ,EACRC,KAAM,EAAC,EACPC,KAAM,IAAG,EACTC,cAAeF,IAAG,EAClBG,MAAK,EACL,GAAGC,OACS,GAAK;IACjB,MAAMC,eAAeF,UAAUG;IAE/B,MAAM,CAACC,YAAYC,SAAS,GAAGb,MAAMc,QAAQ,CAACP;IAC9C,MAAMQ,SAASd,MAAMS,eAAeF,QAAQI,UAAU,EAAEP,KAAKC;IAE7D,MAAMU,eAAiEhB,MAAMiB,WAAW,CACtF,CAACC,WAA2BC,QAAsB;QAChD,IAAIV,MAAMW,QAAQ,IAAIL,WAAWG,SAAS,CAAC,EAAE,EAAE;YAC7C;QACF,CAAC;QACD,CAACR,gBAAgBG,SAASK,SAAS,CAAC,EAAE;QACtCd,YAAYA,SAASc,SAAS,CAAC,EAAE,EAAEC;IACrC,GACA;QAACV,MAAMW,QAAQ;QAAEL;QAAQL;QAAcN;KAAS;IAGlD,MAAMiB,aAA6BrB,MAAMsB,OAAO,CAAC,IAAM;YAAC,IAAI;YAAEP;SAAO,EAAE;QAACA;KAAO;IAC/E,qBACE,oBAACb;QAAiB,GAAGO,KAAK;QAAED,OAAOa;QAAYjB,UAAUY;QAAcX,KAAKA;QAAKC,KAAKA;;AAE1F,EAAE"}

package/dist/cssm/components/Snackbar/Snackbar.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "layout", "action", "before", "after", "duration", "onActionClick", "onClose", "mode", "className", "subtitle"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
@@ -16,150 +12,123 @@ import { Button } from '../Button/Button';
 import { Touch } from '../Touch/Touch';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import "./Snackbar.module.css";
+import styles from './Snackbar.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
- */
-export var Snackbar = function Snackbar(_ref) {
-  var children = _ref.children,
-    _ref$layout = _ref.layout,
-    layoutProps = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
-    action = _ref.action,
-    before = _ref.before,
-    after = _ref.after,
-    _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? 4000 : _ref$duration,
-    onActionClick = _ref.onActionClick,
-    onClose = _ref.onClose,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
-    className = _ref.className,
-    subtitle = _ref.subtitle,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  var _useAdaptivityWithJSM = useAdaptivityWithJSMediaQueries(),
-    viewWidth = _useAdaptivityWithJSM.viewWidth;
-  var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-  var _useWaitTransitionFin = useWaitTransitionFinish(),
-    waitTransitionFinish = _useWaitTransitionFin.waitTransitionFinish;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    closing = _React$useState2[0],
-    setClosing = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    touched = _React$useState4[0],
-    setTouched = _React$useState4[1];
-  var shiftXPercentRef = React.useRef(0);
-  var shiftXCurrentRef = React.useRef(0);
-  var bodyElRef = React.useRef(null);
-  var innerElRef = React.useRef(null);
-  var animationFrameRef = React.useRef(null);
-  var transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;
-  var close = function close() {
-    setClosing(true);
-    waitTransitionFinish(innerElRef.current, function () {
-      onClose();
-    }, transitionFinishDurationFallback);
-  };
-  var handleActionClick = function handleActionClick(e) {
-    close();
-    if (action && typeof onActionClick === 'function') {
-      onActionClick(e);
-    }
-  };
-  var closeTimeout = useTimeout(close, duration);
-  var setBodyTransform = function setBodyTransform(percent) {
-    if (animationFrameRef.current !== null) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-    animationFrameRef.current = requestAnimationFrame(function () {
-      if (bodyElRef.current) {
-        bodyElRef.current.style.transform = "translate3d(".concat(percent, "%, 0, 0)");
-      }
-    });
-  };
-  var onTouchStart = closeTimeout.clear;
-  var onTouchMoveX = function onTouchMoveX(event) {
-    var _bodyElRef$current$of, _bodyElRef$current;
-    var shiftX = event.shiftX,
-      originalEvent = event.originalEvent;
-    originalEvent.preventDefault();
-    if (!touched) {
-      setTouched(true);
-    }
-    shiftXPercentRef.current = shiftX / ((_bodyElRef$current$of = (_bodyElRef$current = bodyElRef.current) === null || _bodyElRef$current === void 0 ? void 0 : _bodyElRef$current.offsetWidth) !== null && _bodyElRef$current$of !== void 0 ? _bodyElRef$current$of : 0) * 100;
-    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);
-    setBodyTransform(shiftXCurrentRef.current);
-  };
-  var onTouchEnd = function onTouchEnd(e) {
-    var callback;
-    if (touched) {
-      var shiftXCurrent = shiftXCurrentRef.current;
-      var expectTranslateY = shiftXCurrent / e.duration * 240 * 0.6;
-      shiftXCurrent = shiftXCurrent + expectTranslateY;
-      if (isDesktop && shiftXCurrent <= -50) {
-        closeTimeout.clear();
-        waitTransitionFinish(bodyElRef.current, function () {
-          onClose();
+ */ export const Snackbar = ({ children , layout: layoutProps = 'horizontal' , action , before , after , duration =4000 , onActionClick , onClose , mode ='default' , className , subtitle , ...restProps })=>{
+    const platform = usePlatform();
+    const { viewWidth  } = useAdaptivityWithJSMediaQueries();
+    const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
+    const { waitTransitionFinish  } = useWaitTransitionFinish();
+    const [closing, setClosing] = React.useState(false);
+    const [touched, setTouched] = React.useState(false);
+    const shiftXPercentRef = React.useRef(0);
+    const shiftXCurrentRef = React.useRef(0);
+    const bodyElRef = React.useRef(null);
+    const innerElRef = React.useRef(null);
+    const animationFrameRef = React.useRef(null);
+    const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;
+    const close = ()=>{
+        setClosing(true);
+        waitTransitionFinish(innerElRef.current, ()=>{
+            onClose();
         }, transitionFinishDurationFallback);
-        setBodyTransform(-120);
-      } else if (!isDesktop && shiftXCurrent >= 50) {
-        closeTimeout.clear();
-        waitTransitionFinish(bodyElRef.current, function () {
-          onClose();
-        }, transitionFinishDurationFallback);
-        setBodyTransform(120);
-      } else {
-        callback = function callback() {
-          closeTimeout.set();
-          setBodyTransform(0);
-        };
-      }
-    } else {
-      closeTimeout.set();
-    }
-    setTouched(false);
-    callback && requestAnimationFrame(callback);
-  };
-  React.useEffect(function () {
-    return closeTimeout.set();
-  }, [closeTimeout]);
-  var layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;
-  return /*#__PURE__*/React.createElement(AppRootPortal, null, /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiSnackbar", platform === Platform.IOS && "vkuiSnackbar--ios", styles["Snackbar--layout-".concat(layout)], styles["Snackbar--mode-".concat(mode)], closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className)
-  }), /*#__PURE__*/React.createElement(Touch, {
-    className: "vkuiSnackbar__in",
-    getRootRef: innerElRef,
-    onStart: onTouchStart,
-    onMoveX: onTouchMoveX,
-    onEnd: onTouchEnd
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSnackbar__body",
-    ref: bodyElRef
-  }, before && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSnackbar__before"
-  }, before), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSnackbar__content"
-  }, /*#__PURE__*/React.createElement(Paragraph, {
-    className: "vkuiSnackbar__content-text"
-  }, children), subtitle && !action && /*#__PURE__*/React.createElement(Subhead, {
-    className: "vkuiSnackbar__content-subtitle"
-  }, subtitle), action && !subtitle && /*#__PURE__*/React.createElement(Button, {
-    align: "left",
-    mode: "link",
-    appearance: mode === 'dark' ? 'overlay' : 'accent',
-    size: "s",
-    className: "vkuiSnackbar__action",
-    onClick: handleActionClick
-  }, action)), after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSnackbar__after"
-  }, after)))));
-};
-var styles = {
-  "Snackbar--layout-vertical": "vkuiSnackbar--layout-vertical",
-  "Snackbar--layout-horizontal": "vkuiSnackbar--layout-horizontal",
-  "Snackbar--mode-dark": "vkuiSnackbar--mode-dark",
-  "Snackbar--mode-default": "vkuiSnackbar--mode-default"
+    };
+    const handleActionClick = (e)=>{
+        close();
+        if (action && typeof onActionClick === 'function') {
+            onActionClick(e);
+        }
+    };
+    const closeTimeout = useTimeout(close, duration);
+    const setBodyTransform = (percent)=>{
+        if (animationFrameRef.current !== null) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = requestAnimationFrame(()=>{
+            if (bodyElRef.current) {
+                bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;
+            }
+        });
+    };
+    const onTouchStart = closeTimeout.clear;
+    const onTouchMoveX = (event)=>{
+        const { shiftX , originalEvent  } = event;
+        originalEvent.preventDefault();
+        if (!touched) {
+            setTouched(true);
+        }
+        shiftXPercentRef.current = shiftX / (bodyElRef.current?.offsetWidth ?? 0) * 100;
+        shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);
+        setBodyTransform(shiftXCurrentRef.current);
+    };
+    const onTouchEnd = (e)=>{
+        let callback;
+        if (touched) {
+            let shiftXCurrent = shiftXCurrentRef.current;
+            const expectTranslateY = shiftXCurrent / e.duration * 240 * 0.6;
+            shiftXCurrent = shiftXCurrent + expectTranslateY;
+            if (isDesktop && shiftXCurrent <= -50) {
+                closeTimeout.clear();
+                waitTransitionFinish(bodyElRef.current, ()=>{
+                    onClose();
+                }, transitionFinishDurationFallback);
+                setBodyTransform(-120);
+            } else if (!isDesktop && shiftXCurrent >= 50) {
+                closeTimeout.clear();
+                waitTransitionFinish(bodyElRef.current, ()=>{
+                    onClose();
+                }, transitionFinishDurationFallback);
+                setBodyTransform(120);
+            } else {
+                callback = ()=>{
+                    closeTimeout.set();
+                    setBodyTransform(0);
+                };
+            }
+        } else {
+            closeTimeout.set();
+        }
+        setTouched(false);
+        callback && requestAnimationFrame(callback);
+    };
+    React.useEffect(()=>closeTimeout.set(), [
+        closeTimeout
+    ]);
+    const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;
+    return /*#__PURE__*/ React.createElement(AppRootPortal, null, /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        className: classNames(styles['Snackbar'], platform === Platform.IOS && styles['Snackbar--ios'], {
+            vertical: styles['Snackbar--layout-vertical'],
+            horizontal: styles['Snackbar--layout-horizontal']
+        }[layout], mode === 'dark' && styles['Snackbar--mode-dark'], closing && styles['Snackbar--closing'], touched && styles['Snackbar--touched'], isDesktop && styles['Snackbar--desktop'], className)
+    }, /*#__PURE__*/ React.createElement(Touch, {
+        className: styles['Snackbar__in'],
+        getRootRef: innerElRef,
+        onStart: onTouchStart,
+        onMoveX: onTouchMoveX,
+        onEnd: onTouchEnd
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Snackbar__body'],
+        ref: bodyElRef
+    }, before && /*#__PURE__*/ React.createElement("div", {
+        className: styles['Snackbar__before']
+    }, before), /*#__PURE__*/ React.createElement("div", {
+        className: styles['Snackbar__content']
+    }, /*#__PURE__*/ React.createElement(Paragraph, {
+        className: styles['Snackbar__content-text']
+    }, children), subtitle && !action && /*#__PURE__*/ React.createElement(Subhead, {
+        className: styles['Snackbar__content-subtitle']
+    }, subtitle), action && !subtitle && /*#__PURE__*/ React.createElement(Button, {
+        align: "left",
+        mode: "link",
+        appearance: mode === 'dark' ? 'overlay' : 'accent',
+        size: "s",
+        className: styles['Snackbar__action'],
+        onClick: handleActionClick
+    }, action)), after && /*#__PURE__*/ React.createElement("div", {
+        className: styles['Snackbar__after']
+    }, after)))));
 };
+
 //# sourceMappingURL=Snackbar.js.map

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

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

package/dist/cssm/components/Snackbar/Snackbar.module.css

@@ -1 +1 @@
-.vkuiSnackbar{bottom:0;left:auto;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:100;z-index:var(--vkui--z_index_popout)}.vkuiEpic--hasTabbar .vkuiSnackbar{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiSnackbar__body,.vkuiSnackbar__in{transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s var(--vkui--animation_easing_platform)}.vkuiSnackbar__in{animation:vkui-animation-snackbar-intro-vertical .34s cubic-bezier(.4,0,.2,1);animation:vkui-animation-snackbar-intro-vertical .34s var(--vkui--animation_easing_platform);padding:8px}.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(0,140%,0)}.vkuiSnackbar__body{align-items:center;background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);box-sizing:border-box;display:flex;min-height:56px;padding:12px}.vkuiSnackbar--mode-dark .vkuiSnackbar__body{background:#2d2d2e;background:var(--vkui--color_background_contrast_inverse)}.vkuiSnackbar__before{margin-right:12px}.vkuiSnackbar__after{margin-left:12px}.vkuiSnackbar__content{align-items:center;display:flex;flex:1;overflow:hidden}.vkuiSnackbar--layout-vertical .vkuiSnackbar__content{align-items:flex-start;flex-direction:column}.vkuiSnackbar__content-text{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#000;color:var(--vkui--color_text_primary);display:-webkit-box;flex:1;overflow:hidden;width:100%}.vkuiSnackbar__content-subtitle{color:#6d7885;color:var(--vkui--color_text_subhead);margin-top:2px}.vkuiSnackbar--mode-dark .vkuiSnackbar__content-text{color:#fff;color:var(--vkui--color_text_contrast)}.vkuiSnackbar--layout-horizontal .vkuiSnackbar__action{margin-left:12px;position:relative}.vkuiSnackbar--layout-vertical .vkuiSnackbar__action{margin-top:2px;min-height:auto}.vkuiModalRoot .vkuiSnackbar{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom)}.vkuiSnackbar--ios .vkuiSnackbar__body,.vkuiSnackbar--ios .vkuiSnackbar__in{transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiSnackbar--desktop{bottom:0;left:0;max-width:351px}.vkuiSnackbar--desktop .vkuiSnackbar__in{animation-name:vkui-animation-snackbar-intro-horizontal;padding:12px}.vkuiSnackbar--desktop.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(-140%,0,0)}.vkuiSnackbar--touched .vkuiSnackbar__body{transition:none}@keyframes vkui-animation-snackbar-intro-vertical{0%{transform:translate3d(0,140%,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-snackbar-intro-horizontal{0%{transform:translate3d(-140%,0,0)}to{transform:translateZ(0)}}
+.vkuiSnackbar{bottom:0;left:auto;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:100;z-index:var(--vkui--z_index_popout)}.vkuiInternalEpic--hasTabbar .vkuiSnackbar{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiSnackbar__body,.vkuiSnackbar__in{transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s var(--vkui--animation_easing_platform)}.vkuiSnackbar__in{animation:vkui-animation-snackbar-intro-vertical .34s cubic-bezier(.4,0,.2,1);animation:vkui-animation-snackbar-intro-vertical .34s var(--vkui--animation_easing_platform);padding:8px}.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(0,140%,0)}.vkuiSnackbar__body{align-items:center;background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);box-sizing:border-box;display:flex;min-height:56px;padding:12px}.vkuiSnackbar--mode-dark .vkuiSnackbar__body{background:#2d2d2e;background:var(--vkui--color_background_contrast_inverse)}.vkuiSnackbar__before{margin-right:12px}.vkuiSnackbar__after{margin-left:12px}.vkuiSnackbar__content{align-items:center;display:flex;flex:1;overflow:hidden}.vkuiSnackbar--layout-vertical .vkuiSnackbar__content{align-items:flex-start;flex-direction:column}.vkuiSnackbar__content-text{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#000;color:var(--vkui--color_text_primary);display:-webkit-box;flex:1;overflow:hidden;width:100%}.vkuiSnackbar__content-subtitle{color:#6d7885;color:var(--vkui--color_text_subhead);margin-top:2px}.vkuiSnackbar--mode-dark .vkuiSnackbar__content-text{color:#fff;color:var(--vkui--color_text_contrast)}.vkuiSnackbar--layout-horizontal .vkuiSnackbar__action{margin-left:12px;position:relative}.vkuiSnackbar--layout-vertical .vkuiSnackbar__action{margin-top:2px;min-height:auto}.vkuiModalRoot .vkuiSnackbar{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom)}.vkuiSnackbar--ios .vkuiSnackbar__body,.vkuiSnackbar--ios .vkuiSnackbar__in{transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiSnackbar--desktop{bottom:0;left:0;max-width:351px}.vkuiSnackbar--desktop .vkuiSnackbar__in{animation-name:vkui-animation-snackbar-intro-horizontal;padding:12px}.vkuiSnackbar--desktop.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(-140%,0,0)}.vkuiSnackbar--touched .vkuiSnackbar__body{transition:none}@keyframes vkui-animation-snackbar-intro-vertical{0%{transform:translate3d(0,140%,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-snackbar-intro-horizontal{0%{transform:translate3d(-140%,0,0)}to{transform:translateZ(0)}}

package/dist/cssm/components/Spacing/Spacing.js

@@ -1,27 +1,20 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "style", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import "./Spacing.module.css";
+import styles from './Spacing.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
- */
-export var Spacing = function Spacing(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 8 : _ref$size,
-    styleProp = _ref.style,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var style = _objectSpread({
-    height: size,
-    padding: "".concat(size / 2, "px 0")
-  }, styleProp);
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    "aria-hidden": true,
-    className: classNames(className, "vkuiSpacing"),
-    style: style
-  }));
+ */ export const Spacing = ({ size =8 , style: styleProp , className , ...restProps })=>{
+    const style = {
+        height: size,
+        padding: `${size / 2}px 0`,
+        ...styleProp
+    };
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        "aria-hidden": true,
+        className: classNames(className, styles['Spacing']),
+        style: style
+    });
 };
+
 //# sourceMappingURL=Spacing.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spacing.js","names":["React","classNames","Spacing","size","styleProp","style","className","restProps","height","padding"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-hidden\n      className={classNames(className, styles['Spacing'])}\n      style={style}\n    />\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAW7C;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,OAA8E;EAAA,qBAAxEC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAASC,SAAS,QAAhBC,KAAK;IAAaC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC3E,IAAMF,KAA0B;IAC9BG,MAAM,EAAEL,IAAI;IACZM,OAAO,YAAKN,IAAI,GAAG,CAAC;EAAM,GACvBC,SAAS,CACb;EAED,oBACE,wCACMG,SAAS;IACb,mBAAW;IACX,SAAS,EAAEN,UAAU,CAACK,SAAS,gBAAqB;IACpD,KAAK,EAAED;EAAM,GACb;AAEN,CAAC"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-hidden\n      className={classNames(className, styles['Spacing'])}\n      style={style}\n    />\n  );\n};\n"],"names":["React","classNames","styles","Spacing","size","style","styleProp","className","restProps","height","padding","div","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,uBAAuB;AAU1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,MAAO,EAAC,EAAEC,OAAOC,UAAS,EAAEC,UAAS,EAAE,GAAGC,WAAyB,GAAK;IAChG,MAAMH,QAA6B;QACjCI,QAAQL;QACRM,SAAS,CAAC,EAAEN,OAAO,EAAE,IAAI,CAAC;QAC1B,GAAGE,SAAS;IACd;IAEA,qBACE,oBAACK;QACE,GAAGH,SAAS;QACbI,eAAAA,IAAW;QACXL,WAAWN,WAAWM,WAAWL,MAAM,CAAC,UAAU;QAClDG,OAAOA;;AAGb,EAAE"}

package/dist/cssm/components/Spinner/Spinner.js

@@ -1,34 +1,25 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "aria-label", "className"];
 import * as React from 'react';
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
-import "./Spinner.module.css";
+import styles from './Spinner.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
- */
-export var Spinner = /*#__PURE__*/React.memo(function (_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'regular' : _ref$size,
-    _ref$ariaLabel = _ref['aria-label'],
-    ariaLabel = _ref$ariaLabel === void 0 ? 'Загружается...' : _ref$ariaLabel,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var SpinnerIcon = {
-    small: Icon16Spinner,
-    regular: Icon24Spinner,
-    medium: Icon32Spinner,
-    large: Icon44Spinner
-  }[size];
-  return /*#__PURE__*/React.createElement("span", _extends({
-    role: "status",
-    "aria-label": ariaLabel
-  }, restProps, {
-    className: classNames("vkuiSpinner", className)
-  }), /*#__PURE__*/React.createElement(SpinnerIcon, {
-    className: "vkuiSpinner__self"
-  }));
+ */ export const Spinner = /*#__PURE__*/ React.memo(({ size ='regular' , 'aria-label': ariaLabel = 'Загружается...' , className , ...restProps })=>{
+    const SpinnerIcon = {
+        small: Icon16Spinner,
+        regular: Icon24Spinner,
+        medium: Icon32Spinner,
+        large: Icon44Spinner
+    }[size];
+    return /*#__PURE__*/ React.createElement("span", {
+        role: "status",
+        "aria-label": ariaLabel,
+        ...restProps,
+        className: classNames(styles['Spinner'], className)
+    }, /*#__PURE__*/ React.createElement(SpinnerIcon, {
+        className: styles['Spinner__self']
+    }));
 });
 Spinner.displayName = 'Spinner';
+
 //# sourceMappingURL=Spinner.js.map