@vkontakte/vkui 8.1.2 → 8.2.0

package/dist/components/Root/Root.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
+import { classNames, noop } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform.js";
+import { useStableCallback } from "../../hooks/useStableCallback.js";
 import { useDOM } from "../../lib/dom.js";
-import { LockFloatingPositionContext } from "../../lib/floating/LockFloatingPosition/LockFloatingPosition.js";
 import { getNavId } from "../../lib/getNavId.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { warnOnce } from "../../lib/warnOnce.js";
@@ -17,12 +17,13 @@ import { SplitColContext } from "../SplitCol/SplitColContext.js";
 /* eslint-enable jsdoc/require-jsdoc */ const warn = warnOnce('Root');
 /**
  * @see https://vkui.io/components/root
- */ export const Root = ({ children, activeView: _activeView, onTransition, nav, ...restProps })=>{
+ */ export const Root = ({ children, activeView: _activeView, onTransition: onTransitionProp, nav, ...restProps })=>{
     const scroll = React.useContext(ScrollContext);
     const platform = usePlatform();
     const { document } = useDOM();
     const [scrolls] = React.useState(()=>new Map());
     const [viewNodes] = React.useState(()=>new Map());
+    const onTransition = useStableCallback(onTransitionProp || noop);
     const { transitionMotionEnabled = true } = useConfigProvider();
     const { animate } = React.useContext(SplitColContext);
     const disableAnimation = !transitionMotionEnabled || !animate;
@@ -31,7 +32,7 @@ import { SplitColContext } from "../SplitCol/SplitColContext.js";
         activeView: _activeView,
         transition: false
     });
-    const transitionTo = (panel)=>{
+    const transitionTo = useStableCallback((panel)=>{
         if (panel !== activeView) {
             const viewIds = views.map((view)=>getNavId(view.props, warn));
             const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);
@@ -43,7 +44,7 @@ import { SplitColContext } from "../SplitCol/SplitColContext.js";
                 isBack
             });
         }
-    };
+    });
     const finishTransition = React.useCallback(()=>_setState({
             activeView,
             prevView,
@@ -57,10 +58,12 @@ import { SplitColContext } from "../SplitCol/SplitColContext.js";
     useIsomorphicLayoutEffect(()=>{
         document.activeElement.blur();
     }, [
+        document,
         activeView
     ]);
     // Нужен переход
     useIsomorphicLayoutEffect(()=>transitionTo(_activeView), [
+        transitionTo,
         _activeView
     ]);
     useIsomorphicLayoutEffect(()=>{
@@ -75,7 +78,12 @@ import { SplitColContext } from "../SplitCol/SplitColContext.js";
         }
     }, [
         transition,
-        prevView
+        prevView,
+        activeView,
+        isBack,
+        onTransition,
+        scroll,
+        scrolls
     ]);
     React.useEffect(function onAnimationEndFallback() {
         if (transition && disableAnimation) {
@@ -92,39 +100,37 @@ import { SplitColContext } from "../SplitCol/SplitColContext.js";
         }
         finishTransition();
     };
-    return /*#__PURE__*/ _jsx(LockFloatingPositionContext.Provider, {
-        value: transition,
-        children: /*#__PURE__*/ _jsx(RootComponent, {
-            ...restProps,
-            baseClassName: classNames("vkuiRoot__host", platform === 'ios' && "vkuiRoot__ios", transition && "vkuiRoot__transition"),
-            children: views.map((view)=>{
-                const viewId = getNavId(view.props, warn);
-                if (viewId !== activeView && !(transition && viewId === prevView)) {
-                    return null;
-                }
-                const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
-                const compensateScroll = transition && (viewId === prevView || isBack && viewId === activeView);
-                return /*#__PURE__*/ _jsx("div", {
-                    ref: (e)=>{
-                        viewId && viewNodes.set(viewId, e);
-                    },
-                    onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
-                    className: classNames("vkuiRoot__view", transition && viewId === prevView && isBack && "vkuiRoot__viewHideBack", transition && viewId === prevView && !isBack && "vkuiRoot__viewHideForward", transition && viewId === activeView && isBack && "vkuiRoot__viewShowBack", transition && viewId === activeView && !isBack && "vkuiRoot__viewShowForward"),
-                    children: /*#__PURE__*/ _jsx(NavTransitionDirectionProvider, {
-                        isBack: isBack,
-                        children: /*#__PURE__*/ _jsx(NavTransitionProvider, {
-                            entering: transition && viewId === activeView,
-                            children: /*#__PURE__*/ _jsx("div", {
-                                className: "vkuiRoot__scrollCompensation",
-                                style: {
-                                    marginTop: compensateScroll ? viewId && -(scrolls.get(viewId) ?? 0) : undefined
-                                },
-                                children: view
-                            })
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        ...restProps,
+        baseClassName: classNames("vkuiRoot__host", platform === 'ios' && "vkuiRoot__ios", transition && "vkuiRoot__transition"),
+        children: views.map((view)=>{
+            const viewId = getNavId(view.props, warn);
+            if (viewId !== activeView && !(transition && viewId === prevView)) {
+                return null;
+            }
+            const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
+            const compensateScroll = transition && (viewId === prevView || isBack && viewId === activeView);
+            return /*#__PURE__*/ _jsx("div", {
+                ref: (e)=>{
+                    viewId && viewNodes.set(viewId, e);
+                },
+                onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
+                className: classNames("vkuiRoot__view", transition && viewId === prevView && isBack && "vkuiRoot__viewHideBack", transition && viewId === prevView && !isBack && "vkuiRoot__viewHideForward", transition && viewId === activeView && isBack && "vkuiRoot__viewShowBack", transition && viewId === activeView && !isBack && "vkuiRoot__viewShowForward"),
+                children: /*#__PURE__*/ _jsx(NavTransitionDirectionProvider, {
+                    isBack: isBack,
+                    children: /*#__PURE__*/ _jsx(NavTransitionProvider, {
+                        entering: transition && viewId === activeView,
+                        animating: transition,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: "vkuiRoot__scrollCompensation",
+                            style: {
+                                marginTop: compensateScroll ? viewId && -(scrolls.get(viewId) ?? 0) : undefined
+                            },
+                            children: view
                         })
                     })
-                }, viewId);
-            })
+                })
+            }, viewId);
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Root/Root.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';\nimport { getNavId, type NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  /**\n   * `id` активной `View`.\n   */\n  activeView: string;\n  /**\n   * Обработчик, который вызывается при завершении анимации смены активной `View`.\n   */\n  onTransition?: ((params: { isBack: boolean; from: string; to: string }) => void) | undefined;\n  /**\n   * Коллекция `View`. У каждой `View` должен быть `id`.\n   */\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean | undefined;\n  prevView?: string | undefined;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkui.io/components/root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  ...restProps\n}: RootProps): React.ReactNode => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const [scrolls] = React.useState(() => new Map<string, number>());\n  const [viewNodes] = React.useState(() => new Map<string, HTMLElement | null>());\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as Array<React.ReactElement<NavIdProps>>;\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls.set(activeView, scroll.getScroll().y);\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls.get(activeView) : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  React.useEffect(\n    function onAnimationEndFallback() {\n      if (transition && disableAnimation) {\n        finishTransition();\n      }\n    },\n    [transition, disableAnimation, finishTransition],\n  );\n\n  const onAnimationEnd: React.AnimationEventHandler<HTMLElement> = (e) => {\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    finishTransition();\n  };\n\n  return (\n    <LockFloatingPositionContext.Provider value={transition}>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(\n          styles.host,\n          platform === 'ios' && styles.ios,\n          transition && styles.transition,\n        )}\n      >\n        {views.map((view) => {\n          const viewId = getNavId(view.props, warn);\n          if (viewId !== activeView && !(transition && viewId === prevView)) {\n            return null;\n          }\n          const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n          const compensateScroll =\n            transition && (viewId === prevView || (isBack && viewId === activeView));\n          return (\n            <div\n              key={viewId}\n              ref={(e) => {\n                viewId && viewNodes.set(viewId, e);\n              }}\n              onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n              className={classNames(\n                styles.view,\n                transition && viewId === prevView && isBack && styles.viewHideBack,\n                transition && viewId === prevView && !isBack && styles.viewHideForward,\n                transition && viewId === activeView && isBack && styles.viewShowBack,\n                transition && viewId === activeView && !isBack && styles.viewShowForward,\n              )}\n            >\n              <NavTransitionDirectionProvider isBack={isBack}>\n                <NavTransitionProvider entering={transition && viewId === activeView}>\n                  <div\n                    className={styles.scrollCompensation}\n                    style={{\n                      marginTop: compensateScroll\n                        ? viewId && -(scrolls.get(viewId) ?? 0)\n                        : undefined,\n                    }}\n                  >\n                    {view}\n                  </div>\n                </NavTransitionProvider>\n              </NavTransitionDirectionProvider>\n            </div>\n          );\n        })}\n      </RootComponent>\n    </LockFloatingPositionContext.Provider>\n  );\n};\n"],"names":["React","classNames","usePlatform","useDOM","LockFloatingPositionContext","getNavId","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useState","Map","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","set","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","get","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","e","target","currentTarget","Provider","value","baseClassName","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","entering","style","marginTop"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Root/Root.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, type NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  /**\n   * `id` активной `View`.\n   */\n  activeView: string;\n  /**\n   * Обработчик, который вызывается при завершении анимации смены активной `View`.\n   */\n  onTransition?: ((params: { isBack: boolean; from: string; to: string }) => void) | undefined;\n  /**\n   * Коллекция `View`. У каждой `View` должен быть `id`.\n   */\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean | undefined;\n  prevView?: string | undefined;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkui.io/components/root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition: onTransitionProp,\n  nav,\n  ...restProps\n}: RootProps): React.ReactNode => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const [scrolls] = React.useState(() => new Map<string, number>());\n  const [viewNodes] = React.useState(() => new Map<string, HTMLElement | null>());\n\n  const onTransition = useStableCallback(onTransitionProp || noop);\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as Array<React.ReactElement<NavIdProps>>;\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = useStableCallback((panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls.set(activeView, scroll.getScroll().y);\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  });\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [document, activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [transitionTo, _activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls.get(activeView) : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView, activeView, isBack, onTransition, scroll, scrolls]);\n\n  React.useEffect(\n    function onAnimationEndFallback() {\n      if (transition && disableAnimation) {\n        finishTransition();\n      }\n    },\n    [transition, disableAnimation, finishTransition],\n  );\n\n  const onAnimationEnd: React.AnimationEventHandler<HTMLElement> = (e) => {\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    finishTransition();\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        transition && styles.transition,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => {\n              viewId && viewNodes.set(viewId, e);\n            }}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles.view,\n              transition && viewId === prevView && isBack && styles.viewHideBack,\n              transition && viewId === prevView && !isBack && styles.viewHideForward,\n              transition && viewId === activeView && isBack && styles.viewShowBack,\n              transition && viewId === activeView && !isBack && styles.viewShowForward,\n            )}\n          >\n            <NavTransitionDirectionProvider isBack={isBack}>\n              <NavTransitionProvider\n                entering={transition && viewId === activeView}\n                animating={transition}\n              >\n                <div\n                  className={styles.scrollCompensation}\n                  style={{\n                    marginTop: compensateScroll ? viewId && -(scrolls.get(viewId) ?? 0) : undefined,\n                  }}\n                >\n                  {view}\n                </div>\n              </NavTransitionProvider>\n            </NavTransitionDirectionProvider>\n          </div>\n        );\n      })}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","usePlatform","useStableCallback","useDOM","getNavId","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","warn","Root","children","activeView","_activeView","onTransition","onTransitionProp","nav","restProps","scroll","useContext","platform","document","scrolls","useState","Map","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","set","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","get","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","e","target","currentTarget","baseClassName","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","entering","animating","style","marginTop"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,QAAQ,QAAyB,wBAAqB;AAC/D,SAASC,yBAAyB,QAAQ,yCAAsC;AAChF,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,qBAAqB,QAAQ,kDAA+C;AACrF,SAASC,8BAA8B,QAAQ,oEAAiE;AAChH,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,iCAA8B;AAyB9D,qCAAqC,GAErC,MAAMC,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,OAAO,CAAC,EACnBC,QAAQ,EACRC,YAAYC,WAAW,EACvBC,cAAcC,gBAAgB,EAC9BC,GAAG,EACH,GAAGC,WACO;IACV,MAAMC,SAASxB,MAAMyB,UAAU,CAAChB;IAChC,MAAMiB,WAAWvB;IACjB,MAAM,EAAEwB,QAAQ,EAAE,GAAGtB;IACrB,MAAM,CAACuB,QAAQ,GAAG5B,MAAM6B,QAAQ,CAAC,IAAM,IAAIC;IAC3C,MAAM,CAACC,UAAU,GAAG/B,MAAM6B,QAAQ,CAAC,IAAM,IAAIC;IAE7C,MAAMV,eAAehB,kBAAkBiB,oBAAoBnB;IAE3D,MAAM,EAAE8B,0BAA0B,IAAI,EAAE,GAAGtB;IAC3C,MAAM,EAAEuB,OAAO,EAAE,GAAGjC,MAAMyB,UAAU,CAACX;IACrC,MAAMoB,mBAAmB,CAACF,2BAA2B,CAACC;IAEtD,MAAME,QAAQnC,MAAMoC,QAAQ,CAACC,OAAO,CAACpB;IAErC,MAAM,CAAC,EAAEqB,QAAQ,EAAEpB,UAAU,EAAEqB,UAAU,EAAEC,MAAM,EAAE,EAAEC,UAAU,GAAGzC,MAAM6B,QAAQ,CAAY;QAC1FX,YAAYC;QACZoB,YAAY;IACd;IACA,MAAMG,eAAetC,kBAAkB,CAACuC;QACtC,IAAIA,UAAUzB,YAAY;YACxB,MAAM0B,UAAUT,MAAMU,GAAG,CAAC,CAACC,OAASxC,SAASwC,KAAKC,KAAK,EAAEhC;YACzD,MAAMyB,SAASI,QAAQI,OAAO,CAACL,SAASC,QAAQI,OAAO,CAAC9B;YACxDU,QAAQqB,GAAG,CAAC/B,YAAYM,OAAO0B,SAAS,GAAGC,CAAC;YAC5CV,UAAU;gBACRvB,YAAYyB;gBACZL,UAAUpB;gBACVqB,YAAY,CAACL;gBACbM;YACF;QACF;IACF;IACA,MAAMY,mBAAmBpD,MAAMqD,WAAW,CACxC,IAAMZ,UAAU;YAAEvB;YAAYoB;YAAUE;YAAQD,YAAY;QAAM,IAClE;QAACrB;QAAYsB;QAAQF;KAAS;IAGhC/B,0BAA0B;QACvBoB,SAAU2B,aAAa,CAAiBC,IAAI;IAC/C,GAAG;QAAC5B;QAAUT;KAAW;IAEzB,gBAAgB;IAChBX,0BAA0B,IAAMmC,aAAavB,cAAc;QAACuB;QAAcvB;KAAY;IACtFZ,0BAA0B;QACxB,IAAI,CAACgC,cAAcD,UAAU;YAC3B,qBAAqB;YACrBd,OAAOgC,QAAQ,CAAC,GAAGhB,SAASZ,QAAQ6B,GAAG,CAACvC,cAAc;YACtDE,gBACEA,aAAa;gBACXoB,QAAQkB,QAAQlB;gBAChBmB,MAAMrB;gBACNsB,IAAI1C;YACN;QACJ;IACF,GAAG;QAACqB;QAAYD;QAAUpB;QAAYsB;QAAQpB;QAAcI;QAAQI;KAAQ;IAE5E5B,MAAM6D,SAAS,CACb,SAASC;QACP,IAAIvB,cAAcL,kBAAkB;YAClCkB;QACF;IACF,GACA;QAACb;QAAYL;QAAkBkB;KAAiB;IAGlD,MAAMW,iBAA2D,CAACC;QAChE,IAAIA,EAAEC,MAAM,KAAKD,EAAEE,aAAa,EAAE;YAChC;QACF;QAEAd;IACF;IAEA,qBACE,KAACvC;QACE,GAAGU,SAAS;QACb4C,eAAelE,6BAEbyB,aAAa,0BACba;kBAGDJ,MAAMU,GAAG,CAAC,CAACC;YACV,MAAMsB,SAAS9D,SAASwC,KAAKC,KAAK,EAAEhC;YACpC,IAAIqD,WAAWlD,cAAc,CAAEqB,CAAAA,cAAc6B,WAAW9B,QAAO,GAAI;gBACjE,OAAO;YACT;YACA,MAAM+B,qBAAqB9B,cAAc6B,WAAY5B,CAAAA,SAASF,WAAWpB,UAAS;YAClF,MAAMoD,mBACJ/B,cAAe6B,CAAAA,WAAW9B,YAAaE,UAAU4B,WAAWlD,UAAU;YACxE,qBACE,KAACqD;gBAECC,KAAK,CAACR;oBACJI,UAAUrC,UAAUkB,GAAG,CAACmB,QAAQJ;gBAClC;gBACAD,gBAAgBM,qBAAqBN,iBAAiBU;gBACtDC,WAAWzE,6BAETsC,cAAc6B,WAAW9B,YAAYE,oCACrCD,cAAc6B,WAAW9B,YAAY,CAACE,uCACtCD,cAAc6B,WAAWlD,cAAcsB,oCACvCD,cAAc6B,WAAWlD,cAAc,CAACsB;0BAG1C,cAAA,KAAC5B;oBAA+B4B,QAAQA;8BACtC,cAAA,KAAC7B;wBACCgE,UAAUpC,cAAc6B,WAAWlD;wBACnC0D,WAAWrC;kCAEX,cAAA,KAACgC;4BACCG,SAAS;4BACTG,OAAO;gCACLC,WAAWR,mBAAmBF,UAAU,CAAExC,CAAAA,QAAQ6B,GAAG,CAACW,WAAW,CAAA,IAAKK;4BACxE;sCAEC3B;;;;eAxBFsB;QA8BX;;AAGN,EAAE"}

package/dist/components/SimpleGrid/SimpleGrid.d.ts

@@ -1,7 +1,7 @@
 import { type GapsProp } from '../../lib/layouts';
-import type { LayoutProps } from '../../lib/layouts/types';
+import type { LayoutProps, MarginProp } from '../../lib/layouts/types';
 import type { RootComponentProps } from '../RootComponent/RootComponent';
-export interface SimpleGridProps extends RootComponentProps<HTMLElement>, LayoutProps {
+export interface SimpleGridProps extends RootComponentProps<HTMLElement>, Omit<LayoutProps, 'margin'> {
     /**
      * Количество колонок.
      */
@@ -13,13 +13,14 @@ export interface SimpleGridProps extends RootComponentProps<HTMLElement>, Layout
      */
     gap?: GapsProp | undefined;
     /**
-     * Управляет отступами вокруг контейнера
-     * Значение `none` позволяет отключить отступы
-     * Значение `auto` позволяет задать платформенные отступы
-     * Значение `auto-inline` позволяет задать платформенные inline-отступы
-     * Значение `auto-block` позволяет задать платформенные block-отступы.
+     * Внешние отступы контейнера.
+     * Дополнительно поддерживаются специальные значения:
+     * `none` — отключает дополнительные отступы;
+     * `auto` — включает платформенные отступы вокруг контейнера;
+     * `auto-inline` — включает платформенные inline-отступы;
+     * `auto-block` — включает платформенные block-отступы.
      */
-    margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | undefined;
+    margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | MarginProp | undefined;
     /**
      * Вместо задания количества колонок, можно указать минимальную ширину элементов.
      */

package/dist/components/SimpleGrid/SimpleGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleGrid.d.ts","sourceRoot":"","sources":["../../../src/components/SimpleGrid/SimpleGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EAGd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAsBzE,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,CAAC,WAAW,CAAC,EAAE,WAAW;IACnF;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B;;;;OAIG;IACH,GAAG,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,GAAG,SAAS,CAAC;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;CACvD;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,qEAQxB,eAAe,4CA8BjB,CAAC"}
+{"version":3,"file":"SimpleGrid.d.ts","sourceRoot":"","sources":["../../../src/components/SimpleGrid/SimpleGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EAGd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AA+BzE,MAAM,WAAW,eACf,SAAQ,kBAAkB,CAAC,WAAW,CAAC,EACrC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B;;;;OAIG;IACH,GAAG,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;IACjF;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;CACvD;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,qEAQxB,eAAe,4CAgCjB,CAAC"}

package/dist/components/SimpleGrid/SimpleGrid.js

@@ -3,10 +3,14 @@ import { classNames } from "@vkontakte/vkjs";
 import { calculateGap, columnGapClassNames, resolveLayoutProps, rowGapClassNames } from "../../lib/layouts/index.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 const marginClassNames = {
+    'none': undefined,
     'auto': "vkuiSimpleGrid__marginAuto",
     'auto-inline': "vkuiSimpleGrid__marginAutoInline",
     'auto-block': "vkuiSimpleGrid__marginAutoBlock"
 };
+function isSpecialMargin(margin) {
+    return margin === 'auto' || margin === 'auto-inline' || margin === 'auto-block' || margin === 'none';
+}
 const alignClassNames = {
     start: "vkuiSimpleGrid__alignStart",
     end: "vkuiSimpleGrid__alignEnd",
@@ -21,7 +25,10 @@ const displayClassNames = {
 /**
  * @see https://vkui.io/components/simple-grid
  */ export const SimpleGrid = ({ columns = 1, gap = 0, margin = 'none', minColWidth, align = 'stretch', display = 'grid', ...restProps })=>{
-    const resolvedProps = resolveLayoutProps(restProps);
+    const resolvedProps = resolveLayoutProps(isSpecialMargin(margin) ? restProps : {
+        ...restProps,
+        margin
+    });
     const style = {};
     const [rowGap, columnGap] = calculateGap(gap);
     if (typeof rowGap === 'number') {
@@ -35,7 +42,7 @@ const displayClassNames = {
         style['--vkui_internal--min_col_width'] = `${minColWidth}px`;
     }
     return /*#__PURE__*/ _jsx(RootComponent, {
-        baseClassName: classNames("vkuiSimpleGrid__host", margin !== 'none' && marginClassNames[margin], alignClassNames[align], minColWidth && "vkuiSimpleGrid__withMinWidth", typeof columnGap === 'string' && columnGapClassNames[columnGap], typeof rowGap === 'string' && rowGapClassNames[rowGap], display !== 'grid' && displayClassNames[display]),
+        baseClassName: classNames("vkuiSimpleGrid__host", isSpecialMargin(margin) && marginClassNames[margin], alignClassNames[align], minColWidth && "vkuiSimpleGrid__withMinWidth", typeof columnGap === 'string' && columnGapClassNames[columnGap], typeof rowGap === 'string' && rowGapClassNames[rowGap], display !== 'grid' && displayClassNames[display]),
         baseStyle: style,
         ...resolvedProps
     });

package/dist/components/SimpleGrid/SimpleGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  resolveLayoutProps,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { LayoutProps } from '../../lib/layouts/types';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n  'auto': styles.marginAuto,\n  'auto-inline': styles.marginAutoInline,\n  'auto-block': styles.marginAutoBlock,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nconst displayClassNames = {\n  'none': styles.displayNone,\n  'inline-grid': styles.displayInlineGrid,\n};\n\nexport interface SimpleGridProps extends RootComponentProps<HTMLElement>, LayoutProps {\n  /**\n   * Количество колонок.\n   */\n  columns?: number | undefined;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp | undefined;\n  /**\n   * Управляет отступами вокруг контейнера\n   * Значение `none` позволяет отключить отступы\n   * Значение `auto` позволяет задать платформенные отступы\n   * Значение `auto-inline` позволяет задать платформенные inline-отступы\n   * Значение `auto-block` позволяет задать платформенные block-отступы.\n   */\n  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | undefined;\n  /**\n   * Вместо задания количества колонок, можно указать минимальную ширину элементов.\n   */\n  minColWidth?: number | undefined;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | undefined;\n  /**\n   * Возможность задать css-свойство `display`.\n   */\n  display?: 'none' | 'grid' | 'inline-grid' | undefined;\n}\n\n/**\n * @see https://vkui.io/components/simple-grid\n */\nexport const SimpleGrid = ({\n  columns = 1,\n  gap = 0,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  display = 'grid',\n  ...restProps\n}: SimpleGridProps) => {\n  const resolvedProps = resolveLayoutProps(restProps);\n  const style: CSSCustomProperties = {};\n  const [rowGap, columnGap] = calculateGap(gap);\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n  style['--vkui_internal--grid_columns'] = `${columns}`;\n  if (minColWidth) {\n    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n  }\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        margin !== 'none' && marginClassNames[margin],\n        alignClassNames[align],\n        minColWidth && styles.withMinWidth,\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n        display !== 'grid' && displayClassNames[display],\n      )}\n      baseStyle={style}\n      {...resolvedProps}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","resolveLayoutProps","rowGapClassNames","RootComponent","marginClassNames","alignClassNames","start","end","center","stretch","baseline","displayClassNames","SimpleGrid","columns","gap","margin","minColWidth","align","display","restProps","resolvedProps","style","rowGap","columnGap","baseClassName","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAI/D,MAAMC,mBAAmB;IACvB,MAAM;IACN,aAAa;IACb,YAAY;AACd;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,oBAAoB;IACxB,MAAM;IACN,aAAa;AACf;AAmCA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,MAAM,CAAC,EACPC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EACjBC,UAAU,MAAM,EAChB,GAAGC,WACa;IAChB,MAAMC,gBAAgBnB,mBAAmBkB;IACzC,MAAME,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAGxB,aAAae;IACzC,IAAI,OAAOQ,WAAW,UAAU;QAC9BD,KAAK,CAAC,2BAA2B,GAAG,GAAGC,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCF,KAAK,CAAC,8BAA8B,GAAG,GAAGE,UAAU,EAAE,CAAC;IACzD;IACAF,KAAK,CAAC,gCAAgC,GAAG,GAAGR,SAAS;IACrD,IAAIG,aAAa;QACfK,KAAK,CAAC,iCAAiC,GAAG,GAAGL,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACb;QACCqB,eAAe1B,mCAEbiB,WAAW,UAAUX,gBAAgB,CAACW,OAAO,EAC7CV,eAAe,CAACY,MAAM,EACtBD,+CACA,OAAOO,cAAc,YAAYvB,mBAAmB,CAACuB,UAAU,EAC/D,OAAOD,WAAW,YAAYpB,gBAAgB,CAACoB,OAAO,EACtDJ,YAAY,UAAUP,iBAAiB,CAACO,QAAQ;QAElDO,WAAWJ;QACV,GAAGD,aAAa;;AAGvB,EAAE"}
+{"version":3,"sources":["../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  resolveLayoutProps,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { LayoutProps, MarginProp } from '../../lib/layouts/types';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\ntype SpecificMargin = 'auto' | 'auto-inline' | 'auto-block' | 'none';\n\nconst marginClassNames: Record<SpecificMargin, string | undefined> = {\n  'none': undefined,\n  'auto': styles.marginAuto,\n  'auto-inline': styles.marginAutoInline,\n  'auto-block': styles.marginAutoBlock,\n};\n\nfunction isSpecialMargin(margin: SimpleGridProps['margin']): margin is SpecificMargin {\n  return (\n    margin === 'auto' || margin === 'auto-inline' || margin === 'auto-block' || margin === 'none'\n  );\n}\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nconst displayClassNames = {\n  'none': styles.displayNone,\n  'inline-grid': styles.displayInlineGrid,\n};\n\nexport interface SimpleGridProps\n  extends RootComponentProps<HTMLElement>,\n    Omit<LayoutProps, 'margin'> {\n  /**\n   * Количество колонок.\n   */\n  columns?: number | undefined;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp | undefined;\n  /**\n   * Внешние отступы контейнера.\n   * Дополнительно поддерживаются специальные значения:\n   * `none` — отключает дополнительные отступы;\n   * `auto` — включает платформенные отступы вокруг контейнера;\n   * `auto-inline` — включает платформенные inline-отступы;\n   * `auto-block` — включает платформенные block-отступы.\n   */\n  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | MarginProp | undefined;\n  /**\n   * Вместо задания количества колонок, можно указать минимальную ширину элементов.\n   */\n  minColWidth?: number | undefined;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | undefined;\n  /**\n   * Возможность задать css-свойство `display`.\n   */\n  display?: 'none' | 'grid' | 'inline-grid' | undefined;\n}\n\n/**\n * @see https://vkui.io/components/simple-grid\n */\nexport const SimpleGrid = ({\n  columns = 1,\n  gap = 0,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  display = 'grid',\n  ...restProps\n}: SimpleGridProps) => {\n  const resolvedProps = resolveLayoutProps(\n    isSpecialMargin(margin) ? restProps : { ...restProps, margin },\n  );\n  const style: CSSCustomProperties = {};\n  const [rowGap, columnGap] = calculateGap(gap);\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n  style['--vkui_internal--grid_columns'] = `${columns}`;\n  if (minColWidth) {\n    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n  }\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        isSpecialMargin(margin) && marginClassNames[margin],\n        alignClassNames[align],\n        minColWidth && styles.withMinWidth,\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n        display !== 'grid' && displayClassNames[display],\n      )}\n      baseStyle={style}\n      {...resolvedProps}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","resolveLayoutProps","rowGapClassNames","RootComponent","marginClassNames","undefined","isSpecialMargin","margin","alignClassNames","start","end","center","stretch","baseline","displayClassNames","SimpleGrid","columns","gap","minColWidth","align","display","restProps","resolvedProps","style","rowGap","columnGap","baseClassName","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAM/D,MAAMC,mBAA+D;IACnE,QAAQC;IACR,MAAM;IACN,aAAa;IACb,YAAY;AACd;AAEA,SAASC,gBAAgBC,MAAiC;IACxD,OACEA,WAAW,UAAUA,WAAW,iBAAiBA,WAAW,gBAAgBA,WAAW;AAE3F;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;IACHC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,oBAAoB;IACxB,MAAM;IACN,aAAa;AACf;AAsCA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,MAAM,CAAC,EACPV,SAAS,MAAM,EACfW,WAAW,EACXC,QAAQ,SAAS,EACjBC,UAAU,MAAM,EAChB,GAAGC,WACa;IAChB,MAAMC,gBAAgBrB,mBACpBK,gBAAgBC,UAAUc,YAAY;QAAE,GAAGA,SAAS;QAAEd;IAAO;IAE/D,MAAMgB,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAG1B,aAAakB;IACzC,IAAI,OAAOO,WAAW,UAAU;QAC9BD,KAAK,CAAC,2BAA2B,GAAG,GAAGC,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCF,KAAK,CAAC,8BAA8B,GAAG,GAAGE,UAAU,EAAE,CAAC;IACzD;IACAF,KAAK,CAAC,gCAAgC,GAAG,GAAGP,SAAS;IACrD,IAAIE,aAAa;QACfK,KAAK,CAAC,iCAAiC,GAAG,GAAGL,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACf;QACCuB,eAAe5B,mCAEbQ,gBAAgBC,WAAWH,gBAAgB,CAACG,OAAO,EACnDC,eAAe,CAACW,MAAM,EACtBD,+CACA,OAAOO,cAAc,YAAYzB,mBAAmB,CAACyB,UAAU,EAC/D,OAAOD,WAAW,YAAYtB,gBAAgB,CAACsB,OAAO,EACtDJ,YAAY,UAAUN,iBAAiB,CAACM,QAAQ;QAElDO,WAAWJ;QACV,GAAGD,aAAa;;AAGvB,EAAE"}

package/dist/components/Skeleton/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAiFlF,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,cAAc,GAAG,eAAe,CAAC,EACjE,IAAI,CACF,KAAK,CAAC,aAAa,EACjB,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,QAAQ,CACX;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,GAAI,yLAiBtB,aAAa,KAAG,KAAK,CAAC,SA6CxB,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAmFlF,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,cAAc,GAAG,eAAe,CAAC,EACjE,IAAI,CACF,KAAK,CAAC,aAAa,EACjB,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,QAAQ,CACX;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,GAAI,yLAiBtB,aAAa,KAAG,KAAK,CAAC,SA6CxB,CAAC"}

package/dist/components/Skeleton/Skeleton.js

@@ -60,20 +60,19 @@ const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
 /**
  * Вычисляет позицию скелетона.
  */ function useSkeletonPosition(rootRef) {
-    const { document, window } = useDOM();
+    const { window } = useDOM();
     const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] = useStateWithPrev('0');
     const updatePosition = React.useCallback(()=>{
         const el = rootRef.current;
-        if (!el || !document) {
+        if (!el) {
             return;
         }
-        const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);
+        const value = -(el.getBoundingClientRect().left - el.ownerDocument.body.getBoundingClientRect().left);
         const gradientValue = value === 0 ? '0' : `${value}px`;
         if (prevSkeletonGradientLeft !== gradientValue) {
             setSkeletonGradientLeft(gradientValue);
         }
     }, [
-        document,
         prevSkeletonGradientLeft,
         rootRef,
         setSkeletonGradientLeft

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { millisecondsInSecond } from '../../lib/date';\nimport { useDOM } from '../../lib/dom';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков.\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`.\n *\n * Смотри https://developer.chrome.com/blog/page-lifecycle-api/.\n *\n * @param duration Длительность анимации в секундах.\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStartedTrue, setIsAnimationStartedFalse] =\n    useBooleanState();\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStartedFalse();\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(setIsAnimationStartedTrue, delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration, setIsAnimationStartedFalse, setIsAnimationStartedTrue]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStartedFalse();\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, setIsAnimationStartedFalse, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона.\n */\nfunction useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n    useStateWithPrev('0');\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el || !document) {\n      return;\n    }\n\n    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useResizeObserver(window, updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации.\n   */\n  colorFrom?: string | undefined;\n\n  /**\n   * Финальный цвет анимации.\n   */\n  colorTo?: string | undefined;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет.\n   */\n  noAnimation?: boolean | undefined;\n\n  /**\n   * Длительность анимации в секундах.\n   */\n  duration?: number | undefined;\n\n  /**\n   * Задерживает отрисовку элемента на заданное количество миллисекунд.\n   */\n  visibilityDelay?: number | undefined;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n *\n * @see https://vkui.io/components/skeleton\n *\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  visibilityDelay,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(\n        styles.host,\n        disableAnimation && styles.disableAnimation,\n        visibilityDelay && stylesDelay.visibilityDelay,\n      )}\n      baseStyle={mergeStyle(skeletonStyle, animationVisibilityDelayStyles(visibilityDelay))}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","mergeStyle","useBooleanState","useExternRef","useResizeObserver","useStateWithPrev","millisecondsInSecond","useDOM","animationVisibilityDelayStyles","RootComponent","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStartedTrue","setIsAnimationStartedFalse","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","visibilityDelay","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","baseStyle"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SAASC,oBAAoB,QAAQ,oBAAiB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,8BAA8B,QAAQ,2CAAwC;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAI/D,MAAMC,gCAAgC;AAEtC;;;;;;;;;;;;;CAaC,GACD,SAASC,yBAAyBC,gBAAyB,EAAEC,WAAW,GAAG;IACzE,MAAM,CAACC,oBAAoBC,2BAA2BC,2BAA2B,GAC/Ed;IACF,MAAMe,QAAQlB,MAAMmB,MAAM,CAA4CC;IAEtE,MAAMC,gBAAgBrB,MAAMsB,WAAW,CAAC;QACtCC,aAAaL,MAAMM,OAAO;QAC1BP;QAEA,MAAMQ,yBAAyBX,WAAWP;QAC1C,MAAMmB,QAAQD,yBAA0BE,YAAYC,GAAG,KAAKH;QAE5DP,MAAMM,OAAO,GAAGK,WAAWb,2BAA2BU;QAEtD,OAAO,IAAMH,aAAaL,MAAMM,OAAO;IACzC,GAAG;QAACV;QAAUG;QAA4BD;KAA0B;IAEpEhB,MAAM8B,SAAS,CAAC;QACd,IAAIjB,kBAAkB;YACpBI;YACA;QACF;QAEA,IAAIF,oBAAoB;YACtB;QACF;QAEA,OAAOM;IACT,GAAG;QAACR;QAAkBE;QAAoBE;QAA4BI;KAAc;IAEpF,OAAON;AACT;AAEA;;CAEC,GACD,SAASgB,oBAAoBC,OAA4C;IACvE,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAG1B;IAC7B,MAAM,CAAC,CAAC2B,sBAAsBC,yBAAyB,EAAEC,wBAAwB,GAC/E/B,iBAAiB;IAEnB,MAAMgC,iBAAiBtC,MAAMsB,WAAW,CAAC;QACvC,MAAMiB,KAAKP,QAAQR,OAAO;QAC1B,IAAI,CAACe,MAAM,CAACN,UAAU;YACpB;QACF;QAEA,MAAMO,QAAQ,CAAED,CAAAA,GAAGE,qBAAqB,GAAGC,IAAI,GAAGT,SAASU,IAAI,CAACF,qBAAqB,GAAGC,IAAI,AAAD;QAC3F,MAAME,gBAAgBJ,UAAU,IAAI,MAAM,GAAGA,MAAM,EAAE,CAAC;QACtD,IAAIJ,6BAA6BQ,eAAe;YAC9CP,wBAAwBO;QAC1B;IACF,GAAG;QAACX;QAAUG;QAA0BJ;QAASK;KAAwB;IAEzErC,MAAM8B,SAAS,CAACQ,gBAAgB;QAACA;KAAe;IAChDjC,kBAAkB6B,QAAQI;IAE1B,OAAOH;AACT;AAyCA;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAMU,WAAW,CAAC,EACvBC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,cAAc,KAAK,EACnB1C,QAAQ,EACR2C,MAAM,EACNC,UAAU,EACVC,eAAe,EACf,GAAGC,WACW;IACd,MAAM5B,UAAU5B,aAAasD;IAE7B,MAAM7C,mBAAmB,CAACD,yBAAyB4C,aAAa1C;IAChE,MAAMqB,uBAAuBJ,oBAAoBC;IAEjD,MAAM6B,gBAA2D;QAC/Df;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAK;QACA,CAAC9C,8BAA8B,EAAEwB;IACnC;IAEA,IAAImB,WAAW;QACbO,aAAa,CAAC,uCAAuC,GAAGP;IAC1D;IAEA,IAAIC,SAAS;QACXM,aAAa,CAAC,qCAAqC,GAAGN;IACxD;IAEA,IAAIO,OAAOC,QAAQ,CAACjD,WAAW;QAC7B+C,aAAa,CAAC,+CAA+C,GAAG,GAAG/C,SAAS,CAAC,CAAC;IAChF;IAEA,qBACE,KAACJ;QACCgD,YAAY1B;QACZgC,WAAU;QACVC,eAAehE,iCAEbY,sDACA8C;QAEFO,WAAWhE,WAAW2D,eAAepD,+BAA+BkD;QACnE,GAAGC,SAAS;kBAEZP,0BAAY;sBAAE;;;AAGrB,EAAE"}
+{"version":3,"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { millisecondsInSecond } from '../../lib/date';\nimport { useDOM } from '../../lib/dom';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков.\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`.\n *\n * Смотри https://developer.chrome.com/blog/page-lifecycle-api/.\n *\n * @param duration Длительность анимации в секундах.\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStartedTrue, setIsAnimationStartedFalse] =\n    useBooleanState();\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStartedFalse();\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(setIsAnimationStartedTrue, delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration, setIsAnimationStartedFalse, setIsAnimationStartedTrue]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStartedFalse();\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, setIsAnimationStartedFalse, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона.\n */\nfunction useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {\n  const { window } = useDOM();\n  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n    useStateWithPrev('0');\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el) {\n      return;\n    }\n\n    const value = -(\n      el.getBoundingClientRect().left - el.ownerDocument.body.getBoundingClientRect().left\n    );\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useResizeObserver(window, updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации.\n   */\n  colorFrom?: string | undefined;\n\n  /**\n   * Финальный цвет анимации.\n   */\n  colorTo?: string | undefined;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет.\n   */\n  noAnimation?: boolean | undefined;\n\n  /**\n   * Длительность анимации в секундах.\n   */\n  duration?: number | undefined;\n\n  /**\n   * Задерживает отрисовку элемента на заданное количество миллисекунд.\n   */\n  visibilityDelay?: number | undefined;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n *\n * @see https://vkui.io/components/skeleton\n *\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  visibilityDelay,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(\n        styles.host,\n        disableAnimation && styles.disableAnimation,\n        visibilityDelay && stylesDelay.visibilityDelay,\n      )}\n      baseStyle={mergeStyle(skeletonStyle, animationVisibilityDelayStyles(visibilityDelay))}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","mergeStyle","useBooleanState","useExternRef","useResizeObserver","useStateWithPrev","millisecondsInSecond","useDOM","animationVisibilityDelayStyles","RootComponent","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStartedTrue","setIsAnimationStartedFalse","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","ownerDocument","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","visibilityDelay","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","baseStyle"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAS5D,YAAY,EAAE,UAAU,IAAI,kBAAkB,EAAE,CAAC;AAoBjD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEjG,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ;;;;OAIG;IACH,SAAS,CAAC,EACN;QACE,IAAI,CAAC,EACD,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GACrD,UAAU,CAAC,cAAc,CAAC,GAC1B,gBAAgB,CAAC,GACnB,SAAS,CAAC;QACd,MAAM,CAAC,EACH,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,GAAG,gBAAgB,CAAC,GAChF,SAAS,CAAC;KACf,GACD,SAAS,CAAC;IACd;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,EAAE,OAAO,KAAK,CAAA;CA0RrE,CAAC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAS5D,YAAY,EAAE,UAAU,IAAI,kBAAkB,EAAE,CAAC;AAoBjD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEjG,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ;;;;OAIG;IACH,SAAS,CAAC,EACN;QACE,IAAI,CAAC,EACD,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GACrD,UAAU,CAAC,cAAc,CAAC,GAC1B,gBAAgB,CAAC,GACnB,SAAS,CAAC;QACd,MAAM,CAAC,EACH,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,GAAG,gBAAgB,CAAC,GAChF,SAAS,CAAC;KACf,GACD,SAAS,CAAC;IACd;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,EAAE,OAAO,KAAK,CAAA;CA4RrE,CAAC"}

package/dist/components/Snackbar/Snackbar.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
+import { classNames, noop } from "@vkontakte/vkjs";
 import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useFocusWithin } from "../../hooks/useFocusWithin.js";
@@ -11,6 +11,7 @@ import { useMediaQueries } from "../../hooks/useMediaQueries.js";
 import { useMergeProps } from "../../hooks/useMergeProps.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { SnackbarsContainerContext } from "../../hooks/useSnackbarManager/components/SnackbarsContainerContext.js";
+import { useStableCallback } from "../../hooks/useStableCallback.js";
 import { useCSSKeyframesAnimationController } from "../../lib/animation/index.js";
 import { callMultiple } from "../../lib/callMultiple.js";
 import { getRelativeBoundingClientRect } from "../../lib/dom.js";
@@ -38,7 +39,7 @@ const animationStateClassNames = {
 };
 /**
  * @see https://vkui.io/components/snackbar
- */ export const Snackbar = ({ placement = 'bottom-start', children, layout, action, before, after, duration = 4000, onActionClick: onActionClickProp, onClosed, onClose, mode = 'default', subtitle, offsetY, getRootRef: getRootRefProp, slotProps, open: openProp, id, ...restProps })=>{
+ */ export const Snackbar = ({ placement = 'bottom-start', children, layout, action, before, after, duration = 4000, onActionClick: onActionClickProp, onClosed, onClose: onCloseProp, mode = 'default', subtitle, offsetY, getRootRef: getRootRefProp, slotProps, open: openProp, id, ...restProps })=>{
     const { getRootRef, ...rootRest } = useMergeProps({
         getRootRef: getRootRefProp,
         ...restProps
@@ -46,6 +47,7 @@ const animationStateClassNames = {
     const { onClick: onActionClick, ...actionRest } = useMergeProps({
         onClick: onActionClickProp
     }, slotProps?.action);
+    const onClose = useStableCallback(onCloseProp || noop);
     const platform = usePlatform();
     const { isInsideContainer, onOpen, onClosed: onClosedFromContext } = useContext(SnackbarsContainerContext);
     const [open, setOpen] = React.useState(openProp !== undefined ? openProp : true);
@@ -72,7 +74,8 @@ const animationStateClassNames = {
             setOpen(openProp);
         }
     }, [
-        openProp
+        openProp,
+        onClose
     ]);
     const clearRAF = React.useCallback(()=>{
         if (rafRef.current !== null) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport { useContext } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SnackbarsContainerContext } from '../../hooks/useSnackbarManager/components/SnackbarsContainerContext';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, type BasicProps } from './subcomponents/Basic/Basic';\nimport type { ShiftData, SnackbarPlacement } from './types';\nimport {\n  getInitialShiftData,\n  getMovedShiftData,\n  resolveOffsetYCssStyle,\n  shouldBeClosedByShiftData,\n} from './utils';\nimport styles from './Snackbar.module.css';\n\nexport type { BasicProps as SnackbarBasicProps };\n\nconst placementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n};\n\nconst animationStateClassNames = {\n  enter: styles.stateEnter,\n  entering: styles.stateEntering,\n  entered: styles.stateEntered,\n  exit: styles.stateExit,\n  exiting: styles.stateExiting,\n  exited: undefined,\n};\n\nexport type SnackbarCloseReason = 'swipe' | 'timeout' | 'click-action' | 'escape-key' | 'manual';\n\nexport interface SnackbarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n    BasicProps {\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `action`: свойства для прокидывания в кнопку действия.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &\n              HasRootRef<HTMLDivElement> &\n              HasDataAttribute)\n          | undefined;\n        action?:\n          | (React.HTMLAttributes<HTMLElement> & HasRootRef<HTMLElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * Задаёт расположение компонента.\n   *\n   * > Note: в мобильном режиме:\n   * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n   * >   уведомлениями;\n   * > - `\"bottom\"` перебивается на `\"bottom-start\"`, чтобы избежать вызова системных\n   * >   функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.\n   * > - `\"bottom-start\"`/`\"bottom-end\"` закрываются смахиванием в любое из направлений\n   * >   по горизонтальной оси.\n   */\n  placement?: SnackbarPlacement | undefined;\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`.\n   */\n  action?: React.ReactNode | undefined;\n  /**\n   * Будет вызвано при нажатии на кнопку действия.\n   */\n  onActionClick?: ((event: React.MouseEvent) => void) | undefined;\n  /**\n   * Время в миллисекундах, через которое плашка скроется.\n   */\n  duration?: number | null | undefined;\n  /**\n   * Обработчик закрытия уведомления.\n   */\n  onClose?: ((reason: SnackbarCloseReason) => void) | undefined;\n  /**\n   * Обработчик закрытия уведомления, срабатывающий после окончания анимации.\n   */\n  onClosed: () => void;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'] | undefined;\n  /**\n   * Для контролируемого управления состоянием открытия снекбара.\n   */\n  open?: boolean | undefined;\n}\n\n/**\n * @see https://vkui.io/components/snackbar\n */\nexport const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({\n  placement = 'bottom-start',\n  children,\n  layout,\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick: onActionClickProp,\n  onClosed,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\n  getRootRef: getRootRefProp,\n\n  slotProps,\n  open: openProp,\n  id,\n  ...restProps\n}: SnackbarProps) => {\n  const { getRootRef, ...rootRest } = useMergeProps(\n    {\n      getRootRef: getRootRefProp,\n      ...restProps,\n    },\n    slotProps?.root,\n  );\n\n  const { onClick: onActionClick, ...actionRest } = useMergeProps(\n    {\n      onClick: onActionClickProp,\n    },\n    slotProps?.action,\n  );\n\n  const platform = usePlatform();\n  const {\n    isInsideContainer,\n    onOpen,\n    onClosed: onClosedFromContext,\n  } = useContext(SnackbarsContainerContext);\n\n  const [open, setOpen] = React.useState(openProp !== undefined ? openProp : true);\n  const [touched, setTouched] = React.useState(false);\n\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const rootRef = useExternRef(getRootRef);\n  const focused = useFocusWithin(rootRef);\n  const inRef = React.useRef<HTMLDivElement>(null);\n  const panGestureRecognizer = React.useRef<UIPanGestureRecognizer | null>(null);\n\n  const shiftDataRef = React.useRef<ShiftData | null>(null);\n\n  const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const mediaQueries = useMediaQueries();\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    open ? 'enter' : 'exit',\n    {\n      onEnter: id ? () => onOpen(id) : undefined,\n      onExited: callMultiple(onClosed, id ? () => onClosedFromContext(id) : undefined),\n    },\n    false,\n    true,\n  );\n\n  useIsomorphicLayoutEffect(\n    function updateForceOpen() {\n      if (openProp !== undefined) {\n        if (!openProp) {\n          onClose?.('manual');\n        }\n        setOpen(openProp);\n      }\n    },\n    [openProp],\n  );\n\n  const clearRAF = React.useCallback(() => {\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  }, []);\n\n  const updateShiftAxisCSSProperties = React.useCallback(\n    (x: number | null, y: number | null, direction: number | null) => {\n      rafRef.current = requestAnimationFrame(() => {\n        if (rootRef.current) {\n          x === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x')\n            : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);\n          y === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y')\n            : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);\n          direction === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_direction')\n            : /* istanbul ignore next: TODO чтобы протестировать кейс, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n              rootRef.current.style.setProperty(\n                '--vkui_internal--snackbar_direction',\n                `${direction}`,\n              );\n        }\n      });\n    },\n    [rootRef],\n  );\n\n  const close = React.useCallback(\n    (reason: SnackbarCloseReason) => {\n      onClose?.(reason);\n      if (openProp === undefined) {\n        setOpen(false);\n      }\n    },\n    [onClose, openProp],\n  );\n\n  const handleActionClick = (event: React.MouseEvent) => {\n    close('click-action');\n    if (action) {\n      onActionClick?.(event as React.MouseEvent<HTMLElement>);\n    }\n  };\n\n  const handleTouchStart = (event: React.UIEvent<HTMLDivElement>) => {\n    panGestureRecognizer.current = new UIPanGestureRecognizer();\n    panGestureRecognizer.current.setStartCoords(event.nativeEvent);\n    shiftDataRef.current = getInitialShiftData(\n      rootRef.current!.offsetWidth,\n      rootRef.current!.offsetHeight,\n      mediaQueries,\n    );\n    setTouched(true);\n  };\n\n  const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n    if (shiftDataRef.current && panGestureRecognizer.current) {\n      panGestureRecognizer.current.setInitialTimeOnce();\n      panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n      shiftDataRef.current = getMovedShiftData(\n        placement,\n        shiftDataRef.current,\n        panGestureRecognizer.current.delta(),\n        isRtl,\n      );\n\n      if (shiftDataRef.current.shifted) {\n        updateShiftAxisCSSProperties(\n          shiftDataRef.current.x,\n          shiftDataRef.current.y,\n          shiftDataRef.current.direction,\n        );\n      }\n    }\n  };\n\n  const handleTouchEnd = () => {\n    if (\n      touched &&\n      shiftDataRef.current &&\n      panGestureRecognizer.current &&\n      shouldBeClosedByShiftData(\n        placement,\n        shiftDataRef.current,\n        getRelativeBoundingClientRect(rootRef.current!, inRef.current!),\n        panGestureRecognizer.current.velocity(),\n        isRtl,\n      )\n    ) {\n      close('swipe');\n    }\n\n    setTouched(false);\n  };\n\n  useIsomorphicLayoutEffect(\n    function closeAfterDelay() {\n      if (!open || focused || touched || animationState !== 'entered' || !duration) {\n        return;\n      }\n      const onTimeout = () => close('timeout');\n\n      closeTimeoutIdRef.current = setTimeout(onTimeout, duration);\n      return function preventCloseAfterDelayOnUnmount() {\n        clearTimeout(closeTimeoutIdRef.current);\n      };\n    },\n    [open, focused, touched, animationState, close, duration],\n  );\n\n  useIsomorphicLayoutEffect(\n    function clearUserInteractionDataAfterTouchEnd() {\n      if (!touched) {\n        clearRAF();\n        shiftDataRef.current = null;\n        panGestureRecognizer.current = null;\n\n        if (open) {\n          updateShiftAxisCSSProperties(null, null, null);\n        }\n      }\n    },\n    [touched, open, updateShiftAxisCSSProperties, clearRAF],\n  );\n\n  React.useEffect(() => clearRAF, [clearRAF]);\n\n  const onEscKeyDown = React.useCallback(() => close('escape-key'), [close]);\n\n  useGlobalEscKeyDown(open, onEscKeyDown);\n\n  if (animationState === 'exited') {\n    return null;\n  }\n\n  return (\n    <RootComponent\n      id={id}\n      role=\"presentation\"\n      baseClassName={classNames(\n        styles.host,\n        !isInsideContainer && styles.fixed,\n        platform === 'ios' && styles.ios,\n        touched && styles.touched,\n        placementClassNames[placement],\n        animationStateClassNames[animationState],\n        isRtl && styles.rtl,\n      )}\n      baseStyle={resolveOffsetYCssStyle(placement, offsetY)}\n      getRootRef={rootRef}\n      {...rootRest}\n    >\n      <div\n        role=\"alert\"\n        className={styles.in}\n        ref={inRef}\n        // mobile\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n        // desktop\n        onMouseDown={handleTouchStart}\n        onMouseMove={handleTouchMove}\n        onMouseUp={handleTouchEnd}\n        onMouseLeave={handleTouchEnd}\n        {...animationHandlers}\n      >\n        <Basic\n          mode={mode}\n          layout={layout}\n          before={before}\n          after={after}\n          subtitle={subtitle}\n          action={\n            action && (\n              <Button\n                align=\"left\"\n                mode=\"link\"\n                appearance={\n                  mode === 'dark'\n                    ? /* istanbul ignore next: проверяется в e2e */\n                      'overlay'\n                    : 'accent'\n                }\n                size=\"s\"\n                onClick={handleActionClick}\n                {...actionRest}\n              >\n                {action}\n              </Button>\n            )\n          }\n        >\n          {children}\n        </Basic>\n      </div>\n    </RootComponent>\n  );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["useContext","React","classNames","useConfigDirection","useExternRef","useFocusWithin","useGlobalEscKeyDown","useMediaQueries","useMergeProps","usePlatform","SnackbarsContainerContext","useCSSKeyframesAnimationController","callMultiple","getRelativeBoundingClientRect","UIPanGestureRecognizer","useIsomorphicLayoutEffect","Button","RootComponent","Basic","getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","placementClassNames","animationStateClassNames","enter","entering","entered","exit","exiting","exited","undefined","Snackbar","placement","children","layout","action","before","after","duration","onActionClick","onActionClickProp","onClosed","onClose","mode","subtitle","offsetY","getRootRef","getRootRefProp","slotProps","open","openProp","id","restProps","rootRest","root","onClick","actionRest","platform","isInsideContainer","onOpen","onClosedFromContext","setOpen","useState","touched","setTouched","direction","isRtl","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onEnter","onExited","updateForceOpen","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","style","removeProperty","setProperty","close","reason","handleActionClick","event","handleTouchStart","setStartCoords","nativeEvent","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","delta","shifted","handleTouchEnd","velocity","closeAfterDelay","onTimeout","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","onEscKeyDown","role","baseClassName","baseStyle","div","className","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport { useContext } from 'react';\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SnackbarsContainerContext } from '../../hooks/useSnackbarManager/components/SnackbarsContainerContext';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, type BasicProps } from './subcomponents/Basic/Basic';\nimport type { ShiftData, SnackbarPlacement } from './types';\nimport {\n  getInitialShiftData,\n  getMovedShiftData,\n  resolveOffsetYCssStyle,\n  shouldBeClosedByShiftData,\n} from './utils';\nimport styles from './Snackbar.module.css';\n\nexport type { BasicProps as SnackbarBasicProps };\n\nconst placementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n};\n\nconst animationStateClassNames = {\n  enter: styles.stateEnter,\n  entering: styles.stateEntering,\n  entered: styles.stateEntered,\n  exit: styles.stateExit,\n  exiting: styles.stateExiting,\n  exited: undefined,\n};\n\nexport type SnackbarCloseReason = 'swipe' | 'timeout' | 'click-action' | 'escape-key' | 'manual';\n\nexport interface SnackbarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n    BasicProps {\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `action`: свойства для прокидывания в кнопку действия.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &\n              HasRootRef<HTMLDivElement> &\n              HasDataAttribute)\n          | undefined;\n        action?:\n          | (React.HTMLAttributes<HTMLElement> & HasRootRef<HTMLElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * Задаёт расположение компонента.\n   *\n   * > Note: в мобильном режиме:\n   * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n   * >   уведомлениями;\n   * > - `\"bottom\"` перебивается на `\"bottom-start\"`, чтобы избежать вызова системных\n   * >   функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.\n   * > - `\"bottom-start\"`/`\"bottom-end\"` закрываются смахиванием в любое из направлений\n   * >   по горизонтальной оси.\n   */\n  placement?: SnackbarPlacement | undefined;\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`.\n   */\n  action?: React.ReactNode | undefined;\n  /**\n   * Будет вызвано при нажатии на кнопку действия.\n   */\n  onActionClick?: ((event: React.MouseEvent) => void) | undefined;\n  /**\n   * Время в миллисекундах, через которое плашка скроется.\n   */\n  duration?: number | null | undefined;\n  /**\n   * Обработчик закрытия уведомления.\n   */\n  onClose?: ((reason: SnackbarCloseReason) => void) | undefined;\n  /**\n   * Обработчик закрытия уведомления, срабатывающий после окончания анимации.\n   */\n  onClosed: () => void;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'] | undefined;\n  /**\n   * Для контролируемого управления состоянием открытия снекбара.\n   */\n  open?: boolean | undefined;\n}\n\n/**\n * @see https://vkui.io/components/snackbar\n */\nexport const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({\n  placement = 'bottom-start',\n  children,\n  layout,\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick: onActionClickProp,\n  onClosed,\n  onClose: onCloseProp,\n  mode = 'default',\n  subtitle,\n  offsetY,\n  getRootRef: getRootRefProp,\n\n  slotProps,\n  open: openProp,\n  id,\n  ...restProps\n}: SnackbarProps) => {\n  const { getRootRef, ...rootRest } = useMergeProps(\n    {\n      getRootRef: getRootRefProp,\n      ...restProps,\n    },\n    slotProps?.root,\n  );\n\n  const { onClick: onActionClick, ...actionRest } = useMergeProps(\n    {\n      onClick: onActionClickProp,\n    },\n    slotProps?.action,\n  );\n\n  const onClose = useStableCallback(onCloseProp || noop);\n\n  const platform = usePlatform();\n  const {\n    isInsideContainer,\n    onOpen,\n    onClosed: onClosedFromContext,\n  } = useContext(SnackbarsContainerContext);\n\n  const [open, setOpen] = React.useState(openProp !== undefined ? openProp : true);\n  const [touched, setTouched] = React.useState(false);\n\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const rootRef = useExternRef(getRootRef);\n  const focused = useFocusWithin(rootRef);\n  const inRef = React.useRef<HTMLDivElement>(null);\n  const panGestureRecognizer = React.useRef<UIPanGestureRecognizer | null>(null);\n\n  const shiftDataRef = React.useRef<ShiftData | null>(null);\n\n  const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const mediaQueries = useMediaQueries();\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    open ? 'enter' : 'exit',\n    {\n      onEnter: id ? () => onOpen(id) : undefined,\n      onExited: callMultiple(onClosed, id ? () => onClosedFromContext(id) : undefined),\n    },\n    false,\n    true,\n  );\n\n  useIsomorphicLayoutEffect(\n    function updateForceOpen() {\n      if (openProp !== undefined) {\n        if (!openProp) {\n          onClose?.('manual');\n        }\n        setOpen(openProp);\n      }\n    },\n    [openProp, onClose],\n  );\n\n  const clearRAF = React.useCallback(() => {\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  }, []);\n\n  const updateShiftAxisCSSProperties = React.useCallback(\n    (x: number | null, y: number | null, direction: number | null) => {\n      rafRef.current = requestAnimationFrame(() => {\n        if (rootRef.current) {\n          x === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x')\n            : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);\n          y === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y')\n            : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);\n          direction === null\n            ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_direction')\n            : /* istanbul ignore next: TODO чтобы протестировать кейс, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n              rootRef.current.style.setProperty(\n                '--vkui_internal--snackbar_direction',\n                `${direction}`,\n              );\n        }\n      });\n    },\n    [rootRef],\n  );\n\n  const close = React.useCallback(\n    (reason: SnackbarCloseReason) => {\n      onClose?.(reason);\n      if (openProp === undefined) {\n        setOpen(false);\n      }\n    },\n    [onClose, openProp],\n  );\n\n  const handleActionClick = (event: React.MouseEvent) => {\n    close('click-action');\n    if (action) {\n      onActionClick?.(event as React.MouseEvent<HTMLElement>);\n    }\n  };\n\n  const handleTouchStart = (event: React.UIEvent<HTMLDivElement>) => {\n    panGestureRecognizer.current = new UIPanGestureRecognizer();\n    panGestureRecognizer.current.setStartCoords(event.nativeEvent);\n    shiftDataRef.current = getInitialShiftData(\n      rootRef.current!.offsetWidth,\n      rootRef.current!.offsetHeight,\n      mediaQueries,\n    );\n    setTouched(true);\n  };\n\n  const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n    if (shiftDataRef.current && panGestureRecognizer.current) {\n      panGestureRecognizer.current.setInitialTimeOnce();\n      panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n      shiftDataRef.current = getMovedShiftData(\n        placement,\n        shiftDataRef.current,\n        panGestureRecognizer.current.delta(),\n        isRtl,\n      );\n\n      if (shiftDataRef.current.shifted) {\n        updateShiftAxisCSSProperties(\n          shiftDataRef.current.x,\n          shiftDataRef.current.y,\n          shiftDataRef.current.direction,\n        );\n      }\n    }\n  };\n\n  const handleTouchEnd = () => {\n    if (\n      touched &&\n      shiftDataRef.current &&\n      panGestureRecognizer.current &&\n      shouldBeClosedByShiftData(\n        placement,\n        shiftDataRef.current,\n        getRelativeBoundingClientRect(rootRef.current!, inRef.current!),\n        panGestureRecognizer.current.velocity(),\n        isRtl,\n      )\n    ) {\n      close('swipe');\n    }\n\n    setTouched(false);\n  };\n\n  useIsomorphicLayoutEffect(\n    function closeAfterDelay() {\n      if (!open || focused || touched || animationState !== 'entered' || !duration) {\n        return;\n      }\n      const onTimeout = () => close('timeout');\n\n      closeTimeoutIdRef.current = setTimeout(onTimeout, duration);\n      return function preventCloseAfterDelayOnUnmount() {\n        clearTimeout(closeTimeoutIdRef.current);\n      };\n    },\n    [open, focused, touched, animationState, close, duration],\n  );\n\n  useIsomorphicLayoutEffect(\n    function clearUserInteractionDataAfterTouchEnd() {\n      if (!touched) {\n        clearRAF();\n        shiftDataRef.current = null;\n        panGestureRecognizer.current = null;\n\n        if (open) {\n          updateShiftAxisCSSProperties(null, null, null);\n        }\n      }\n    },\n    [touched, open, updateShiftAxisCSSProperties, clearRAF],\n  );\n\n  React.useEffect(() => clearRAF, [clearRAF]);\n\n  const onEscKeyDown = React.useCallback(() => close('escape-key'), [close]);\n\n  useGlobalEscKeyDown(open, onEscKeyDown);\n\n  if (animationState === 'exited') {\n    return null;\n  }\n\n  return (\n    <RootComponent\n      id={id}\n      role=\"presentation\"\n      baseClassName={classNames(\n        styles.host,\n        !isInsideContainer && styles.fixed,\n        platform === 'ios' && styles.ios,\n        touched && styles.touched,\n        placementClassNames[placement],\n        animationStateClassNames[animationState],\n        isRtl && styles.rtl,\n      )}\n      baseStyle={resolveOffsetYCssStyle(placement, offsetY)}\n      getRootRef={rootRef}\n      {...rootRest}\n    >\n      <div\n        role=\"alert\"\n        className={styles.in}\n        ref={inRef}\n        // mobile\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n        // desktop\n        onMouseDown={handleTouchStart}\n        onMouseMove={handleTouchMove}\n        onMouseUp={handleTouchEnd}\n        onMouseLeave={handleTouchEnd}\n        {...animationHandlers}\n      >\n        <Basic\n          mode={mode}\n          layout={layout}\n          before={before}\n          after={after}\n          subtitle={subtitle}\n          action={\n            action && (\n              <Button\n                align=\"left\"\n                mode=\"link\"\n                appearance={\n                  mode === 'dark'\n                    ? /* istanbul ignore next: проверяется в e2e */\n                      'overlay'\n                    : 'accent'\n                }\n                size=\"s\"\n                onClick={handleActionClick}\n                {...actionRest}\n              >\n                {action}\n              </Button>\n            )\n          }\n        >\n          {children}\n        </Basic>\n      </div>\n    </RootComponent>\n  );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["useContext","React","classNames","noop","useConfigDirection","useExternRef","useFocusWithin","useGlobalEscKeyDown","useMediaQueries","useMergeProps","usePlatform","SnackbarsContainerContext","useStableCallback","useCSSKeyframesAnimationController","callMultiple","getRelativeBoundingClientRect","UIPanGestureRecognizer","useIsomorphicLayoutEffect","Button","RootComponent","Basic","getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","placementClassNames","animationStateClassNames","enter","entering","entered","exit","exiting","exited","undefined","Snackbar","placement","children","layout","action","before","after","duration","onActionClick","onActionClickProp","onClosed","onClose","onCloseProp","mode","subtitle","offsetY","getRootRef","getRootRefProp","slotProps","open","openProp","id","restProps","rootRest","root","onClick","actionRest","platform","isInsideContainer","onOpen","onClosedFromContext","setOpen","useState","touched","setTouched","direction","isRtl","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onEnter","onExited","updateForceOpen","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","style","removeProperty","setProperty","close","reason","handleActionClick","event","handleTouchStart","setStartCoords","nativeEvent","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","delta","shifted","handleTouchEnd","velocity","closeAfterDelay","onTimeout","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","onEscKeyDown","role","baseClassName","baseStyle","div","className","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size"],"mappings":"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"}

package/dist/components/Spacing/Spacing.d.ts

@@ -10,7 +10,7 @@ export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement>
      */
     size?: SpacingSizeProp | undefined;
     /**
-     * @deprecated 7.0.0.Будет удалeно в **VKUI v9**.
+     * @deprecated 7.0.0.Будет удалено в **VKUI v9**.
      */
     children?: React.ReactNode | undefined;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга.\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные.\n   */\n  size?: SpacingSizeProp | undefined;\n  /**\n   * @deprecated 7.0.0.Будет удалeно в **VKUI v9**.\n   */\n  children?: React.ReactNode | undefined; // TODO [>=9]: удалить неиспользуемое свойство\n}\n/**\n * @see https://vkui.io/components/spacing\n */\nexport const Spacing = ({ size = 'm', ...restProps }: SpacingProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_GAP,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      baseStyle={spacingSizeStyle}\n      baseClassName={classNames(styles.host, spacingSizeClassName)}\n    />\n  );\n};\n"],"names":["classNames","resolveSpacingSize","RootComponent","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,OAAO,MAAMC,gCAAgC,gCAAgC;AAc7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGP,mBAC/CE,+BACAE;IAEF,qBACE,KAACH;QACE,GAAGI,SAAS;QACbG,WAAWD;QACXE,eAAeV,gCAAwBO;;AAG7C,EAAE"}
+{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга.\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные.\n   */\n  size?: SpacingSizeProp | undefined;\n  /**\n   * @deprecated 7.0.0.Будет удалено в **VKUI v9**.\n   */\n  children?: React.ReactNode | undefined; // TODO [>=9]: удалить неиспользуемое свойство\n}\n/**\n * @see https://vkui.io/components/spacing\n */\nexport const Spacing = ({ size = 'm', ...restProps }: SpacingProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_GAP,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      baseStyle={spacingSizeStyle}\n      baseClassName={classNames(styles.host, spacingSizeClassName)}\n    />\n  );\n};\n"],"names":["classNames","resolveSpacingSize","RootComponent","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,OAAO,MAAMC,gCAAgC,gCAAgC;AAc7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGP,mBAC/CE,+BACAE;IAEF,qBACE,KAACH;QACE,GAAGI,SAAS;QACbG,WAAWD;QACXE,eAAeV,gCAAwBO;;AAG7C,EAAE"}