@vkontakte/vkui 8.1.2 → 8.2.0

package/dist/cssm/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";
@@ -18,12 +18,13 @@ import styles from "./Root.module.css";
 /* 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;
@@ -32,7 +33,7 @@ import styles from "./Root.module.css";
         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);
@@ -44,7 +45,7 @@ import styles from "./Root.module.css";
                 isBack
             });
         }
-    };
+    });
     const finishTransition = React.useCallback(()=>_setState({
             activeView,
             prevView,
@@ -58,10 +59,12 @@ import styles from "./Root.module.css";
     useIsomorphicLayoutEffect(()=>{
         document.activeElement.blur();
     }, [
+        document,
         activeView
     ]);
     // Нужен переход
     useIsomorphicLayoutEffect(()=>transitionTo(_activeView), [
+        transitionTo,
         _activeView
     ]);
     useIsomorphicLayoutEffect(()=>{
@@ -76,7 +79,12 @@ import styles from "./Root.module.css";
         }
     }, [
         transition,
-        prevView
+        prevView,
+        activeView,
+        isBack,
+        onTransition,
+        scroll,
+        scrolls
     ]);
     React.useEffect(function onAnimationEndFallback() {
         if (transition && disableAnimation) {
@@ -93,39 +101,37 @@ import styles from "./Root.module.css";
         }
         finishTransition();
     };
-    return /*#__PURE__*/ _jsx(LockFloatingPositionContext.Provider, {
-        value: transition,
-        children: /*#__PURE__*/ _jsx(RootComponent, {
-            ...restProps,
-            baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, transition && styles.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(styles.view, transition && viewId === prevView && isBack && styles.viewHideBack, transition && viewId === prevView && !isBack && styles.viewHideForward, transition && viewId === activeView && isBack && styles.viewShowBack, transition && viewId === activeView && !isBack && styles.viewShowForward),
-                    children: /*#__PURE__*/ _jsx(NavTransitionDirectionProvider, {
-                        isBack: isBack,
-                        children: /*#__PURE__*/ _jsx(NavTransitionProvider, {
-                            entering: transition && viewId === activeView,
-                            children: /*#__PURE__*/ _jsx("div", {
-                                className: styles.scrollCompensation,
-                                style: {
-                                    marginTop: compensateScroll ? viewId && -(scrolls.get(viewId) ?? 0) : undefined
-                                },
-                                children: view
-                            })
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        ...restProps,
+        baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, transition && styles.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(styles.view, transition && viewId === prevView && isBack && styles.viewHideBack, transition && viewId === prevView && !isBack && styles.viewHideForward, transition && viewId === activeView && isBack && styles.viewShowBack, transition && viewId === activeView && !isBack && styles.viewShowForward),
+                children: /*#__PURE__*/ _jsx(NavTransitionDirectionProvider, {
+                    isBack: isBack,
+                    children: /*#__PURE__*/ _jsx(NavTransitionProvider, {
+                        entering: transition && viewId === activeView,
+                        animating: transition,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: styles.scrollCompensation,
+                            style: {
+                                marginTop: compensateScroll ? viewId && -(scrolls.get(viewId) ?? 0) : undefined
+                            },
+                            children: view
                         })
                     })
-                }, viewId);
-            })
+                })
+            }, viewId);
         })
     });
 };

package/dist/cssm/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","styles","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","host","ios","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","viewHideBack","viewHideForward","viewShowBack","viewShowForward","entering","scrollCompensation","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","styles","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","host","ios","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","viewHideBack","viewHideForward","viewShowBack","viewShowForward","entering","animating","scrollCompensation","style","marginTop"],"mappings":"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"}

package/dist/cssm/components/SimpleGrid/SimpleGrid.js

@@ -4,10 +4,14 @@ import { calculateGap, columnGapClassNames, resolveLayoutProps, rowGapClassNames
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./SimpleGrid.module.css";
 const marginClassNames = {
+    'none': undefined,
     'auto': styles.marginAuto,
     'auto-inline': styles.marginAutoInline,
     'auto-block': styles.marginAutoBlock
 };
+function isSpecialMargin(margin) {
+    return margin === 'auto' || margin === 'auto-inline' || margin === 'auto-block' || margin === 'none';
+}
 const alignClassNames = {
     start: styles.alignStart,
     end: styles.alignEnd,
@@ -22,7 +26,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') {
@@ -36,7 +43,7 @@ const displayClassNames = {
         style['--vkui_internal--min_col_width'] = `${minColWidth}px`;
     }
     return /*#__PURE__*/ _jsx(RootComponent, {
-        baseClassName: classNames(styles.host, margin !== 'none' && marginClassNames[margin], alignClassNames[align], minColWidth && styles.withMinWidth, typeof columnGap === 'string' && columnGapClassNames[columnGap], typeof rowGap === 'string' && rowGapClassNames[rowGap], display !== 'grid' && displayClassNames[display]),
+        baseClassName: classNames(styles.host, isSpecialMargin(margin) && marginClassNames[margin], alignClassNames[align], minColWidth && styles.withMinWidth, typeof columnGap === 'string' && columnGapClassNames[columnGap], typeof rowGap === 'string' && rowGapClassNames[rowGap], display !== 'grid' && displayClassNames[display]),
         baseStyle: style,
         ...resolvedProps
     });

package/dist/cssm/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","styles","marginClassNames","marginAuto","marginAutoInline","marginAutoBlock","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","displayClassNames","displayNone","displayInlineGrid","SimpleGrid","columns","gap","margin","minColWidth","align","display","restProps","resolvedProps","style","rowGap","columnGap","baseClassName","host","withMinWidth","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,mBAAmB;IACvB,QAAQD,OAAOE,UAAU;IACzB,eAAeF,OAAOG,gBAAgB;IACtC,cAAcH,OAAOI,eAAe;AACtC;AAEA,MAAMC,kBAAkB;IACtBC,OAAON,OAAOO,UAAU;IACxBC,KAAKR,OAAOS,QAAQ;IACpBC,QAAQV,OAAOW,WAAW;IAC1BC,SAASZ,OAAOa,YAAY;IAC5BC,UAAUd,OAAOe,aAAa;AAChC;AAEA,MAAMC,oBAAoB;IACxB,QAAQhB,OAAOiB,WAAW;IAC1B,eAAejB,OAAOkB,iBAAiB;AACzC;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,gBAAgB9B,mBAAmB6B;IACzC,MAAME,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAGnC,aAAa0B;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,KAACxB;QACCgC,eAAerC,WACbM,OAAOgC,IAAI,EACXV,WAAW,UAAUrB,gBAAgB,CAACqB,OAAO,EAC7CjB,eAAe,CAACmB,MAAM,EACtBD,eAAevB,OAAOiC,YAAY,EAClC,OAAOH,cAAc,YAAYlC,mBAAmB,CAACkC,UAAU,EAC/D,OAAOD,WAAW,YAAY/B,gBAAgB,CAAC+B,OAAO,EACtDJ,YAAY,UAAUT,iBAAiB,CAACS,QAAQ;QAElDS,WAAWN;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","styles","marginClassNames","undefined","marginAuto","marginAutoInline","marginAutoBlock","isSpecialMargin","margin","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","displayClassNames","displayNone","displayInlineGrid","SimpleGrid","columns","gap","minColWidth","align","display","restProps","resolvedProps","style","rowGap","columnGap","baseClassName","host","withMinWidth","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,OAAOC,YAAY,0BAA0B;AAI7C,MAAMC,mBAA+D;IACnE,QAAQC;IACR,QAAQF,OAAOG,UAAU;IACzB,eAAeH,OAAOI,gBAAgB;IACtC,cAAcJ,OAAOK,eAAe;AACtC;AAEA,SAASC,gBAAgBC,MAAiC;IACxD,OACEA,WAAW,UAAUA,WAAW,iBAAiBA,WAAW,gBAAgBA,WAAW;AAE3F;AAEA,MAAMC,kBAAkB;IACtBC,OAAOT,OAAOU,UAAU;IACxBC,KAAKX,OAAOY,QAAQ;IACpBC,QAAQb,OAAOc,WAAW;IAC1BC,SAASf,OAAOgB,YAAY;IAC5BC,UAAUjB,OAAOkB,aAAa;AAChC;AAEA,MAAMC,oBAAoB;IACxB,QAAQnB,OAAOoB,WAAW;IAC1B,eAAepB,OAAOqB,iBAAiB;AACzC;AAsCA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,MAAM,CAAC,EACPjB,SAAS,MAAM,EACfkB,WAAW,EACXC,QAAQ,SAAS,EACjBC,UAAU,MAAM,EAChB,GAAGC,WACa;IAChB,MAAMC,gBAAgBhC,mBACpBS,gBAAgBC,UAAUqB,YAAY;QAAE,GAAGA,SAAS;QAAErB;IAAO;IAE/D,MAAMuB,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAGrC,aAAa6B;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,KAAC1B;QACCkC,eAAevC,WACbM,OAAOkC,IAAI,EACX5B,gBAAgBC,WAAWN,gBAAgB,CAACM,OAAO,EACnDC,eAAe,CAACkB,MAAM,EACtBD,eAAezB,OAAOmC,YAAY,EAClC,OAAOH,cAAc,YAAYpC,mBAAmB,CAACoC,UAAU,EAC/D,OAAOD,WAAW,YAAYjC,gBAAgB,CAACiC,OAAO,EACtDJ,YAAY,UAAUR,iBAAiB,CAACQ,QAAQ;QAElDS,WAAWN;QACV,GAAGD,aAAa;;AAGvB,EAAE"}

package/dist/cssm/components/Skeleton/Skeleton.js

@@ -62,20 +62,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/cssm/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","styles","stylesDelay","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","host","baseStyle"],"mappings":"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"}
+{"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","styles","stylesDelay","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","host","baseStyle"],"mappings":"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"}

package/dist/cssm/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";
@@ -39,7 +40,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
@@ -47,6 +48,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);
@@ -73,7 +75,8 @@ const animationStateClassNames = {
             setOpen(openProp);
         }
     }, [
-        openProp
+        openProp,
+        onClose
     ]);
     const clearRAF = React.useCallback(()=>{
         if (rafRef.current !== null) {

package/dist/cssm/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","styles","placementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","animationStateClassNames","enter","stateEnter","entering","stateEntering","entered","stateEntered","exit","stateExit","exiting","stateExiting","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","host","fixed","ios","rtl","baseStyle","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AACnC,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,mBAAmB,QAAQ,qCAAkC;AACtE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,yBAAyB,QAAQ,yEAAsE;AAChH,SAASC,kCAAkC,QAAQ,+BAAsB;AACzE,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,6BAA6B,QAAQ,mBAAgB;AAC9D,SAASC,sBAAsB,QAAQ,2BAAkB;AACzD,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,KAAK,QAAyB,iCAA8B;AAErE,SACEC,mBAAmB,EACnBC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,QACpB,aAAU;AACjB,OAAOC,YAAY,wBAAwB;AAI3C,MAAMC,sBAAsB;IAC1B,aAAaD,OAAOE,iBAAiB;IACrC,OAAOF,OAAOG,YAAY;IAC1B,WAAWH,OAAOI,eAAe;IACjC,gBAAgBJ,OAAOK,oBAAoB;IAC3C,UAAUL,OAAOM,eAAe;IAChC,cAAcN,OAAOO,kBAAkB;AACzC;AAEA,MAAMC,2BAA2B;IAC/BC,OAAOT,OAAOU,UAAU;IACxBC,UAAUX,OAAOY,aAAa;IAC9BC,SAASb,OAAOc,YAAY;IAC5BC,MAAMf,OAAOgB,SAAS;IACtBC,SAASjB,OAAOkB,YAAY;IAC5BC,QAAQC;AACV;AAmEA;;CAEC,GACD,OAAO,MAAMC,WAA8D,CAAC,EAC1EC,YAAY,cAAc,EAC1BC,QAAQ,EACRC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,WAAW,IAAI,EACfC,eAAeC,iBAAiB,EAChCC,QAAQ,EACRC,OAAO,EACPC,OAAO,SAAS,EAChBC,QAAQ,EACRC,OAAO,EACPC,YAAYC,cAAc,EAE1BC,SAAS,EACTC,MAAMC,QAAQ,EACdC,EAAE,EACF,GAAGC,WACW;IACd,MAAM,EAAEN,UAAU,EAAE,GAAGO,UAAU,GAAG1D,cAClC;QACEmD,YAAYC;QACZ,GAAGK,SAAS;IACd,GACAJ,WAAWM;IAGb,MAAM,EAAEC,SAAShB,aAAa,EAAE,GAAGiB,YAAY,GAAG7D,cAChD;QACE4D,SAASf;IACX,GACAQ,WAAWb;IAGb,MAAMsB,WAAW7D;IACjB,MAAM,EACJ8D,iBAAiB,EACjBC,MAAM,EACNlB,UAAUmB,mBAAmB,EAC9B,GAAGzE,WAAWU;IAEf,MAAM,CAACoD,MAAMY,QAAQ,GAAGzE,MAAM0E,QAAQ,CAACZ,aAAapB,YAAYoB,WAAW;IAC3E,MAAM,CAACa,SAASC,WAAW,GAAG5E,MAAM0E,QAAQ,CAAC;IAE7C,MAAMG,YAAY3E;IAClB,MAAM4E,QAAQD,cAAc;IAE5B,MAAME,UAAU5E,aAAauD;IAC7B,MAAMsB,UAAU5E,eAAe2E;IAC/B,MAAME,QAAQjF,MAAMkF,MAAM,CAAiB;IAC3C,MAAMC,uBAAuBnF,MAAMkF,MAAM,CAAgC;IAEzE,MAAME,eAAepF,MAAMkF,MAAM,CAAmB;IAEpD,MAAMG,SAASrF,MAAMkF,MAAM,CAAkD;IAC7E,MAAMI,oBAAoBtF,MAAMkF,MAAM,CAA4CxC;IAClF,MAAM6C,eAAejF;IACrB,MAAM,CAACkF,gBAAgBC,kBAAkB,GAAG/E,mCAC1CmD,OAAO,UAAU,QACjB;QACE6B,SAAS3B,KAAK,IAAMQ,OAAOR,MAAMrB;QACjCiD,UAAUhF,aAAa0C,UAAUU,KAAK,IAAMS,oBAAoBT,MAAMrB;IACxE,GACA,OACA;IAGF5B,0BACE,SAAS8E;QACP,IAAI9B,aAAapB,WAAW;YAC1B,IAAI,CAACoB,UAAU;gBACbR,UAAU;YACZ;YACAmB,QAAQX;QACV;IACF,GACA;QAACA;KAAS;IAGZ,MAAM+B,WAAW7F,MAAM8F,WAAW,CAAC;QACjC,IAAIT,OAAOU,OAAO,KAAK,MAAM;YAC3BC,qBAAqBX,OAAOU,OAAO;YACnCV,OAAOU,OAAO,GAAG;QACnB;IACF,GAAG,EAAE;IAEL,MAAME,+BAA+BjG,MAAM8F,WAAW,CACpD,CAACI,GAAkBC,GAAkBtB;QACnCQ,OAAOU,OAAO,GAAGK,sBAAsB;YACrC,IAAIrB,QAAQgB,OAAO,EAAE;gBACnBG,MAAM,OACFnB,QAAQgB,OAAO,CAACM,KAAK,CAACC,cAAc,CAAC,uCACrCvB,QAAQgB,OAAO,CAACM,KAAK,CAACE,WAAW,CAAC,qCAAqC,GAAGL,EAAE,EAAE,CAAC;gBACnFC,MAAM,OACFpB,QAAQgB,OAAO,CAACM,KAAK,CAACC,cAAc,CAAC,uCACrCvB,QAAQgB,OAAO,CAACM,KAAK,CAACE,WAAW,CAAC,qCAAqC,GAAGJ,EAAE,EAAE,CAAC;gBACnFtB,cAAc,OACVE,QAAQgB,OAAO,CAACM,KAAK,CAACC,cAAc,CAAC,yCACrC,+IAA+I,GAC/IvB,QAAQgB,OAAO,CAACM,KAAK,CAACE,WAAW,CAC/B,uCACA,GAAG1B,WAAW;YAEtB;QACF;IACF,GACA;QAACE;KAAQ;IAGX,MAAMyB,QAAQxG,MAAM8F,WAAW,CAC7B,CAACW;QACCnD,UAAUmD;QACV,IAAI3C,aAAapB,WAAW;YAC1B+B,QAAQ;QACV;IACF,GACA;QAACnB;QAASQ;KAAS;IAGrB,MAAM4C,oBAAoB,CAACC;QACzBH,MAAM;QACN,IAAIzD,QAAQ;YACVI,gBAAgBwD;QAClB;IACF;IAEA,MAAMC,mBAAmB,CAACD;QACxBxB,qBAAqBY,OAAO,GAAG,IAAIlF;QACnCsE,qBAAqBY,OAAO,CAACc,cAAc,CAACF,MAAMG,WAAW;QAC7D1B,aAAaW,OAAO,GAAG7E,oBACrB6D,QAAQgB,OAAO,CAAEgB,WAAW,EAC5BhC,QAAQgB,OAAO,CAAEiB,YAAY,EAC7BzB;QAEFX,WAAW;IACb;IAEA,MAAMqC,kBAAkB,CAACN;QACvB,IAAIvB,aAAaW,OAAO,IAAIZ,qBAAqBY,OAAO,EAAE;YACxDZ,qBAAqBY,OAAO,CAACmB,kBAAkB;YAC/C/B,qBAAqBY,OAAO,CAACoB,YAAY,CAACR,MAAMG,WAAW;YAC3D1B,aAAaW,OAAO,GAAG5E,kBACrByB,WACAwC,aAAaW,OAAO,EACpBZ,qBAAqBY,OAAO,CAACqB,KAAK,IAClCtC;YAGF,IAAIM,aAAaW,OAAO,CAACsB,OAAO,EAAE;gBAChCpB,6BACEb,aAAaW,OAAO,CAACG,CAAC,EACtBd,aAAaW,OAAO,CAACI,CAAC,EACtBf,aAAaW,OAAO,CAAClB,SAAS;YAElC;QACF;IACF;IAEA,MAAMyC,iBAAiB;QACrB,IACE3C,WACAS,aAAaW,OAAO,IACpBZ,qBAAqBY,OAAO,IAC5B1E,0BACEuB,WACAwC,aAAaW,OAAO,EACpBnF,8BAA8BmE,QAAQgB,OAAO,EAAGd,MAAMc,OAAO,GAC7DZ,qBAAqBY,OAAO,CAACwB,QAAQ,IACrCzC,QAEF;YACA0B,MAAM;QACR;QAEA5B,WAAW;IACb;IAEA9D,0BACE,SAAS0G;QACP,IAAI,CAAC3D,QAAQmB,WAAWL,WAAWa,mBAAmB,aAAa,CAACtC,UAAU;YAC5E;QACF;QACA,MAAMuE,YAAY,IAAMjB,MAAM;QAE9BlB,kBAAkBS,OAAO,GAAG2B,WAAWD,WAAWvE;QAClD,OAAO,SAASyE;YACdC,aAAatC,kBAAkBS,OAAO;QACxC;IACF,GACA;QAAClC;QAAMmB;QAASL;QAASa;QAAgBgB;QAAOtD;KAAS;IAG3DpC,0BACE,SAAS+G;QACP,IAAI,CAAClD,SAAS;YACZkB;YACAT,aAAaW,OAAO,GAAG;YACvBZ,qBAAqBY,OAAO,GAAG;YAE/B,IAAIlC,MAAM;gBACRoC,6BAA6B,MAAM,MAAM;YAC3C;QACF;IACF,GACA;QAACtB;QAASd;QAAMoC;QAA8BJ;KAAS;IAGzD7F,MAAM8H,SAAS,CAAC,IAAMjC,UAAU;QAACA;KAAS;IAE1C,MAAMkC,eAAe/H,MAAM8F,WAAW,CAAC,IAAMU,MAAM,eAAe;QAACA;KAAM;IAEzEnG,oBAAoBwD,MAAMkE;IAE1B,IAAIvC,mBAAmB,UAAU;QAC/B,OAAO;IACT;IAEA,qBACE,KAACxE;QACC+C,IAAIA;QACJiE,MAAK;QACLC,eAAehI,WACbqB,OAAO4G,IAAI,EACX,CAAC5D,qBAAqBhD,OAAO6G,KAAK,EAClC9D,aAAa,SAAS/C,OAAO8G,GAAG,EAChCzD,WAAWrD,OAAOqD,OAAO,EACzBpD,mBAAmB,CAACqB,UAAU,EAC9Bd,wBAAwB,CAAC0D,eAAe,EACxCV,SAASxD,OAAO+G,GAAG;QAErBC,WAAWlH,uBAAuBwB,WAAWa;QAC7CC,YAAYqB;QACX,GAAGd,QAAQ;kBAEZ,cAAA,KAACsE;YACCP,MAAK;YACLQ,WAAWlH,OAAOmH,EAAE;YACpBC,KAAKzD;YACL,SAAS;YACT0D,cAAc/B;YACdgC,aAAa3B;YACb4B,YAAYvB;YACZ,UAAU;YACVwB,aAAalC;YACbmC,aAAa9B;YACb+B,WAAW1B;YACX2B,cAAc3B;YACb,GAAG7B,iBAAiB;sBAErB,cAAA,KAACxE;gBACCsC,MAAMA;gBACNT,QAAQA;gBACRE,QAAQA;gBACRC,OAAOA;gBACPO,UAAUA;gBACVT,QACEA,wBACE,KAAChC;oBACCmI,OAAM;oBACN3F,MAAK;oBACL4F,YACE5F,SAAS,SACL,2CAA2C,GAC3C,YACA;oBAEN6F,MAAK;oBACLjF,SAASuC;oBACR,GAAGtC,UAAU;8BAEbrB;;0BAKNF;;;;AAKX,EAAE;AAEFF,SAAS1B,KAAK,GAAGA"}
+{"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","styles","placementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","animationStateClassNames","enter","stateEnter","entering","stateEntering","entered","stateEntered","exit","stateExit","exiting","stateExiting","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","host","fixed","ios","rtl","baseStyle","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size"],"mappings":"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"}

package/dist/cssm/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","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName","host"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAc7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGR,mBAC/CG,+BACAE;IAEF,qBACE,KAACJ;QACE,GAAGK,SAAS;QACbG,WAAWD;QACXE,eAAeX,WAAWG,OAAOS,IAAI,EAAEJ;;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","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName","host"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAc7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGR,mBAC/CG,+BACAE;IAEF,qBACE,KAACJ;QACE,GAAGK,SAAS;QACbG,WAAWD;QACXE,eAAeX,WAAWG,OAAOS,IAAI,EAAEJ;;AAG7C,EAAE"}

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

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames, hasReactNode } from "@vkontakte/vkjs";
+import { usePlatform } from "../../../hooks/usePlatform.js";
+import * as shapes from "../../../lib/material/shapes/shapes.js";
+import { animationVisibilityDelayStyles } from "../../../styles/animationVisibilityDelay.js";
+import { RootComponent } from "../../RootComponent/RootComponent.js";
+import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden.js";
+import { Spinner as SimpleSpinner } from "../Spinner.js";
+import { IconMaterial } from "./icons.js";
+import styles from "./ExpressiveSpinner.module.css";
+import stylesDelay from "../../../styles/animationVisibilityDelay.module.css";
+const iconSizeMap = {
+    s: 16,
+    m: 24,
+    l: 32,
+    xl: 44
+};
+const defaultShapesList = [
+    shapes.softBurstParams,
+    shapes.cookie9Params,
+    shapes.pentagonParams,
+    shapes.pillParams,
+    shapes.sunnyParams,
+    shapes.cookie4Params,
+    shapes.ovalParams
+];
+function MaterialSpinner({ polygons = defaultShapesList, size = 'm', children = 'Загружается...', disableAnimation = false, noColor = false, visibilityDelay, ...restProps }) {
+    const iconSize = iconSizeMap[size];
+    return /*#__PURE__*/ _jsxs(RootComponent, {
+        Component: "span",
+        role: "status",
+        ...restProps,
+        baseClassName: classNames(styles.host, noColor && styles.noColor, visibilityDelay && stylesDelay.visibilityDelay),
+        baseStyle: animationVisibilityDelayStyles(visibilityDelay),
+        children: [
+            /*#__PURE__*/ _jsx(IconMaterial, {
+                size: iconSize,
+                polygons: polygons,
+                disableAnimation: disableAnimation
+            }),
+            hasReactNode(children) && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                children: children
+            })
+        ]
+    });
+}
+export function ExpressiveSpinner(props) {
+    const platform = usePlatform();
+    const Component = platform === 'ios' ? SimpleSpinner : MaterialSpinner;
+    return /*#__PURE__*/ _jsx(Component, {
+        ...props
+    });
+}
+
+//# sourceMappingURL=ExpressiveSpinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport * as shapes from '../../../lib/material/shapes/shapes';\nimport { animationVisibilityDelayStyles } from '../../../styles/animationVisibilityDelay';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { Spinner as SimpleSpinner, type SpinnerProps } from '../Spinner';\nimport { IconMaterial } from './icons';\nimport styles from './ExpressiveSpinner.module.css';\nimport stylesDelay from '../../../styles/animationVisibilityDelay.module.css';\n\nconst iconSizeMap = {\n  s: 16,\n  m: 24,\n  l: 32,\n  xl: 44,\n} as const;\n\nconst defaultShapesList = [\n  shapes.softBurstParams,\n  shapes.cookie9Params,\n  shapes.pentagonParams,\n  shapes.pillParams,\n  shapes.sunnyParams,\n  shapes.cookie4Params,\n  shapes.ovalParams,\n] as const;\n\nexport interface MaterialSpinnerProps extends SpinnerProps {\n  /**\n   * Последовательность форм между которыми будет происходить анимация.\n   */\n  polygons?: readonly [shapes.ShapeParameters, shapes.ShapeParameters, ...shapes.ShapeParameters[]];\n}\n\nfunction MaterialSpinner({\n  polygons = defaultShapesList,\n  size = 'm',\n  children = 'Загружается...',\n  disableAnimation = false,\n  noColor = false,\n  visibilityDelay,\n  ...restProps\n}: MaterialSpinnerProps) {\n  const iconSize = iconSizeMap[size];\n\n  return (\n    <RootComponent\n      Component=\"span\"\n      role=\"status\"\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        noColor && styles.noColor,\n        visibilityDelay && stylesDelay.visibilityDelay,\n      )}\n      baseStyle={animationVisibilityDelayStyles(visibilityDelay)}\n    >\n      <IconMaterial size={iconSize} polygons={polygons} disableAnimation={disableAnimation} />\n      {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n    </RootComponent>\n  );\n}\n\nexport function ExpressiveSpinner(props: SpinnerProps) {\n  const platform = usePlatform();\n\n  const Component = platform === 'ios' ? SimpleSpinner : MaterialSpinner;\n\n  return <Component {...props} />;\n}\n"],"names":["classNames","hasReactNode","usePlatform","shapes","animationVisibilityDelayStyles","RootComponent","VisuallyHidden","Spinner","SimpleSpinner","IconMaterial","styles","stylesDelay","iconSizeMap","s","m","l","xl","defaultShapesList","softBurstParams","cookie9Params","pentagonParams","pillParams","sunnyParams","cookie4Params","ovalParams","MaterialSpinner","polygons","size","children","disableAnimation","noColor","visibilityDelay","restProps","iconSize","Component","role","baseClassName","host","baseStyle","ExpressiveSpinner","props","platform"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,gCAA6B;AACzD,YAAYC,YAAY,yCAAsC;AAC9D,SAASC,8BAA8B,QAAQ,8CAA2C;AAC1F,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,cAAc,QAAQ,yCAAsC;AACrE,SAASC,WAAWC,aAAa,QAA2B,gBAAa;AACzE,SAASC,YAAY,QAAQ,aAAU;AACvC,OAAOC,YAAY,iCAAiC;AACpD,OAAOC,iBAAiB,sDAAsD;AAE9E,MAAMC,cAAc;IAClBC,GAAG;IACHC,GAAG;IACHC,GAAG;IACHC,IAAI;AACN;AAEA,MAAMC,oBAAoB;IACxBd,OAAOe,eAAe;IACtBf,OAAOgB,aAAa;IACpBhB,OAAOiB,cAAc;IACrBjB,OAAOkB,UAAU;IACjBlB,OAAOmB,WAAW;IAClBnB,OAAOoB,aAAa;IACpBpB,OAAOqB,UAAU;CAClB;AASD,SAASC,gBAAgB,EACvBC,WAAWT,iBAAiB,EAC5BU,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACfC,eAAe,EACf,GAAGC,WACkB;IACrB,MAAMC,WAAWrB,WAAW,CAACe,KAAK;IAElC,qBACE,MAACtB;QACC6B,WAAU;QACVC,MAAK;QACJ,GAAGH,SAAS;QACbI,eAAepC,WACbU,OAAO2B,IAAI,EACXP,WAAWpB,OAAOoB,OAAO,EACzBC,mBAAmBpB,YAAYoB,eAAe;QAEhDO,WAAWlC,+BAA+B2B;;0BAE1C,KAACtB;gBAAakB,MAAMM;gBAAUP,UAAUA;gBAAUG,kBAAkBA;;YACnE5B,aAAa2B,2BAAa,KAACtB;0BAAgBsB;;;;AAGlD;AAEA,OAAO,SAASW,kBAAkBC,KAAmB;IACnD,MAAMC,WAAWvC;IAEjB,MAAMgC,YAAYO,aAAa,QAAQjC,gBAAgBiB;IAEvD,qBAAO,KAACS;QAAW,GAAGM,KAAK;;AAC7B"}