@vkontakte/vkui 5.4.3 → 5.5.1

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

@@ -1,66 +1,44 @@
 .Slider {
   position: relative;
-  height: 28px;
-  padding: 0 14px;
+  cursor: pointer;
+  height: var(--vkui_internal--slider_thumb_size);
 }
 
-.Slider::before {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  background-color: var(--vkui--color_track_background);
-  content: '';
-  top: 13px;
-  height: 2px;
-  border-radius: 1px;
-}
-
-.Slider__in {
-  height: 100%;
-  position: relative;
+.Slider--disabled {
+  cursor: not-allowed;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
-.Slider__dragger {
+.Slider__track,
+.Slider__track-fill {
   position: absolute;
+  top: 50%;
   left: 0;
-  width: 0;
-  height: 0;
-  top: 13px;
-}
-
-.Slider__dragger::before {
-  position: absolute;
-  top: 0;
-  width: calc(100% + 28px);
-  background: var(--vkui--color_background_accent);
-  content: '';
-  left: -14px;
   height: 2px;
   border-radius: 1px;
 }
 
-.Slider__thumb {
-  position: absolute;
-  top: -13px;
-  width: 28px;
-  height: 28px;
-  transition: transform 0.1s ease;
-  border-radius: 14px;
-  background: var(--vkui--color_background_contrast);
-  box-shadow: var(--vkui--elevation3);
-  border: 0.5px solid var(--vkui--color_separator_primary_alpha);
+.Slider__track {
+  width: 100%;
+  background-color: var(--vkui--color_track_background);
 }
 
-.Slider__thumb--start {
-  left: -14px;
+.Slider__track-fill {
+  width: auto;
+  background: var(--vkui--color_background_accent);
 }
 
-.Slider__thumb--end {
-  right: -14px;
+.Slider__thumbs {
+  isolation: isolate;
+  position: relative;
+  margin-right: calc(var(--vkui_internal--slider_thumb_size) / 2);
+  margin-left: calc(var(--vkui_internal--slider_thumb_size) / 2);
+  height: 100%;
 }
 
-.Slider--disabled {
-  opacity: var(--vkui--opacity_disable_accessibility);
+.Slider__thumb {
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 
 /**
@@ -68,67 +46,11 @@
  */
 
 .Slider--sizeY-compact {
-  height: 24px;
-  padding: 0 12px;
-}
-
-.Slider--sizeY-compact::before {
-  top: 11px;
-}
-
-.Slider--sizeY-compact .Slider__dragger {
-  top: 11px;
-}
-
-.Slider--sizeY-compact .Slider__dragger::before {
-  width: calc(100% + 24px);
-  left: -12px;
-}
-
-.Slider--sizeY-compact .Slider__thumb {
-  top: -11px;
-  width: 24px;
-  height: 24px;
-}
-
-.Slider--sizeY-compact .Slider__thumb--start {
-  left: -12px;
-}
-
-.Slider--sizeY-compact .Slider__thumb--end {
-  right: -12px;
+  --vkui_internal--slider_thumb_size: 24px;
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .Slider--sizeY-none {
-    height: 24px;
-    padding: 0 12px;
-  }
-
-  .Slider--sizeY-none::before {
-    top: 11px;
-  }
-
-  .Slider--sizeY-none .Slider__dragger {
-    top: 11px;
-  }
-
-  .Slider--sizeY-none .Slider__dragger::before {
-    width: calc(100% + 24px);
-    left: -12px;
-  }
-
-  .Slider--sizeY-none .Slider__thumb {
-    top: -11px;
-    width: 24px;
-    height: 24px;
-  }
-
-  .Slider--sizeY-none .Slider__thumb--start {
-    left: -12px;
-  }
-
-  .Slider--sizeY-none .Slider__thumb--end {
-    right: -12px;
+    --vkui_internal--slider_thumb_size: 24px;
   }
 }

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { HasDataAttribute, HasRootRef } from '../../../types';
+interface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {
+    className?: string;
+    style?: React.CSSProperties;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement> & HasDataAttribute;
+}
+export declare const SliderThumb: ({ className, getRootRef, inputProps, ...restProps }: SliderThumbProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useFocusVisible } from '../../../hooks/useFocusVisible';
+import { FocusVisible } from '../../FocusVisible/FocusVisible';
+import styles from './SliderThumb.module.css';
+export const SliderThumb = ({ className , getRootRef , inputProps , ...restProps })=>{
+    const { focusVisible , onBlur , onFocus  } = useFocusVisible(false);
+    return /*#__PURE__*/ React.createElement("span", {
+        ref: getRootRef,
+        className: classNames(styles['SliderThumb'], focusVisible && styles['SliderThumb--focused'], className),
+        ...restProps
+    }, /*#__PURE__*/ React.createElement("input", {
+        ...inputProps,
+        type: "range",
+        className: styles['SliderThumb__nativeInput'],
+        "aria-orientation": "horizontal",
+        onBlur: onBlur,
+        onFocus: onFocus
+    }), /*#__PURE__*/ React.createElement(FocusVisible, {
+        visible: focusVisible,
+        mode: "outside"
+    }));
+};
+
+//# sourceMappingURL=SliderThumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  ...restProps\n}: SliderThumbProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);\n\n  return (\n    <span\n      ref={getRootRef}\n      className={classNames(\n        styles['SliderThumb'],\n        focusVisible && styles['SliderThumb--focused'],\n        className,\n      )}\n      {...restProps}\n    >\n      <input\n        {...inputProps}\n        type=\"range\"\n        className={styles['SliderThumb__nativeInput']}\n        aria-orientation=\"horizontal\"\n        onBlur={onBlur}\n        onFocus={onFocus}\n      />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </span>\n  );\n};\n"],"names":["React","classNames","useFocusVisible","FocusVisible","styles","SliderThumb","className","getRootRef","inputProps","restProps","focusVisible","onBlur","onFocus","span","ref","input","type","aria-orientation","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,OAAOC,YAAY,2BAA2B;AAU9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,UAAS,EACTC,WAAU,EACVC,WAAU,EACV,GAAGC,WACc;IACjB,MAAM,EAAEC,aAAY,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGV,gBAAgB;IAE1D,qBACE,oBAACW;QACCC,KAAKP;QACLD,WAAWL,WACTG,MAAM,CAAC,cAAc,EACrBM,gBAAgBN,MAAM,CAAC,uBAAuB,EAC9CE;QAED,GAAGG,SAAS;qBAEb,oBAACM;QACE,GAAGP,UAAU;QACdQ,MAAK;QACLV,WAAWF,MAAM,CAAC,2BAA2B;QAC7Ca,oBAAiB;QACjBN,QAAQA;QACRC,SAASA;sBAEX,oBAACT;QAAae,SAASR;QAAcS,MAAK;;AAGhD,EAAE"}

package/dist/cssm/components/Slider/SliderThumb/SliderThumb.module.css

@@ -0,0 +1,35 @@
+.SliderThumb {
+  position: absolute;
+  z-index: 1;
+  width: var(--vkui_internal--slider_thumb_size);
+  height: var(--vkui_internal--slider_thumb_size);
+  border-radius: 50%;
+  border: 0.5px solid var(--vkui--color_separator_primary_alpha);
+  background: var(--vkui--color_background_contrast);
+  box-shadow: var(--vkui--elevation3);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.SliderThumb--focused {
+  z-index: 2;
+}
+
+/**
+ * Задаём ширину и высоту родителя, чтобы скринридер правильно выделял элемент (скопировано с MUI).
+ */
+
+.SliderThumb__nativeInput {
+  direction: ltr;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: -1px;
+  padding: 0;
+  border: 0 none;
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { InternalDraggingType, InternalValueState } from './types';
+export declare const toPercent: (v: number, min: number, max: number) => number;
+export declare const offsetToValue: (startX: number, width: number, min: number, max: number, step?: number) => number;
+export declare const updateInternalStateValue: (prevValue: InternalValueState, nextValue: number, min: number, max: number, dragging: InternalDraggingType | null) => InternalValueState;
+export declare const updateInternalStateValueByNativeChange: (prevValue: InternalValueState, nextValue: number, dragging: InternalDraggingType | null) => InternalValueState;
+export declare function isMultipleValues(value: InternalValueState): value is [number, number];
+export declare const snapDirection: (prevValue: InternalValueState, nextValue: number, type: InternalDraggingType | null) => "end" | "start";
+export declare const getDraggingTypeByTargetDataset: <T extends (EventTarget & HTMLElement) | null>(target: T) => "end" | "start" | null;
+export declare const extractSliderAriaAttributesFromRestProps: <T extends React.AriaAttributes>(restProps: T) => T & {
+    ariaLabel: string | undefined;
+    ariaValueText: string | undefined;
+    ariaLabelledBy: string | undefined;
+    'aria-label': undefined;
+    'aria-valuetext': undefined;
+    'aria-labelledby': undefined;
+};

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

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { rescale } from '../../helpers/math';
+export const toPercent = (v, min, max)=>(v - min) / (max - min) * 100;
+export const offsetToValue = (startX, width, min, max, step)=>{
+    return rescale(startX, [
+        0,
+        width
+    ], [
+        min,
+        max
+    ], {
+        step
+    });
+};
+const restrictValueByMinMax = (value, min, max)=>{
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+};
+export const updateInternalStateValue = (prevValue, nextValue, min, max, dragging)=>{
+    const [prevStartValue, prevEndValue] = prevValue;
+    if (prevEndValue === null) {
+        return [
+            restrictValueByMinMax(nextValue, min, max),
+            null
+        ];
+    }
+    switch(dragging){
+        case 'start':
+            return nextValue > prevEndValue ? [
+                prevEndValue,
+                prevEndValue
+            ] : [
+                restrictValueByMinMax(nextValue, min, max),
+                prevEndValue
+            ];
+        case 'end':
+            return nextValue < prevStartValue ? [
+                prevStartValue,
+                prevStartValue
+            ] : [
+                prevStartValue,
+                restrictValueByMinMax(nextValue, min, max)
+            ];
+        case null:
+        default:
+            return prevValue;
+    }
+};
+export const updateInternalStateValueByNativeChange = (prevValue, nextValue, dragging)=>{
+    const [prevStartValue, prevEndValue] = prevValue;
+    switch(dragging){
+        case 'start':
+            return [
+                nextValue,
+                prevEndValue
+            ];
+        case 'end':
+            return [
+                prevStartValue,
+                nextValue
+            ];
+        case null:
+        default:
+            return prevValue;
+    }
+};
+export function isMultipleValues(value) {
+    return value[1] !== null;
+}
+export const snapDirection = (prevValue, nextValue, type)=>{
+    if (type === 'start') {
+        return 'start';
+    }
+    if (type === 'end') {
+        return 'end';
+    }
+    const [startRaw, endRaw] = prevValue;
+    /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */ const FORCE_DIFF_VALUE = 0.1;
+    const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;
+    const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;
+    return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';
+};
+export const getDraggingTypeByTargetDataset = (target)=>{
+    if (target) {
+        if (target.dataset.type === 'start') {
+            return 'start';
+        }
+        if (target.dataset.type === 'end') {
+            return 'end';
+        }
+    }
+    return null;
+};
+const resetProps = {
+    'aria-label': undefined,
+    'aria-valuetext': undefined,
+    'aria-labelledby': undefined
+};
+export const extractSliderAriaAttributesFromRestProps = (restProps)=>{
+    const ariaLabel = restProps['aria-label'];
+    const ariaValueText = restProps['aria-valuetext'];
+    const ariaLabelledBy = restProps['aria-labelledby'];
+    return {
+        ...restProps,
+        ...resetProps,
+        ariaLabel,
+        ariaValueText,
+        ariaLabelledBy
+    };
+};
+
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Slider/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { rescale } from '../../helpers/math';\nimport type { InternalDraggingType, InternalValueState } from './types';\n\nexport const toPercent = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100;\n\nexport const offsetToValue = (\n  startX: number,\n  width: number,\n  min: number,\n  max: number,\n  step?: number,\n) => {\n  return rescale(startX, [0, width], [min, max], { step });\n};\n\nconst restrictValueByMinMax = (value: number, min: number, max: number) => {\n  if (value < min) {\n    return min;\n  }\n  if (value > max) {\n    return max;\n  }\n  return value;\n};\n\nexport const updateInternalStateValue = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  min: number,\n  max: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n\n  if (prevEndValue === null) {\n    return [restrictValueByMinMax(nextValue, min, max), null];\n  }\n\n  switch (dragging) {\n    case 'start':\n      return nextValue > prevEndValue\n        ? [prevEndValue, prevEndValue]\n        : [restrictValueByMinMax(nextValue, min, max), prevEndValue];\n    case 'end':\n      return nextValue < prevStartValue\n        ? [prevStartValue, prevStartValue]\n        : [prevStartValue, restrictValueByMinMax(nextValue, min, max)];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport const updateInternalStateValueByNativeChange = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n  switch (dragging) {\n    case 'start':\n      return [nextValue, prevEndValue];\n    case 'end':\n      return [prevStartValue, nextValue];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport function isMultipleValues(value: InternalValueState): value is [number, number] {\n  return value[1] !== null;\n}\n\nexport const snapDirection = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  type: InternalDraggingType | null,\n) => {\n  if (type === 'start') {\n    return 'start';\n  }\n  if (type === 'end') {\n    return 'end';\n  }\n\n  const [startRaw, endRaw] = prevValue;\n  /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */\n  const FORCE_DIFF_VALUE = 0.1;\n  const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;\n  const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;\n  return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';\n};\n\nexport const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) | null>(\n  target: T,\n) => {\n  if (target) {\n    if (target.dataset.type === 'start') {\n      return 'start';\n    }\n    if (target.dataset.type === 'end') {\n      return 'end';\n    }\n  }\n  return null;\n};\n\nconst resetProps = {\n  'aria-label': undefined,\n  'aria-valuetext': undefined,\n  'aria-labelledby': undefined,\n};\n\nexport const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(\n  restProps: T,\n) => {\n  const ariaLabel = restProps['aria-label'];\n  const ariaValueText = restProps['aria-valuetext'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n  return { ...restProps, ...resetProps, ariaLabel, ariaValueText, ariaLabelledBy };\n};\n"],"names":["React","rescale","toPercent","v","min","max","offsetToValue","startX","width","step","restrictValueByMinMax","value","updateInternalStateValue","prevValue","nextValue","dragging","prevStartValue","prevEndValue","updateInternalStateValueByNativeChange","isMultipleValues","snapDirection","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","getDraggingTypeByTargetDataset","target","dataset","resetProps","undefined","extractSliderAriaAttributesFromRestProps","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,qBAAqB;AAG7C,OAAO,MAAMC,YAAY,CAACC,GAAWC,KAAaC,MAAgB,AAAEF,CAAAA,IAAIC,GAAE,IAAMC,CAAAA,MAAMD,GAAE,IAAM,IAAI;AAElG,OAAO,MAAME,gBAAgB,CAC3BC,QACAC,OACAJ,KACAC,KACAI;IAEA,OAAOR,QAAQM,QAAQ;QAAC;QAAGC;KAAM,EAAE;QAACJ;QAAKC;KAAI,EAAE;QAAEI;IAAK;AACxD,EAAE;AAEF,MAAMC,wBAAwB,CAACC,OAAeP,KAAaC;IACzD,IAAIM,QAAQP,KAAK;QACf,OAAOA;IACT;IACA,IAAIO,QAAQN,KAAK;QACf,OAAOA;IACT;IACA,OAAOM;AACT;AAEA,OAAO,MAAMC,2BAA2B,CACtCC,WACAC,WACAV,KACAC,KACAU;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IAEvC,IAAII,iBAAiB,MAAM;QACzB,OAAO;YAACP,sBAAsBI,WAAWV,KAAKC;YAAM;SAAK;IAC3D;IAEA,OAAQU;QACN,KAAK;YACH,OAAOD,YAAYG,eACf;gBAACA;gBAAcA;aAAa,GAC5B;gBAACP,sBAAsBI,WAAWV,KAAKC;gBAAMY;aAAa;QAChE,KAAK;YACH,OAAOH,YAAYE,iBACf;gBAACA;gBAAgBA;aAAe,GAChC;gBAACA;gBAAgBN,sBAAsBI,WAAWV,KAAKC;aAAK;QAClE,KAAK;QACL;YACE,OAAOQ;IACX;AACF,EAAE;AAEF,OAAO,MAAMK,yCAAyC,CACpDL,WACAC,WACAC;IAEA,MAAM,CAACC,gBAAgBC,aAAa,GAAGJ;IACvC,OAAQE;QACN,KAAK;YACH,OAAO;gBAACD;gBAAWG;aAAa;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAgBF;aAAU;QACpC,KAAK;QACL;YACE,OAAOD;IACX;AACF,EAAE;AAEF,OAAO,SAASM,iBAAiBR,KAAyB;IACxD,OAAOA,KAAK,CAAC,EAAE,KAAK;AACtB;AAEA,OAAO,MAAMS,gBAAgB,CAC3BP,WACAC,WACAO;IAEA,IAAIA,SAAS,SAAS;QACpB,OAAO;IACT;IACA,IAAIA,SAAS,OAAO;QAClB,OAAO;IACT;IAEA,MAAM,CAACC,UAAUC,OAAO,GAAGV;IAC3B,2EAA2E,GAC3E,MAAMW,mBAAmB;IACzB,MAAMC,QAAQF,WAAW,OAAOD,WAAWE,mBAAmBF;IAC9D,MAAMI,MAAMH,WAAW,OAAOA,SAASC,mBAAmB;IAC1D,OAAOG,KAAKC,IAAIH,QAAQX,cAAca,KAAKC,IAAIF,MAAMZ,aAAa,UAAU;AAC9E,EAAE;AAEF,OAAO,MAAMe,iCAAiC,CAC5CC;IAEA,IAAIA,QAAQ;QACV,IAAIA,OAAOC,QAAQV,SAAS,SAAS;YACnC,OAAO;QACT;QACA,IAAIS,OAAOC,QAAQV,SAAS,OAAO;YACjC,OAAO;QACT;IACF;IACA,OAAO;AACT,EAAE;AAEF,MAAMW,aAAa;IACjB,cAAcC;IACd,kBAAkBA;IAClB,mBAAmBA;AACrB;AAEA,OAAO,MAAMC,2CAA2C,CACtDC;IAEA,MAAMC,YAAYD,SAAS,CAAC,aAAa;IACzC,MAAME,gBAAgBF,SAAS,CAAC,iBAAiB;IACjD,MAAMG,iBAAiBH,SAAS,CAAC,kBAAkB;IACnD,OAAO;QAAE,GAAGA,SAAS;QAAE,GAAGH,UAAU;QAAEI;QAAWC;QAAeC;IAAe;AACjF,EAAE"}

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

@@ -0,0 +1,7 @@
+export type InternalValueState = [number, number | null];
+export type InternalDraggingType = 'start' | 'end';
+export interface InternalGestureRef {
+    dragging: InternalDraggingType | null;
+    startX: number;
+    containerWidth: number;
+}

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

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Slider/types.ts"],"sourcesContent":["export type InternalValueState = [number, number | null];\n\nexport type InternalDraggingType = 'start' | 'end';\n\nexport interface InternalGestureRef {\n  dragging: InternalDraggingType | null;\n  startX: number;\n  containerWidth: number;\n}\n"],"names":[],"mappings":"AAAA,WAQC"}

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

@@ -46,4 +46,4 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */
-export declare const Snackbar: ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, className, subtitle, ...restProps }: SnackbarProps) => JSX.Element;
+export declare const Snackbar: ({ children, layout: layoutProps, action, before, after, duration, onActionClick, onClose, mode, className, subtitle, ...restProps }: SnackbarProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"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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"}
+{"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/Spacing/Spacing.d.ts

@@ -9,4 +9,4 @@ export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasC
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export declare const Spacing: ({ size, style: styleProp, className, ...restProps }: SpacingProps) => JSX.Element;
+export declare const Spacing: ({ size, style: styleProp, className, ...restProps }: SpacingProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\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 <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","styles","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,uBAAuB;AAS1C;;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,qBAAO,oBAACK;QAAK,GAAGH,SAAS;QAAED,WAAWN,WAAWM,WAAWL,MAAM,CAAC,UAAU;QAAGG,OAAOA;;AACzF,EAAE"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\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 <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","styles","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,uBAAuB;AAS1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,MAAO,EAAC,EAAEC,OAAOC,UAAS,EAAEC,UAAS,EAAE,GAAGC,WAAyB;IAC3F,MAAMH,QAA6B;QACjCI,QAAQL;QACRM,SAAS,CAAC,EAAEN,OAAO,EAAE,IAAI,CAAC;QAC1B,GAAGE,SAAS;IACd;IAEA,qBAAO,oBAACK;QAAK,GAAGH,SAAS;QAAED,WAAWN,WAAWM,WAAWL,MAAM,CAAC,UAAU;QAAGG,OAAOA;;AACzF,EAAE"}

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

@@ -5,4 +5,4 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */
-export declare const Spinner: React.MemoExoticComponent<({ size, "aria-label": ariaLabel, className, ...restProps }: SpinnerProps) => JSX.Element>;
+export declare const Spinner: React.MemoExoticComponent<({ size, "aria-label": ariaLabel, className, ...restProps }: SpinnerProps) => React.JSX.Element>;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNames(styles['Spinner'], className)}\n      >\n        <SpinnerIcon className={styles['Spinner__self']} />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","styles","Spinner","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","span","role","aria-label","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,wBAAUP,MAAMQ,IAAI,CAC/B,CAAC,EACCC,MAAO,UAAS,EAChB,cAAcC,YAAY,gBAAgB,CAAA,EAC1CC,UAAS,EACT,GAAGC,WACU,GAAK;IAClB,MAAMC,cAAc;QAClBC,OAAOb;QACPc,SAASb;QACTc,QAAQb;QACRc,OAAOb;IACT,CAAC,CAACK,KAAK;IAEP,qBACE,oBAACS;QACCC,MAAK;QACLC,cAAYV;QACX,GAAGE,SAAS;QACbD,WAAWN,WAAWC,MAAM,CAAC,UAAU,EAAEK;qBAEzC,oBAACE;QAAYF,WAAWL,MAAM,CAAC,gBAAgB;;AAGrD,GACA;AAEFC,QAAQc,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNames(styles['Spinner'], className)}\n      >\n        <SpinnerIcon className={styles['Spinner__self']} />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","styles","Spinner","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","span","role","aria-label","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,wBAAUP,MAAMQ,KAC3B,CAAC,EACCC,MAAO,UAAS,EAChB,cAAcC,YAAY,gBAAgB,CAAA,EAC1CC,UAAS,EACT,GAAGC,WACU;IACb,MAAMC,cAAc;QAClBC,OAAOb;QACPc,SAASb;QACTc,QAAQb;QACRc,OAAOb;IACT,CAAC,CAACK,KAAK;IAEP,qBACE,oBAACS;QACCC,MAAK;QACLC,cAAYV;QACX,GAAGE,SAAS;QACbD,WAAWN,WAAWC,MAAM,CAAC,UAAU,EAAEK;qBAEzC,oBAACE;QAAYF,WAAWL,MAAM,CAAC,gBAAgB;;AAGrD,GACA;AAEFC,QAAQc,cAAc"}

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

@@ -26,4 +26,4 @@ export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */
-export declare const SplitCol: (props: SplitColProps) => JSX.Element;
+export declare const SplitCol: (props: SplitColProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","SplitColContext","styles","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","warn","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef","process","env","NODE_ENV","div","ref","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAC/F,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,MAAM,CAAC,2BAA2B,EAAE;IACrDG,aAAaH,MAAM,CAAC,kCAAkC;IACtDI,iBAAiBJ,MAAM,CAAC,sCAAsC;IAC9DK,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB,EAAE;IACnD,MAAM,EAAEC,UAAS,EAAE,GAAGjB;IACtB,MAAM,CAACkB,SAASC,WAAW,GAAGrB,MAAMsB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAerB;IAErBH,MAAMyB,SAAS,CAAC,IAAM;QACpB,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF,CAAC;QAED,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYd,UAAUsB,MAAM;YACvC;QACF,CAAC;QAED,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaT,eAAe,CAACc,OAAO;QACvED;QAEArB,0BAA0BiB,aAAaT,eAAe,EAAEa;QACxD,OAAO,IAAM;YACXpB,6BAA6BgB,aAAaT,eAAe,EAAEa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AA2BA,MAAMU,OAAOrB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMsB,WAAW,CAACC,QAAyB;IAChD,MAAM,EACJC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,SAAQ,EACRC,OAAM,EACNjB,SAASF,YAAW,EACpBoB,MAAK,EACLC,MAAK,EACLC,WAAU,EACVC,kBAAiB,EACjBC,UAAS,EACT,GAAGC,WACJ,GAAGX;IACJ,MAAMY,UAAU5C,MAAM6C,MAAM,CAAiB,IAAI;IACjD,MAAM,EAAE1B,UAAS,EAAE,GAAGjB;IACtB,MAAMkB,UAAUH,qBAAqBC;IAErC,MAAM4B,eAAe1C,cAAc;QACjC2C,QAAQH;QACRxB;IACF;IAEA,IAAI4B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBb,WAAWX,WAAW;QAClE,6BAA6B;QAC7BI,KAAK;IACP,CAAC;IAED,qBACE,oBAACqB;QACE,GAAGR,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACRL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;QACZ;QACAgB,KAAKR;QACLF,WAAWzC,WACTU,MAAM,CAAC,WAAW,EAClBL,qBAAqBM,sBAAsBO,YAC3CkB,UAAUpC,WAAWU,MAAM,CAAC,mBAAmB,EAAE,iCACjD0B,WAAWX,aACTzB,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C6B,cACEvC,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C2B,SAAS3B,MAAM,CAAC,kBAAkB,EAClC8B,qBAAqB9B,MAAM,CAAC,gCAAgC,EAC5D+B;qBAGF,oBAAChC,gBAAgB2C,QAAQ;QAACC,OAAOR;OAC9BR,sBAAQ,oBAACa;QAAIT,WAAW/B,MAAM,CAAC,uBAAuB;OAAGsB,YAAkBA,QAAQ;AAI5F,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","SplitColContext","styles","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","warn","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef","process","env","NODE_ENV","div","ref","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAC/F,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,MAAM,CAAC,2BAA2B,EAAE;IACrDG,aAAaH,MAAM,CAAC,kCAAkC;IACtDI,iBAAiBJ,MAAM,CAAC,sCAAsC;IAC9DK,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,UAAS,EAAE,GAAGjB;IACtB,MAAM,CAACkB,SAASC,WAAW,GAAGrB,MAAMsB,SAASC,QAAQL;IACrD,MAAMM,eAAerB;IAErBH,MAAMyB,UAAU;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYd,UAAUsB;YACjC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaT,gBAAgBc;QAChED;QAEArB,0BAA0BiB,aAAaT,iBAAiBa;QACxD,OAAO;YACLpB,6BAA6BgB,aAAaT,iBAAiBa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AA2BA,MAAMU,OAAOrB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMsB,WAAW,CAACC;IACvB,MAAM,EACJC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,SAAQ,EACRC,OAAM,EACNjB,SAASF,YAAW,EACpBoB,MAAK,EACLC,MAAK,EACLC,WAAU,EACVC,kBAAiB,EACjBC,UAAS,EACT,GAAGC,WACJ,GAAGX;IACJ,MAAMY,UAAU5C,MAAM6C,OAAuB;IAC7C,MAAM,EAAE1B,UAAS,EAAE,GAAGjB;IACtB,MAAMkB,UAAUH,qBAAqBC;IAErC,MAAM4B,eAAe1C,cAAc;QACjC2C,QAAQH;QACRxB;IACF;IAEA,IAAI4B,QAAQC,IAAIC,aAAa,iBAAiBb,WAAWX,WAAW;QAClE,6BAA6B;QAC7BI,KAAK;IACP;IAEA,qBACE,oBAACqB;QACE,GAAGR,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACRL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;QACZ;QACAgB,KAAKR;QACLF,WAAWzC,WACTU,MAAM,CAAC,WAAW,EAClBL,qBAAqBM,sBAAsBO,YAC3CkB,UAAUpC,WAAWU,MAAM,CAAC,mBAAmB,EAAE,iCACjD0B,WAAWX,aACTzB,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C6B,cACEvC,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C2B,SAAS3B,MAAM,CAAC,kBAAkB,EAClC8B,qBAAqB9B,MAAM,CAAC,gCAAgC,EAC5D+B;qBAGF,oBAAChC,gBAAgB2C;QAASC,OAAOR;OAC9BR,sBAAQ,oBAACa;QAAIT,WAAW/B,MAAM,CAAC,uBAAuB;OAAGsB,YAAkBA;AAIpF,EAAE"}

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

@@ -21,13 +21,17 @@
 }
 
 .SplitCol--viewWidth-tabletMinus.SplitCol--stretched-on-mobile {
+  /* stylelint-disable-next-line declaration-no-important */
   width: 100% !important;
+  /* stylelint-disable-next-line declaration-no-important */
   max-width: 100% !important;
 }
 
 @media (max-width: 1023.9px) {
   .SplitCol--viewWidth-none.SplitCol--stretched-on-mobile {
+    /* stylelint-disable-next-line declaration-no-important */
     width: 100% !important;
+    /* stylelint-disable-next-line declaration-no-important */
     max-width: 100% !important;
   }
 }

package/dist/cssm/components/SplitCol/SplitColContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,gCAAkBD,MAAME,aAAa,CAAuB;IACvEC,QAAQ,IAAI;IACZC,SAAS,IAAI;AACf,GAAG;AAEH,OAAO,MAAMC,cAAc,IAAML,MAAMM,UAAU,CAACL,iBAAiB"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,gCAAkBD,MAAME,cAAoC;IACvEC,QAAQ;IACRC,SAAS;AACX,GAAG;AAEH,OAAO,MAAMC,cAAc,IAAML,MAAMM,WAAWL,iBAAiB"}

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

@@ -14,4 +14,4 @@ export interface SplitLayoutProps extends React.HTMLAttributes<HTMLDivElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
  */
-export declare const SplitLayout: ({ popout, modal, header, children, getRootRef, getRef, className, ...restProps }: SplitLayoutProps) => JSX.Element;
+export declare const SplitLayout: ({ popout, modal, header, children, getRootRef, getRef, className, ...restProps }: SplitLayoutProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","PopoutRoot","styles","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,OAAOC,YAAY,2BAA2B;AAiB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,MAAMC,WAAWb;IAEjB,qBACE,oBAACE;QACCS,WAAWZ,WACTI,MAAM,CAAC,cAAc,EACrBU,aAAaZ,SAASa,GAAG,IAAIX,MAAM,CAAC,mBAAmB;QAEzDE,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,oBAACQ;QACE,GAAGH,SAAS;QACbI,KAAKN;QACLC,WAAWZ,WACTI,MAAM,CAAC,qBAAqB,EAC5B,CAAC,CAACI,UAAUJ,MAAM,CAAC,6BAA6B,EAChDQ;OAGDH;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","PopoutRoot","styles","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,OAAOC,YAAY,2BAA2B;AAiB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,UAAS,EACT,GAAGC,WACc;IACjB,MAAMC,WAAWb;IAEjB,qBACE,oBAACE;QACCS,WAAWZ,WACTI,MAAM,CAAC,cAAc,EACrBU,aAAaZ,SAASa,OAAOX,MAAM,CAAC,mBAAmB;QAEzDE,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,oBAACQ;QACE,GAAGH,SAAS;QACbI,KAAKN;QACLC,WAAWZ,WACTI,MAAM,CAAC,qBAAqB,EAC5B,CAAC,CAACI,UAAUJ,MAAM,CAAC,6BAA6B,EAChDQ;OAGDH;AAIT,EAAE"}

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

@@ -6,4 +6,4 @@ export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
  */
-export declare const SubnavigationBar: ({ mode, children, showArrows, getScrollToLeft, getScrollToRight, scrollAnimationDuration, className, ...restProps }: SubnavigationBarProps) => JSX.Element;
+export declare const SubnavigationBar: ({ mode, children, showArrows, getScrollToLeft, getScrollToRight, scrollAnimationDuration, className, ...restProps }: SubnavigationBarProps) => React.JSX.Element;