@vkontakte/vkui 8.1.2 → 8.2.0

package/dist/cssm/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.module.css

@@ -0,0 +1,13 @@
+.host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  color: var(--vkui--color_icon_medium);
+  will-change: contents;
+}
+
+.noColor {
+  color: currentColor;
+}

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

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useAnimationFrame } from "../../../hooks/useAnimationFrame.js";
+import { useReducedMotion } from "../../../lib/animation/index.js";
+import * as shapes from "../../../lib/material/shapes/shapes.js";
+import { interpolate } from "../../../lib/svg/path/interpolate.js";
+import { svgPathToString } from "../../../lib/svg/path/path.js";
+import * as operation from "../../../lib/svg/path/transform.js";
+import { SvgIcon } from "../SvgIcon.js";
+export function IconMaterial(props) {
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: props.size,
+        children: /*#__PURE__*/ _jsx(IconMaterialPath, {
+            ...props
+        })
+    });
+}
+const globalRotationDuration = 4666;
+const morphDuration = 200;
+const morphInterval = 650;
+const fullRotation = 360;
+const quarterRotation = fullRotation / 4;
+function calcProgress(startTime, time, duration, delay = 0) {
+    const fullDuration = duration + delay;
+    const timeProgress = fullDuration * ((time - startTime) % fullDuration / fullDuration);
+    if (timeProgress < delay) {
+        return 0;
+    }
+    return (timeProgress - delay) / duration;
+}
+function IconMaterialPath({ size, polygons, disableAnimation }) {
+    const ref = React.useRef(null);
+    const morphSequence = React.useMemo(()=>{
+        function getShape(index, size) {
+            return shapes.shapeWithRotate(polygons[index], size);
+        }
+        return new Array(polygons.length).fill(0).map((_, index)=>{
+            return interpolate(getShape(index, size), getShape((index + 1) % polygons.length, size), {
+                maxSegmentLength: 2
+            });
+        });
+    }, [
+        size,
+        polygons
+    ]);
+    const initialPath = React.useMemo(()=>svgPathToString(morphSequence[0](0)), [
+        morphSequence
+    ]);
+    const callback = React.useCallback((time)=>{
+        const rotationAnimationProgress = calcProgress(0, time, globalRotationDuration);
+        const globalRotation = rotationAnimationProgress * fullRotation;
+        // TODO: spring({
+        //   dampingRatio: 0.6,
+        //   stiffness: 200,
+        //   visibilityThreshold: 0.1,
+        // })
+        const morphProgress = calcProgress(0, time, morphDuration, morphInterval);
+        const roundMorphIndex = Math.floor(time / (morphDuration + morphInterval));
+        const currentMorphIndex = roundMorphIndex % morphSequence.length;
+        const morphRotationTargetAngle = roundMorphIndex * quarterRotation % fullRotation;
+        const rotation = morphProgress * quarterRotation + morphRotationTargetAngle + globalRotation;
+        const morphFn = morphSequence[currentMorphIndex];
+        const morph = morphFn(morphProgress);
+        ref.current.setAttribute('d', svgPathToString(operation.rotate(morph, size / 2, size / 2, rotation)));
+    }, [
+        morphSequence,
+        size
+    ]);
+    const isReducedMotion = useReducedMotion();
+    useAnimationFrame(callback, disableAnimation || isReducedMotion);
+    return /*#__PURE__*/ _jsx("path", {
+        ref: ref,
+        fill: "currentColor",
+        d: initialPath
+    });
+}
+
+//# sourceMappingURL=icons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Spinner/ExpressiveSpinner/icons.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAnimationFrame } from '../../../hooks/useAnimationFrame';\nimport { useReducedMotion } from '../../../lib/animation';\nimport * as shapes from '../../../lib/material/shapes/shapes';\nimport { interpolate } from '../../../lib/svg/path/interpolate';\nimport { svgPathToString } from '../../../lib/svg/path/path';\nimport * as operation from '../../../lib/svg/path/transform';\nimport { SvgIcon } from '../SvgIcon';\n\ninterface IconMaterialProps {\n  /**\n   * Список форм.\n   */\n  polygons: readonly shapes.ShapeParameters[];\n  /**\n   * Размер иконки.\n   */\n  size: number;\n  /**\n   * Отключение анимации.\n   */\n  disableAnimation: boolean;\n}\n\nexport function IconMaterial(props: IconMaterialProps) {\n  return (\n    <SvgIcon size={props.size}>\n      <IconMaterialPath {...props} />\n    </SvgIcon>\n  );\n}\n\nconst globalRotationDuration = 4666;\nconst morphDuration = 200;\nconst morphInterval = 650;\nconst fullRotation = 360;\nconst quarterRotation = fullRotation / 4;\n\nfunction calcProgress(startTime: number, time: number, duration: number, delay = 0) {\n  const fullDuration = duration + delay;\n\n  const timeProgress = fullDuration * (((time - startTime) % fullDuration) / fullDuration);\n\n  if (timeProgress < delay) {\n    return 0;\n  }\n\n  return (timeProgress - delay) / duration;\n}\n\nfunction IconMaterialPath({ size, polygons, disableAnimation }: IconMaterialProps) {\n  const ref = React.useRef<SVGPathElement>(null);\n\n  const morphSequence = React.useMemo(() => {\n    function getShape(index: number, size: number) {\n      return shapes.shapeWithRotate(polygons[index], size);\n    }\n\n    return new Array(polygons.length).fill(0).map((_, index) => {\n      return interpolate(getShape(index, size), getShape((index + 1) % polygons.length, size), {\n        maxSegmentLength: 2,\n      });\n    });\n  }, [size, polygons]);\n\n  const initialPath = React.useMemo(() => svgPathToString(morphSequence[0](0)), [morphSequence]);\n\n  const callback = React.useCallback(\n    (time: number) => {\n      const rotationAnimationProgress = calcProgress(0, time, globalRotationDuration);\n      const globalRotation = rotationAnimationProgress * fullRotation;\n\n      // TODO: spring({\n      //   dampingRatio: 0.6,\n      //   stiffness: 200,\n      //   visibilityThreshold: 0.1,\n      // })\n      const morphProgress = calcProgress(0, time, morphDuration, morphInterval);\n\n      const roundMorphIndex = Math.floor(time / (morphDuration + morphInterval));\n\n      const currentMorphIndex = roundMorphIndex % morphSequence.length;\n\n      const morphRotationTargetAngle = (roundMorphIndex * quarterRotation) % fullRotation;\n      const rotation = morphProgress * quarterRotation + morphRotationTargetAngle + globalRotation;\n\n      const morphFn = morphSequence[currentMorphIndex];\n      const morph = morphFn(morphProgress);\n\n      ref.current!.setAttribute(\n        'd',\n        svgPathToString(operation.rotate(morph, size / 2, size / 2, rotation)),\n      );\n    },\n    [morphSequence, size],\n  );\n\n  const isReducedMotion = useReducedMotion();\n  useAnimationFrame(callback, disableAnimation || isReducedMotion);\n\n  return <path ref={ref} fill=\"currentColor\" d={initialPath}></path>;\n}\n"],"names":["React","useAnimationFrame","useReducedMotion","shapes","interpolate","svgPathToString","operation","SvgIcon","IconMaterial","props","size","IconMaterialPath","globalRotationDuration","morphDuration","morphInterval","fullRotation","quarterRotation","calcProgress","startTime","time","duration","delay","fullDuration","timeProgress","polygons","disableAnimation","ref","useRef","morphSequence","useMemo","getShape","index","shapeWithRotate","Array","length","fill","map","_","maxSegmentLength","initialPath","callback","useCallback","rotationAnimationProgress","globalRotation","morphProgress","roundMorphIndex","Math","floor","currentMorphIndex","morphRotationTargetAngle","rotation","morphFn","morph","current","setAttribute","rotate","isReducedMotion","path","d"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,sCAAmC;AACrE,SAASC,gBAAgB,QAAQ,kCAAyB;AAC1D,YAAYC,YAAY,yCAAsC;AAC9D,SAASC,WAAW,QAAQ,uCAAoC;AAChE,SAASC,eAAe,QAAQ,gCAA6B;AAC7D,YAAYC,eAAe,qCAAkC;AAC7D,SAASC,OAAO,QAAQ,gBAAa;AAiBrC,OAAO,SAASC,aAAaC,KAAwB;IACnD,qBACE,KAACF;QAAQG,MAAMD,MAAMC,IAAI;kBACvB,cAAA,KAACC;YAAkB,GAAGF,KAAK;;;AAGjC;AAEA,MAAMG,yBAAyB;AAC/B,MAAMC,gBAAgB;AACtB,MAAMC,gBAAgB;AACtB,MAAMC,eAAe;AACrB,MAAMC,kBAAkBD,eAAe;AAEvC,SAASE,aAAaC,SAAiB,EAAEC,IAAY,EAAEC,QAAgB,EAAEC,QAAQ,CAAC;IAChF,MAAMC,eAAeF,WAAWC;IAEhC,MAAME,eAAeD,eAAgB,CAAA,AAAEH,CAAAA,OAAOD,SAAQ,IAAKI,eAAgBA,YAAW;IAEtF,IAAIC,eAAeF,OAAO;QACxB,OAAO;IACT;IAEA,OAAO,AAACE,CAAAA,eAAeF,KAAI,IAAKD;AAClC;AAEA,SAAST,iBAAiB,EAAED,IAAI,EAAEc,QAAQ,EAAEC,gBAAgB,EAAqB;IAC/E,MAAMC,MAAM1B,MAAM2B,MAAM,CAAiB;IAEzC,MAAMC,gBAAgB5B,MAAM6B,OAAO,CAAC;QAClC,SAASC,SAASC,KAAa,EAAErB,IAAY;YAC3C,OAAOP,OAAO6B,eAAe,CAACR,QAAQ,CAACO,MAAM,EAAErB;QACjD;QAEA,OAAO,IAAIuB,MAAMT,SAASU,MAAM,EAAEC,IAAI,CAAC,GAAGC,GAAG,CAAC,CAACC,GAAGN;YAChD,OAAO3B,YAAY0B,SAASC,OAAOrB,OAAOoB,SAAS,AAACC,CAAAA,QAAQ,CAAA,IAAKP,SAASU,MAAM,EAAExB,OAAO;gBACvF4B,kBAAkB;YACpB;QACF;IACF,GAAG;QAAC5B;QAAMc;KAAS;IAEnB,MAAMe,cAAcvC,MAAM6B,OAAO,CAAC,IAAMxB,gBAAgBuB,aAAa,CAAC,EAAE,CAAC,KAAK;QAACA;KAAc;IAE7F,MAAMY,WAAWxC,MAAMyC,WAAW,CAChC,CAACtB;QACC,MAAMuB,4BAA4BzB,aAAa,GAAGE,MAAMP;QACxD,MAAM+B,iBAAiBD,4BAA4B3B;QAEnD,iBAAiB;QACjB,uBAAuB;QACvB,oBAAoB;QACpB,8BAA8B;QAC9B,KAAK;QACL,MAAM6B,gBAAgB3B,aAAa,GAAGE,MAAMN,eAAeC;QAE3D,MAAM+B,kBAAkBC,KAAKC,KAAK,CAAC5B,OAAQN,CAAAA,gBAAgBC,aAAY;QAEvE,MAAMkC,oBAAoBH,kBAAkBjB,cAAcM,MAAM;QAEhE,MAAMe,2BAA2B,AAACJ,kBAAkB7B,kBAAmBD;QACvE,MAAMmC,WAAWN,gBAAgB5B,kBAAkBiC,2BAA2BN;QAE9E,MAAMQ,UAAUvB,aAAa,CAACoB,kBAAkB;QAChD,MAAMI,QAAQD,QAAQP;QAEtBlB,IAAI2B,OAAO,CAAEC,YAAY,CACvB,KACAjD,gBAAgBC,UAAUiD,MAAM,CAACH,OAAO1C,OAAO,GAAGA,OAAO,GAAGwC;IAEhE,GACA;QAACtB;QAAelB;KAAK;IAGvB,MAAM8C,kBAAkBtD;IACxBD,kBAAkBuC,UAAUf,oBAAoB+B;IAEhD,qBAAO,KAACC;QAAK/B,KAAKA;QAAKS,MAAK;QAAeuB,GAAGnB;;AAChD"}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RootComponent } from "../RootComponent/RootComponent.js";
+/**
+ * Возвращает класс для иконки.
+ */ export function iconClassName(size) {
+    return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
+}
+export function SvgIcon({ size, children, ...restProps }) {
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        Component: "svg",
+        baseClassName: iconClassName(size),
+        "aria-hidden": "true",
+        width: size,
+        height: size,
+        ...restProps,
+        children: children
+    });
+}
+
+//# sourceMappingURL=SvgIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Spinner/SvgIcon.tsx"],"sourcesContent":["import { type HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\n\n/**\n * Возвращает класс для иконки.\n */\nexport function iconClassName(size: number) {\n  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;\n}\n\ninterface SvgIconProps extends React.ComponentProps<'svg'>, HasRootRef<SVGElement> {\n  /**\n   * Размер иконки.\n   */\n  size: number;\n}\n\nexport function SvgIcon({ size, children, ...restProps }: SvgIconProps) {\n  return (\n    <RootComponent\n      Component=\"svg\"\n      baseClassName={iconClassName(size)}\n      aria-hidden=\"true\"\n      width={size}\n      height={size}\n      {...restProps}\n    >\n      {children}\n    </RootComponent>\n  );\n}\n"],"names":["RootComponent","iconClassName","size","SvgIcon","children","restProps","Component","baseClassName","aria-hidden","width","height"],"mappings":";AACA,SAASA,aAAa,QAAQ,oCAAiC;AAE/D;;CAEC,GACD,OAAO,SAASC,cAAcC,IAAY;IACxC,OAAO,CAAC,mBAAmB,EAAEA,KAAK,aAAa,EAAEA,KAAK,aAAa,EAAEA,MAAM;AAC7E;AASA,OAAO,SAASC,QAAQ,EAAED,IAAI,EAAEE,QAAQ,EAAE,GAAGC,WAAyB;IACpE,qBACE,KAACL;QACCM,WAAU;QACVC,eAAeN,cAAcC;QAC7BM,eAAY;QACZC,OAAOP;QACPQ,QAAQR;QACP,GAAGG,SAAS;kBAEZD;;AAGP"}

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

@@ -1,13 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-function iconClassName(size) {
-    return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
-}
+import * as React from "react";
+import { SvgIcon } from "./SvgIcon.js";
 export function Icon16Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(16),
-        "aria-hidden": "true",
-        width: "16",
-        height: "16",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 16,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z",
@@ -16,11 +12,8 @@ export function Icon16Spinner({ children }) {
     });
 }
 export function Icon24Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(24),
-        "aria-hidden": "true",
-        width: "24",
-        height: "24",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 24,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123",
@@ -29,11 +22,8 @@ export function Icon24Spinner({ children }) {
     });
 }
 export function Icon32Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(32),
-        "aria-hidden": "true",
-        width: "32",
-        height: "32",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 32,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16",
@@ -42,11 +32,8 @@ export function Icon32Spinner({ children }) {
     });
 }
 export function Icon44Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(44),
-        "aria-hidden": "true",
-        width: "44",
-        height: "44",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 44,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spinner/icons.tsx"],"sourcesContent":["import type * as React from 'react';\n\nfunction iconClassName(size: number) {\n  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;\n}\n\nexport function Icon16Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(16)} aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\n        d=\"M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon24Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(24)} aria-hidden=\"true\" width=\"24\" height=\"24\">\n      <path\n        fill=\"currentColor\"\n        d=\"M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon32Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(32)} aria-hidden=\"true\" width=\"32\" height=\"32\">\n      <path\n        fill=\"currentColor\"\n        d=\"M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon44Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(44)} aria-hidden=\"true\" width=\"44\" height=\"44\">\n      <path\n        fill=\"currentColor\"\n        d=\"M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n"],"names":["iconClassName","size","Icon16Spinner","children","svg","className","aria-hidden","width","height","path","fill","d","Icon24Spinner","Icon32Spinner","Icon44Spinner"],"mappings":";AAEA,SAASA,cAAcC,IAAY;IACjC,OAAO,CAAC,mBAAmB,EAAEA,KAAK,aAAa,EAAEA,KAAK,aAAa,EAAEA,MAAM;AAC7E;AAEA,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT;AAEA,OAAO,SAASS,cAAc,EAAET,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT;AAEA,OAAO,SAASU,cAAc,EAAEV,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT;AAEA,OAAO,SAASW,cAAc,EAAEX,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT"}
+{"version":3,"sources":["../../../../src/components/Spinner/icons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SvgIcon } from './SvgIcon';\n\nexport function Icon16Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={16}>\n      <path\n        fill=\"currentColor\"\n        d=\"M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n\nexport function Icon24Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={24}>\n      <path\n        fill=\"currentColor\"\n        d=\"M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n\nexport function Icon32Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={32}>\n      <path\n        fill=\"currentColor\"\n        d=\"M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n\nexport function Icon44Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={44}>\n      <path\n        fill=\"currentColor\"\n        d=\"M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n"],"names":["React","SvgIcon","Icon16Spinner","children","size","path","fill","d","Icon24Spinner","Icon32Spinner","Icon44Spinner"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,eAAY;AAEpC,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT;AAEA,OAAO,SAASK,cAAc,EAAEL,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT;AAEA,OAAO,SAASM,cAAc,EAAEN,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT;AAEA,OAAO,SAASO,cAAc,EAAEP,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SplitLayout.module.css';\n\nconst warn = warnOnce('SplitLayout');\n\nexport interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * @deprecated Since 7.9.0. Будет удалeно в **VKUI v9**.\n   * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLDivElement> | undefined;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `content`: свойства для прокидывания в контент;.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n        content?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode | undefined;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  modal?: React.ReactNode | undefined;\n  /**\n   * Компонент для отрисовки заголовка.\n   */\n  header?: React.ReactNode | undefined;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean | undefined;\n}\n\n/**\n * @see https://vkui.io/components/split-layout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  center,\n  getRef,\n  children,\n\n  slotProps,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development') {\n    if (getRef) {\n      warn(\n        'Свойство `getRef` устаревшее, используйте `slotProps={ content: { getRootRef: ... } }`',\n      );\n    }\n    if (popout) {\n      warn(\n        'Свойство `popout` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n    if (modal) {\n      warn(\n        'Свойство `modal` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n  }\n\n  const rootRest = useMergeProps(restProps, slotProps?.root);\n  const contentRest = useMergeProps({ getRootRef: getRef }, slotProps?.content);\n\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, platform === 'ios' && styles.ios)}\n      {...rootRest}\n    >\n      {header}\n      <RootComponent\n        baseClassName={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n        )}\n        {...contentRest}\n      >\n        {children}\n        {modal}\n        {popout}\n      </RootComponent>\n    </RootComponent>\n  );\n};\n"],"names":["classNames","useMergeProps","usePlatform","warnOnce","RootComponent","styles","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName","host","ios","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOH,SAAS;AAiDtB;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,QAAQ,EAERC,SAAS,EACT,GAAGC,WACc;IACjB,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIN,QAAQ;YACVN,KACE;QAEJ;QACA,IAAIE,QAAQ;YACVF,KACE;QAEJ;QACA,IAAIG,OAAO;YACTH,KACE;QAEJ;IACF;IAEA,MAAMa,WAAWlB,cAAcc,WAAWD,WAAWM;IACrD,MAAMC,cAAcpB,cAAc;QAAEqB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWtB;IAEjB,qBACE,MAACE;QACCqB,eAAezB,WAAWK,OAAOqB,IAAI,EAAEF,aAAa,SAASnB,OAAOsB,GAAG;QACtE,GAAGR,QAAQ;;YAEXT;0BACD,MAACN;gBACCqB,eAAezB,WACbK,OAAOuB,KAAK,EACZ,CAAC,CAAClB,UAAUL,OAAOwB,WAAW,EAC9BlB,UAAUN,OAAOyB,WAAW;gBAE7B,GAAGT,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SplitLayout.module.css';\n\nconst warn = warnOnce('SplitLayout');\n\nexport interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * @deprecated Since 7.9.0. Будет удалено в **VKUI v9**.\n   * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLDivElement> | undefined;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `content`: свойства для прокидывания в контент;.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n        content?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode | undefined;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  modal?: React.ReactNode | undefined;\n  /**\n   * Компонент для отрисовки заголовка.\n   */\n  header?: React.ReactNode | undefined;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean | undefined;\n}\n\n/**\n * @see https://vkui.io/components/split-layout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  center,\n  getRef,\n  children,\n\n  slotProps,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development') {\n    if (getRef) {\n      warn(\n        'Свойство `getRef` устаревшее, используйте `slotProps={ content: { getRootRef: ... } }`',\n      );\n    }\n    if (popout) {\n      warn(\n        'Свойство `popout` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n    if (modal) {\n      warn(\n        'Свойство `modal` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n  }\n\n  const rootRest = useMergeProps(restProps, slotProps?.root);\n  const contentRest = useMergeProps({ getRootRef: getRef }, slotProps?.content);\n\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, platform === 'ios' && styles.ios)}\n      {...rootRest}\n    >\n      {header}\n      <RootComponent\n        baseClassName={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n        )}\n        {...contentRest}\n      >\n        {children}\n        {modal}\n        {popout}\n      </RootComponent>\n    </RootComponent>\n  );\n};\n"],"names":["classNames","useMergeProps","usePlatform","warnOnce","RootComponent","styles","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName","host","ios","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOH,SAAS;AAiDtB;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,QAAQ,EAERC,SAAS,EACT,GAAGC,WACc;IACjB,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIN,QAAQ;YACVN,KACE;QAEJ;QACA,IAAIE,QAAQ;YACVF,KACE;QAEJ;QACA,IAAIG,OAAO;YACTH,KACE;QAEJ;IACF;IAEA,MAAMa,WAAWlB,cAAcc,WAAWD,WAAWM;IACrD,MAAMC,cAAcpB,cAAc;QAAEqB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWtB;IAEjB,qBACE,MAACE;QACCqB,eAAezB,WAAWK,OAAOqB,IAAI,EAAEF,aAAa,SAASnB,OAAOsB,GAAG;QACtE,GAAGR,QAAQ;;YAEXT;0BACD,MAACN;gBACCqB,eAAezB,WACbK,OAAOuB,KAAK,EACZ,CAAC,CAAClB,UAAUL,OAAOwB,WAAW,EAC9BlB,UAAUN,OAAOyB,WAAW;gBAE7B,GAAGT,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}

package/dist/cssm/components/TabsItem/TabsItem.js

@@ -4,7 +4,6 @@ import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
-import { useDOM } from "../../lib/dom.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { TabsControllerContext } from "../Tabs/TabsControllerContext.js";
 import { TabsModeContext } from "../Tabs/TabsModeContext.js";
@@ -70,16 +69,15 @@ const warn = warnOnce('TabsItem');
     }
     const rootRef = useExternRef(getRootRef);
     const prevSelectedRef = React.useRef(undefined);
-    const { document } = useDOM();
     React.useEffect(function scrollToSelectedItem() {
         const isInitialRender = prevSelectedRef.current === undefined;
         const shouldScrollToSelected = withScrollToSelectedTab && !isInitialRender && prevSelectedRef.current !== selected && selected;
         prevSelectedRef.current = selected;
-        if (!shouldScrollToSelected || !rootRef.current || !document) {
+        if (!shouldScrollToSelected || !rootRef.current) {
             return;
         }
         const tabDOMRect = rootRef.current.getBoundingClientRect();
-        const isTabVerticallyOutsideOfViewport = tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;
+        const isTabVerticallyOutsideOfViewport = tabDOMRect.top < 0 || tabDOMRect.bottom > rootRef.current.ownerDocument.documentElement.clientHeight;
         /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если
        * элемент вертикально вне зоны видимости */ if (isTabVerticallyOutsideOfViewport) {
             return;
@@ -96,7 +94,6 @@ const warn = warnOnce('TabsItem');
          **/ }
     }, [
         rootRef,
-        document,
         scrollBehaviorToSelectedTab,
         withScrollToSelectedTab,
         selected

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsControllerContext } from '../Tabs/TabsControllerContext';\nimport { TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableOmitProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode | undefined;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkui.io/components/badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkui.io/components/counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number | undefined;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode | undefined;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean | undefined;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean | undefined;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkui.io/components/tabs#tabs-item\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected: selectedProp = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  id,\n  onClick,\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { density = 'none' } = useAdaptivity();\n  const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } =\n    React.useContext(TabsModeContext);\n  const controller = React.useContext(TabsControllerContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  const selected = selectedProp || (!!id && controller?.selectedTab === id);\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!id) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelectedRef = React.useRef<boolean | undefined>(undefined);\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      const isInitialRender = prevSelectedRef.current === undefined;\n      const shouldScrollToSelected =\n        withScrollToSelectedTab &&\n        !isInitialRender &&\n        prevSelectedRef.current !== selected &&\n        selected;\n\n      prevSelectedRef.current = selected;\n\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, scrollBehaviorToSelectedTab, withScrollToSelectedTab, selected],\n  );\n\n  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      onClick?.(e);\n      if (id) {\n        controller?.onChange(id);\n      }\n    },\n    [id, onClick, controller],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        density !== 'regular' && densityClassNames[density],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      onClick={controller ? _onClick : onClick}\n      id={id}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","useDOM","warnOnce","TabsControllerContext","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","densityClassNames","none","densityNone","compact","densityCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","density","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","controller","statusComponent","isTabFlow","selectedTab","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelectedRef","useRef","document","useEffect","scrollToSelectedItem","isInitialRender","current","shouldScrollToSelected","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsControllerContext } from '../Tabs/TabsControllerContext';\nimport { TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableOmitProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode | undefined;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkui.io/components/badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkui.io/components/counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number | undefined;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode | undefined;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean | undefined;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean | undefined;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkui.io/components/tabs#tabs-item\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected: selectedProp = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  id,\n  onClick,\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { density = 'none' } = useAdaptivity();\n  const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } =\n    React.useContext(TabsModeContext);\n  const controller = React.useContext(TabsControllerContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  const selected = selectedProp || (!!id && controller?.selectedTab === id);\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!id) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelectedRef = React.useRef<boolean | undefined>(undefined);\n\n  React.useEffect(\n    function scrollToSelectedItem() {\n      const isInitialRender = prevSelectedRef.current === undefined;\n      const shouldScrollToSelected =\n        withScrollToSelectedTab &&\n        !isInitialRender &&\n        prevSelectedRef.current !== selected &&\n        selected;\n\n      prevSelectedRef.current = selected;\n\n      if (!shouldScrollToSelected || !rootRef.current) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 ||\n        tabDOMRect.bottom > rootRef.current.ownerDocument.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, scrollBehaviorToSelectedTab, withScrollToSelectedTab, selected],\n  );\n\n  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      onClick?.(e);\n      if (id) {\n        controller?.onChange(id);\n      }\n    },\n    [id, onClick, controller],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        density !== 'regular' && densityClassNames[density],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      onClick={controller ? _onClick : onClick}\n      id={id}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","warnOnce","TabsControllerContext","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","densityClassNames","none","densityNone","compact","densityCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","density","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","controller","statusComponent","isTabFlow","selectedTab","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelectedRef","useRef","useEffect","scrollToSelectedItem","isInitialRender","current","shouldScrollToSelected","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","ownerDocument","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nfunction getViewWidthClassName(\n  viewWidth: ViewWidthType | 'none',\n  legacySizeX: SizeTypeValues | undefined,\n) {\n  // TODO [>=10]: #9015 Удалить это условие\n  if (legacySizeX !== undefined && legacySizeX === 'compact') {\n    return styles.withBorder;\n  }\n  if (viewWidth === 'none') {\n    return styles.withBorderOnSmallTabletMinus;\n  }\n  if (viewWidth < ViewWidth.SMALL_TABLET) {\n    return styles.withBorder;\n  }\n  return;\n}\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.\n   */\n  borderRadiusMode?: 'auto' | 'inherit' | undefined;\n  /**\n   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.\n   *\n   * Используйте свойство `activeMode`.\n   */\n  activeClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n  /**\n   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.\n   *\n   * Используйте свойство `hoverMode`.\n   */\n  hoverClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n}\n\n/**\n * @deprecated Не наследуйтесь от этого типа и от TappableProps.\n *\n * Компонентам не нужны лишние свойства Tappable компонента.\n */\nexport type TappableOmitProps = Omit<\n  TappableProps,\n  'DefaultComponent' | 'baseClassName' | 'baseStyle'\n>;\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX: legacySizeX, viewWidth = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        getViewWidthClassName(viewWidth, legacySizeX),\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","ViewWidth","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","styles","getViewWidthClassName","viewWidth","legacySizeX","undefined","withBorder","withBorderOnSmallTabletMinus","SMALL_TABLET","hasPointerClassName","hasPointer","hasPointerNone","hasPointerFalse","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","host","borderRadiusInherit","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAA8BC,SAAS,QAA4B,gCAAuB;AAC1F,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AACvF,OAAOC,YAAY,wBAAwB;AAE3C,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,aAAaD,gBAAgB,WAAW;QAC1D,OAAOH,OAAOK,UAAU;IAC1B;IACA,IAAIH,cAAc,QAAQ;QACxB,OAAOF,OAAOM,4BAA4B;IAC5C;IACA,IAAIJ,YAAYZ,UAAUiB,YAAY,EAAE;QACtC,OAAOP,OAAOK,UAAU;IAC1B;IACA;AACF;AAEA,SAASG,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKL;YACH,OAAOJ,OAAOU,cAAc;QAC9B,KAAK;YACH,OAAOV,OAAOW,eAAe;IACjC;IAEA,OAAOP;AACT;AAgCA,OAAO,MAAMQ,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYlB,kBAAkB,EAC9BmB,aAAanB,kBAAkB,EAC/BoB,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAc7B,eAAe4B;IAEnC,MAAM,EAAEE,OAAOnB,WAAW,EAAED,YAAY,MAAM,EAAEO,UAAU,EAAE,GAAGpB;IAE/D,MAAMkC,aAAa5B,mBAAmBsB,YAAYR;IAClD,MAAM,EAAEe,MAAM,EAAE,GAAGC,cAAc,GAAG7B,UAAU2B,YAAYd;IAE1D,MAAMiB,WAAWnC,WAAWkC,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAACpC;QACCoB,eAAezB,WACb,wBACAyB,eACAb,OAAO8B,IAAI,EACX7B,sBAAsBC,WAAWC,cACjCW,qBAAqB,aAAad,OAAO+B,mBAAmB,EAC5DvB,oBAAoBC;QAEtBuB,gBAAgBjC,WAAWiB;QAC3BiB,iBAAiBpC,YAAYoB;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACvB;gBAAO6B,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nfunction getViewWidthClassName(\n  viewWidth: ViewWidthType | 'none',\n  legacySizeX: SizeTypeValues | undefined,\n) {\n  // TODO [>=10]: #9015 Удалить это условие\n  if (legacySizeX !== undefined && legacySizeX === 'compact') {\n    return styles.withBorder;\n  }\n  if (viewWidth === 'none') {\n    return styles.withBorderOnSmallTabletMinus;\n  }\n  if (viewWidth < ViewWidth.SMALL_TABLET) {\n    return styles.withBorder;\n  }\n  return;\n}\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.\n   */\n  borderRadiusMode?: 'auto' | 'inherit' | undefined;\n  /**\n   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.\n   *\n   * Используйте свойство `activeMode`.\n   */\n  activeClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n  /**\n   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.\n   *\n   * Используйте свойство `hoverMode`.\n   */\n  hoverClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n}\n\n/**\n * @deprecated Не наследуйтесь от этого типа и от TappableProps.\n *\n * Компонентам не нужны лишние свойства Tappable компонента.\n */\nexport type TappableOmitProps = Omit<\n  TappableProps,\n  'DefaultComponent' | 'baseClassName' | 'baseStyle'\n>;\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX: legacySizeX, viewWidth = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        getViewWidthClassName(viewWidth, legacySizeX),\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","ViewWidth","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","styles","getViewWidthClassName","viewWidth","legacySizeX","undefined","withBorder","withBorderOnSmallTabletMinus","SMALL_TABLET","hasPointerClassName","hasPointer","hasPointerNone","hasPointerFalse","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","host","borderRadiusInherit","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAA8BC,SAAS,QAA4B,gCAAuB;AAC1F,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AACvF,OAAOC,YAAY,wBAAwB;AAE3C,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,aAAaD,gBAAgB,WAAW;QAC1D,OAAOH,OAAOK,UAAU;IAC1B;IACA,IAAIH,cAAc,QAAQ;QACxB,OAAOF,OAAOM,4BAA4B;IAC5C;IACA,IAAIJ,YAAYZ,UAAUiB,YAAY,EAAE;QACtC,OAAOP,OAAOK,UAAU;IAC1B;IACA;AACF;AAEA,SAASG,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKL;YACH,OAAOJ,OAAOU,cAAc;QAC9B,KAAK;YACH,OAAOV,OAAOW,eAAe;IACjC;IAEA,OAAOP;AACT;AAgCA,OAAO,MAAMQ,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYlB,kBAAkB,EAC9BmB,aAAanB,kBAAkB,EAC/BoB,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAc7B,eAAe4B;IAEnC,MAAM,EAAEE,OAAOnB,WAAW,EAAED,YAAY,MAAM,EAAEO,UAAU,EAAE,GAAGpB;IAE/D,MAAMkC,aAAa5B,mBAAmBsB,YAAYR;IAClD,MAAM,EAAEe,MAAM,EAAE,GAAGC,cAAc,GAAG7B,UAAU2B,YAAYd;IAE1D,MAAMiB,WAAWnC,WAAWkC,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAACpC;QACCoB,eAAezB,WACb,wBACAyB,eACAb,OAAO8B,IAAI,EACX7B,sBAAsBC,WAAWC,cACjCW,qBAAqB,aAAad,OAAO+B,mBAAmB,EAC5DvB,oBAAoBC;QAEtBuB,gBAAgBjC,WAAWiB;QAC3BiB,iBAAiBpC,YAAYoB;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACvB;gBAAO6B,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}

package/dist/cssm/components/View/View.js

@@ -5,7 +5,6 @@ import { classNames } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { millisecondsInSecond } from "../../lib/date.js";
 import { blurActiveElement, useDOM } from "../../lib/dom.js";
-import { LockFloatingPositionContext } from "../../lib/floating/LockFloatingPosition/LockFloatingPosition.js";
 import { getNavId } from "../../lib/getNavId.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { useScroll } from "../AppRoot/ScrollContext.js";
@@ -342,61 +341,59 @@ const warn = warnOnce('View');
     });
     return /*#__PURE__*/ _jsx(NavViewIdContext.Provider, {
         value: id,
-        children: /*#__PURE__*/ _jsx(LockFloatingPositionContext.Provider, {
-            value: swipingBack || animated,
-            children: /*#__PURE__*/ _jsx(Touch, {
-                Component: "section",
-                ...restProps,
-                className: classNames(styles.host, platform === 'ios' && classNames(styles.ios, 'vkuiInternalView--ios'), !disableAnimation && animated && styles.animated, !disableAnimation && swipingBack && styles.swipingBack, disableAnimation && styles.noMotion, className),
-                onMoveX: iOSSwipeBackSimulationEnabled ? handleTouchMoveXForIOSSwipeBackSimulation : platform === 'ios' ? handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext : undefined,
-                onEnd: iOSSwipeBackSimulationEnabled ? handleTouchEndForIOSSwipeBackSimulation : undefined,
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: styles.panels,
-                    children: panels.map((panel)=>{
-                        const panelId = getNavId(panel.props, warn);
-                        const isPanelActive = panelId === activePanel;
-                        const isPanelPrev = panelId === prevPanel;
-                        const isPanelNext = panelId === nextPanel;
-                        const isAnimatedTarget = animated && (isBack ? isPanelPrev : isPanelNext);
-                        const isSwipeBackPrev = panelId === swipeBackPrevPanel;
-                        const isSwipeBackNext = panelId === swipeBackNextPanel;
-                        const isSwipeBackTarget = swipeBackResult && isSwipeBackPrev;
-                        let scrollCompensateStyle = undefined;
-                        if (isPanelPrev || isPanelNext && isBack || isSwipeBackPrev || isSwipeBackNext) {
-                            const marginTop = scrolls.get(panelId);
-                            if (marginTop !== undefined) {
-                                scrollCompensateStyle = {
-                                    marginTop: -1 * marginTop
-                                };
-                            }
+        children: /*#__PURE__*/ _jsx(Touch, {
+            Component: "section",
+            ...restProps,
+            className: classNames(styles.host, platform === 'ios' && classNames(styles.ios, 'vkuiInternalView--ios'), !disableAnimation && animated && styles.animated, !disableAnimation && swipingBack && styles.swipingBack, disableAnimation && styles.noMotion, className),
+            onMoveX: iOSSwipeBackSimulationEnabled ? handleTouchMoveXForIOSSwipeBackSimulation : platform === 'ios' ? handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext : undefined,
+            onEnd: iOSSwipeBackSimulationEnabled ? handleTouchEndForIOSSwipeBackSimulation : undefined,
+            children: /*#__PURE__*/ _jsx("div", {
+                className: styles.panels,
+                children: panels.map((panel)=>{
+                    const panelId = getNavId(panel.props, warn);
+                    const isPanelActive = panelId === activePanel;
+                    const isPanelPrev = panelId === prevPanel;
+                    const isPanelNext = panelId === nextPanel;
+                    const isAnimatedTarget = animated && (isBack ? isPanelPrev : isPanelNext);
+                    const isSwipeBackPrev = panelId === swipeBackPrevPanel;
+                    const isSwipeBackNext = panelId === swipeBackNextPanel;
+                    const isSwipeBackTarget = swipeBackResult && isSwipeBackPrev;
+                    let scrollCompensateStyle = undefined;
+                    if (isPanelPrev || isPanelNext && isBack || isSwipeBackPrev || isSwipeBackNext) {
+                        const marginTop = scrolls.get(panelId);
+                        if (marginTop !== undefined) {
+                            scrollCompensateStyle = {
+                                marginTop: -1 * marginTop
+                            };
                         }
-                        return /*#__PURE__*/ _jsxs("div", {
-                            className: classNames(styles.panel, isPanelActive && styles.panelActive, isPanelPrev && styles.panelPrev, isPanelNext && styles.panelNext, isSwipeBackPrev && styles.panelSwipeBackPrev, isSwipeBackNext && styles.panelSwipeBackNext, swipeBackResult === 'success' && styles.panelSwipeBackSuccess, swipeBackResult === 'fail' && styles.panelSwipeBackFailed),
-                            onTransitionEnd: isSwipeBackTarget ? handleSwipeBackTargetTransitionEnd : undefined,
-                            onAnimationEnd: isAnimatedTarget ? handleAnimatedTargetAnimationEnd : undefined,
-                            ref: (el)=>{
-                                panelId !== undefined && (panelNodes.current[panelId] = el);
-                            },
-                            style: calcPanelSwipeStyles(isSwipeBackPrev, isSwipeBackNext),
-                            children: [
-                                platform === 'ios' && /*#__PURE__*/ _jsx("div", {
-                                    className: styles.panelOverlay,
-                                    style: calcPanelSwipeBackOverlayStyles(isSwipeBackNext)
-                                }),
-                                /*#__PURE__*/ _jsx("div", {
-                                    className: styles.panelIn,
-                                    style: scrollCompensateStyle,
-                                    children: /*#__PURE__*/ _jsx(NavTransitionDirectionProvider, {
-                                        isBack: swipingBack || isBack,
-                                        children: /*#__PURE__*/ _jsx(NavTransitionProvider, {
-                                            entering: panelId === nextPanel || panelId === swipeBackNextPanel,
-                                            children: panel
-                                        })
+                    }
+                    return /*#__PURE__*/ _jsxs("div", {
+                        className: classNames(styles.panel, isPanelActive && styles.panelActive, isPanelPrev && styles.panelPrev, isPanelNext && styles.panelNext, isSwipeBackPrev && styles.panelSwipeBackPrev, isSwipeBackNext && styles.panelSwipeBackNext, swipeBackResult === 'success' && styles.panelSwipeBackSuccess, swipeBackResult === 'fail' && styles.panelSwipeBackFailed),
+                        onTransitionEnd: isSwipeBackTarget ? handleSwipeBackTargetTransitionEnd : undefined,
+                        onAnimationEnd: isAnimatedTarget ? handleAnimatedTargetAnimationEnd : undefined,
+                        ref: (el)=>{
+                            panelId !== undefined && (panelNodes.current[panelId] = el);
+                        },
+                        style: calcPanelSwipeStyles(isSwipeBackPrev, isSwipeBackNext),
+                        children: [
+                            platform === 'ios' && /*#__PURE__*/ _jsx("div", {
+                                className: styles.panelOverlay,
+                                style: calcPanelSwipeBackOverlayStyles(isSwipeBackNext)
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: styles.panelIn,
+                                style: scrollCompensateStyle,
+                                children: /*#__PURE__*/ _jsx(NavTransitionDirectionProvider, {
+                                    isBack: swipingBack || isBack,
+                                    children: /*#__PURE__*/ _jsx(NavTransitionProvider, {
+                                        entering: panelId === nextPanel || panelId === swipeBackNextPanel,
+                                        animating: swipingBack || animated,
+                                        children: panel
                                     })
                                 })
-                            ]
-                        }, panelId);
-                    })
+                            })
+                        ]
+                    }, panelId);
                 })
             })
         })