@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { type DOMProps, initializeBrowserGesturePreventionEffect, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { AnyFunction, HasChildren } from '../../types';\nimport { type ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { type CustomTouchEvent, Touch, type TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nconst WAIT_FETCHING_TIMEOUT_MS = 1000;\n\nfunction cancelEvent(event: CustomTouchEvent) {\n  /* istanbul ignore if: неясно в какой ситуации `event` из `Touch` может быть не определён */\n  if (!event) {\n    return false;\n  }\n  if ('preventDefault' in event.originalEvent && event.originalEvent.cancelable) {\n    event.originalEvent.preventDefault();\n  }\n  if ('stopPropagation' in event.originalEvent) {\n    event.originalEvent.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps): React.ReactNode => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { window } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === 'ios' ? -10 : -45,\n      max: platform === 'ios' ? 50 : 80,\n      maxY: platform === 'ios' ? 400 : 80,\n      refreshing: platform === 'ios' ? 36 : 50,\n      positionMultiplier: platform === 'ios' ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const waitFetchingTimeoutId = React.useRef<NodeJS.Timeout>();\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearTimeout(waitFetchingTimeoutId.current);\n    }\n  }, [isFetching, prevIsFetching]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      clearTimeout(waitFetchingTimeoutId.current);\n      waitFetchingTimeoutId.current = setTimeout(onRefreshingFinish, WAIT_FETCHING_TIMEOUT_MS);\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) => (platform === 'ios' ? prevSpinnerY : initParams.refreshing));\n\n      onRefresh();\n    }\n  }, [refreshing, onRefresh, onRefreshingFinish, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n        /* istanbul ignore if: TODO написать тест */\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  useIsomorphicLayoutEffect(\n    function toggleDocumentOverscrollBehavior() {\n      return window && (watching || refreshing)\n        ? initializeBrowserGesturePreventionEffect(window)\n        : undefined;\n    },\n    [window, watching, refreshing],\n  );\n\n  const startYRef = React.useRef(0);\n\n  const onTouchStart = (event: CustomTouchEvent) => {\n    if (refreshing) {\n      cancelEvent(event);\n      return;\n    }\n    setTouchDown(true);\n    startYRef.current = event.startY;\n  };\n\n  const iosRefreshStartedRef = React.useRef(false);\n  const onTouchMove = (event: CustomTouchEvent) => {\n    const { isY, shiftY } = event;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(event);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      const iosCanStartRefreshDuringGesture =\n        platform === 'ios' && progress > 85 && !refreshing && !iosRefreshStartedRef.current;\n      if (iosCanStartRefreshDuringGesture) {\n        iosRefreshStartedRef.current = true;\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(event);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n    iosRefreshStartedRef.current = false;\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === 'ios' && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === 'ios' && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        aria-live=\"polite\"\n        aria-busy={!!isFetching}\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles.host,\n          platform === 'ios' && styles.ios,\n          watching && styles.watching,\n          refreshing && styles.refreshing,\n          className,\n        )}\n      >\n        <FixedLayout className={styles.controls} useParentWidth>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles.content}\n          style={{\n            transform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","clamp","usePlatform","usePrevious","initializeBrowserGesturePreventionEffect","useDOM","useIsomorphicLayoutEffect","useScroll","FixedLayout","Touch","TouchRootContext","PullToRefreshSpinner","styles","WAIT_FETCHING_TIMEOUT_MS","cancelEvent","event","originalEvent","cancelable","preventDefault","stopPropagation","PullToRefresh","children","isFetching","onRefresh","className","restProps","platform","scroll","window","prevIsFetching","initParams","useMemo","start","max","maxY","refreshing","positionMultiplier","spinnerY","setSpinnerY","useState","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","resetRefreshingState","useCallback","onRefreshingFinish","waitFetchingTimeoutId","undefined","clearTimeout","current","runRefreshing","setTimeout","prevSpinnerY","toggleDocumentOverscrollBehavior","startYRef","onTouchStart","startY","iosRefreshStartedRef","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","currentY","progress","abs","iosCanStartRefreshDuringGesture","onTouchEnd","spinnerTransform","contentTransform","Provider","value","aria-live","aria-busy","onStart","onMove","onEnd","host","ios","controls","useParentWidth","style","transform","opacity","on","div","content"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { type DOMProps, initializeBrowserGesturePreventionEffect, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { AnyFunction, HasChildren } from '../../types';\nimport { type ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { type CustomTouchEvent, Touch, type TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nconst WAIT_FETCHING_TIMEOUT_MS = 1000;\n\nfunction cancelEvent(event: CustomTouchEvent) {\n  /* istanbul ignore if: неясно в какой ситуации `event` из `Touch` может быть не определён */\n  if (!event) {\n    return false;\n  }\n  if ('preventDefault' in event.originalEvent && event.originalEvent.cancelable) {\n    event.originalEvent.preventDefault();\n  }\n  if ('stopPropagation' in event.originalEvent) {\n    event.originalEvent.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps): React.ReactNode => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { window } = useDOM();\n\n  const prevIsFetchingRef = React.useRef<boolean | undefined>(undefined);\n  React.useEffect(() => {\n    prevIsFetchingRef.current = isFetching;\n  });\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === 'ios' ? -10 : -45,\n      max: platform === 'ios' ? 50 : 80,\n      maxY: platform === 'ios' ? 400 : 80,\n      refreshing: platform === 'ios' ? 36 : 50,\n      positionMultiplier: platform === 'ios' ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [[touchDown, prevTouchDown], setTouchDown] = useStateWithPrev(false);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const waitFetchingTimeoutId = React.useRef<NodeJS.Timeout>();\n\n  useIsomorphicLayoutEffect(() => {\n    const prevIsFetching = prevIsFetchingRef.current;\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    const prevIsFetching = prevIsFetchingRef.current;\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearTimeout(waitFetchingTimeoutId.current);\n    }\n  }, [isFetching]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      clearTimeout(waitFetchingTimeoutId.current);\n      waitFetchingTimeoutId.current = setTimeout(onRefreshingFinish, WAIT_FETCHING_TIMEOUT_MS);\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) => (platform === 'ios' ? prevSpinnerY : initParams.refreshing));\n\n      onRefresh();\n    }\n  }, [refreshing, onRefresh, onRefreshingFinish, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n        /* istanbul ignore if: TODO написать тест */\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  useIsomorphicLayoutEffect(\n    function toggleDocumentOverscrollBehavior() {\n      return window && (watching || refreshing)\n        ? initializeBrowserGesturePreventionEffect(window)\n        : undefined;\n    },\n    [window, watching, refreshing],\n  );\n\n  const startYRef = React.useRef(0);\n\n  const onTouchStart = (event: CustomTouchEvent) => {\n    if (refreshing) {\n      cancelEvent(event);\n      return;\n    }\n    setTouchDown(true);\n    startYRef.current = event.startY;\n  };\n\n  const iosRefreshStartedRef = React.useRef(false);\n  const onTouchMove = (event: CustomTouchEvent) => {\n    const { isY, shiftY } = event;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(event);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      const iosCanStartRefreshDuringGesture =\n        platform === 'ios' && progress > 85 && !refreshing && !iosRefreshStartedRef.current;\n      if (iosCanStartRefreshDuringGesture) {\n        iosRefreshStartedRef.current = true;\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(event);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n    iosRefreshStartedRef.current = false;\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === 'ios' && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === 'ios' && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        aria-live=\"polite\"\n        aria-busy={!!isFetching}\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles.host,\n          platform === 'ios' && styles.ios,\n          watching && styles.watching,\n          refreshing && styles.refreshing,\n          className,\n        )}\n      >\n        <FixedLayout className={styles.controls} useParentWidth>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles.content}\n          style={{\n            transform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","clamp","usePlatform","useStateWithPrev","initializeBrowserGesturePreventionEffect","useDOM","useIsomorphicLayoutEffect","useScroll","FixedLayout","Touch","TouchRootContext","PullToRefreshSpinner","styles","WAIT_FETCHING_TIMEOUT_MS","cancelEvent","event","originalEvent","cancelable","preventDefault","stopPropagation","PullToRefresh","children","isFetching","onRefresh","className","restProps","platform","scroll","window","prevIsFetchingRef","useRef","undefined","useEffect","current","initParams","useMemo","start","max","maxY","refreshing","positionMultiplier","spinnerY","setSpinnerY","useState","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","prevTouchDown","setTouchDown","touchY","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","resetRefreshingState","useCallback","onRefreshingFinish","waitFetchingTimeoutId","prevIsFetching","clearTimeout","runRefreshing","setTimeout","prevSpinnerY","toggleDocumentOverscrollBehavior","startYRef","onTouchStart","startY","iosRefreshStartedRef","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","currentY","progress","abs","iosCanStartRefreshDuringGesture","onTouchEnd","spinnerTransform","contentTransform","Provider","value","aria-live","aria-busy","onStart","onMove","onEnd","host","ios","controls","useParentWidth","style","transform","opacity","on","div","content"],"mappings":"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"}

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { ModalPopoutPortal } from "../AppRoot/ModalPopoutPortal.js";
 import { useScrollLock } from "../AppRoot/ScrollContext.js";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper.js";
 import { ScreenSpinnerContainer } from "./ScreenSpinnerContainer.js";
@@ -8,26 +9,29 @@ import { ScreenSpinnerLoader } from "./ScreenSpinnerLoader.js";
 import { ScreenSpinnerSwapIcon } from "./ScreenSpinnerSwapIcon.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
- */ export const ScreenSpinner = ({ style, className, state = 'loading', onClick, cancelLabel, mode, label, customIcon, ...restProps })=>{
+ */ export const ScreenSpinner = ({ style, className, state = 'loading', onClick, cancelLabel, mode, label, customIcon, usePortal, ...restProps })=>{
     useScrollLock();
-    return /*#__PURE__*/ _jsx(PopoutWrapper, {
-        className: className,
-        style: style,
-        noBackground: true,
-        children: /*#__PURE__*/ _jsxs(ScreenSpinnerContainer, {
-            state: state,
-            mode: mode,
-            label: label,
-            customIcon: customIcon,
-            children: [
-                /*#__PURE__*/ _jsx(ScreenSpinnerLoader, {
-                    ...restProps
-                }),
-                /*#__PURE__*/ _jsx(ScreenSpinnerSwapIcon, {
-                    onClick: onClick,
-                    cancelLabel: cancelLabel
-                })
-            ]
+    return /*#__PURE__*/ _jsx(ModalPopoutPortal, {
+        usePortal: usePortal,
+        children: /*#__PURE__*/ _jsx(PopoutWrapper, {
+            className: className,
+            style: style,
+            noBackground: true,
+            children: /*#__PURE__*/ _jsxs(ScreenSpinnerContainer, {
+                state: state,
+                mode: mode,
+                label: label,
+                customIcon: customIcon,
+                children: [
+                    /*#__PURE__*/ _jsx(ScreenSpinnerLoader, {
+                        ...restProps
+                    }),
+                    /*#__PURE__*/ _jsx(ScreenSpinnerSwapIcon, {
+                        onClick: onClick,
+                        cancelLabel: cancelLabel
+                    })
+                ]
+            })
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  label,\n  customIcon,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} style={style} noBackground>\n      <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>\n        <ScreenSpinnerLoader {...restProps} />\n        <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n      </ScreenSpinnerContainer>\n    </PopoutWrapper>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","label","customIcon","restProps","noBackground","displayName","Container","Loader","SwapIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT,CAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACV,GAAGC,WACgB;IACnBd;IAEA,qBACE,KAACC;QAAcM,WAAWA;QAAWD,OAAOA;QAAOS,YAAY;kBAC7D,cAAA,MAACb;YAAuBM,OAAOA;YAAOG,MAAMA;YAAMC,OAAOA;YAAOC,YAAYA;;8BAC1E,KAACV;oBAAqB,GAAGW,SAAS;;8BAClC,KAACV;oBAAsBK,SAASA;oBAASC,aAAaA;;;;;AAI9D,EAAE;AAEFL,cAAcW,WAAW,GAAG;AAE5BX,cAAcY,SAAS,GAAGf;AAC1BG,cAAcY,SAAS,CAACD,WAAW,GAAG;AAEtCX,cAAca,MAAM,GAAGf;AACvBE,cAAca,MAAM,CAACF,WAAW,GAAG;AAEnCX,cAAcc,QAAQ,GAAGf;AACzBC,cAAcc,QAAQ,CAACH,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  label,\n  customIcon,\n  usePortal,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <ModalPopoutPortal usePortal={usePortal}>\n      <PopoutWrapper className={className} style={style} noBackground>\n        <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>\n          <ScreenSpinnerLoader {...restProps} />\n          <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n        </ScreenSpinnerContainer>\n      </PopoutWrapper>\n    </ModalPopoutPortal>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","ModalPopoutPortal","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","label","customIcon","usePortal","restProps","noBackground","displayName","Container","Loader","SwapIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,kCAA+B;AACjE,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT,CAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACT,GAAGC,WACgB;IACnBf;IAEA,qBACE,KAACD;QAAkBe,WAAWA;kBAC5B,cAAA,KAACb;YAAcM,WAAWA;YAAWD,OAAOA;YAAOU,YAAY;sBAC7D,cAAA,MAACd;gBAAuBM,OAAOA;gBAAOG,MAAMA;gBAAMC,OAAOA;gBAAOC,YAAYA;;kCAC1E,KAACV;wBAAqB,GAAGY,SAAS;;kCAClC,KAACX;wBAAsBK,SAASA;wBAASC,aAAaA;;;;;;AAKhE,EAAE;AAEFL,cAAcY,WAAW,GAAG;AAE5BZ,cAAca,SAAS,GAAGhB;AAC1BG,cAAca,SAAS,CAACD,WAAW,GAAG;AAEtCZ,cAAcc,MAAM,GAAGhB;AACvBE,cAAcc,MAAM,CAACF,WAAW,GAAG;AAEnCZ,cAAce,QAAQ,GAAGhB;AACzBC,cAAce,QAAQ,CAACH,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/types.tsx"],"sourcesContent":["import type * as React from 'react';\nimport type { SpinnerProps } from '../Spinner/Spinner';\n\nexport type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> & {\n  state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom';\n  /**\n   * Кастомная иконка, работает совместно со `state=\"custom\"`\n   */\n  customIcon?: React.ReactNode;\n  mode?: 'shadow' | 'overlay';\n  /**\n   * Текст под иконкой\n   */\n  label?: React.ReactNode;\n  cancelLabel?: string;\n};\n"],"names":[],"mappings":"AAGA,WAYE"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/types.tsx"],"sourcesContent":["import type * as React from 'react';\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\nimport type { SpinnerProps } from '../Spinner/Spinner';\n\nexport type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> & {\n  state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom';\n  /**\n   * Кастомная иконка, работает совместно со `state=\"custom\"`\n   */\n  customIcon?: React.ReactNode;\n  mode?: 'shadow' | 'overlay';\n  /**\n   * Текст под иконкой\n   */\n  label?: React.ReactNode;\n  cancelLabel?: string;\n  usePortal?: AppRootPortalProps['usePortal'];\n};\n"],"names":[],"mappings":"AAIA,WAaE"}

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

@@ -211,9 +211,9 @@
   inline-size: initial;
 }
 
-/* FIXME поменять на `:global(.vkuiInternalGroup--mode-plain)` */
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
-.modePlain .host {
+:global(.vkuiInternalGroup--mode-plain) .host {
   -webkit-padding-before: 4px;
           padding-block-start: 4px;
 }

package/dist/cssm/components/Separator/Separator.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@vkontakte/vkjs";
-import { spacingSizeClassNames } from "../../lib/spacings/sizes.js";
+import { resolveSpacingSize } from "../../lib/spacings/sizes.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./Separator.module.css";
 export const CUSTOM_CSS_TOKEN_FOR_USER_SIZE = '--vkui_internal--spacing_size';
@@ -19,18 +19,19 @@ const alignClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
- */ export const Separator = ({ padding = false, appearance = 'primary', direction = 'horizontal', align = 'center', style, size, ...restProps })=>/*#__PURE__*/ _jsx(RootComponent, {
+ */ export const Separator = ({ padding = false, appearance = 'primary', direction = 'horizontal', align = 'center', style, size, ...restProps })=>{
+    const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(CUSTOM_CSS_TOKEN_FOR_USER_SIZE, size);
+    return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
-        baseClassName: classNames(padding && styles.padded, appearanceClassNames[appearance], typeof size === 'string' && spacingSizeClassNames[size], directionClassNames[direction], size !== undefined && styles.sized, align !== 'center' && alignClassNames[align]),
-        style: {
-            ...typeof size === 'number' && {
-                [CUSTOM_CSS_TOKEN_FOR_USER_SIZE]: `${size}px`
-            },
+        baseClassName: classNames(padding && styles.padded, appearanceClassNames[appearance], directionClassNames[direction], size !== undefined && styles.sized, align !== 'center' && alignClassNames[align], spacingSizeClassName),
+        style: spacingSizeStyle ? {
+            ...spacingSizeStyle,
             ...style
-        },
+        } : style,
         children: /*#__PURE__*/ _jsx("hr", {
             className: styles.in
         })
     });
+};
 
 //# sourceMappingURL=Separator.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { spacingSizeClassNames, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_SIZE = '--vkui_internal--spacing_size';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения разделителя\n   */\n  appearance?: 'primary' | 'secondary' | 'primary-alpha';\n  /**\n   * Добавляет стандартные отступы у разделителя\n   */\n  padding?: boolean;\n  /**\n   * Направление отображения разделителя\n   */\n  direction?: 'horizontal' | 'vertical';\n  /**\n   * Размер контейнера, в который вложен разделитель\n   */\n  size?: SpacingSizeProp;\n  /**\n   * Выравнивание разделителя в контейнере\n   */\n  align?: 'start' | 'center' | 'end';\n}\n\nconst appearanceClassNames = {\n  'primary': styles.appearancePrimary,\n  'secondary': styles.appearanceSecondary,\n  'primary-alpha': styles.appearancePrimaryAlpha,\n};\n\nconst directionClassNames = {\n  horizontal: styles.directionHorizontal,\n  vertical: styles.directionVertical,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n  padding = false,\n  appearance = 'primary',\n  direction = 'horizontal',\n  align = 'center',\n  style,\n  size,\n  ...restProps\n}: SeparatorProps): React.ReactNode => (\n  <RootComponent\n    {...restProps}\n    baseClassName={classNames(\n      padding && styles.padded,\n      appearanceClassNames[appearance],\n      typeof size === 'string' && spacingSizeClassNames[size],\n      directionClassNames[direction],\n      size !== undefined && styles.sized,\n      align !== 'center' && alignClassNames[align],\n    )}\n    style={{\n      ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_USER_SIZE]: `${size}px` }),\n      ...style,\n    }}\n  >\n    <hr className={styles.in} />\n  </RootComponent>\n);\n"],"names":["classNames","spacingSizeClassNames","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_SIZE","appearanceClassNames","appearancePrimary","appearanceSecondary","appearancePrimaryAlpha","directionClassNames","horizontal","directionHorizontal","vertical","directionVertical","alignClassNames","start","alignStart","end","alignEnd","Separator","padding","appearance","direction","align","style","size","restProps","baseClassName","padded","undefined","sized","hr","className","in"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,qBAAqB,QAA8B,8BAA2B;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,iCAAiC,gCAAgC;AAyB9E,MAAMC,uBAAuB;IAC3B,WAAWF,OAAOG,iBAAiB;IACnC,aAAaH,OAAOI,mBAAmB;IACvC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,sBAAsB;IAC1BC,YAAYP,OAAOQ,mBAAmB;IACtCC,UAAUT,OAAOU,iBAAiB;AACpC;AAEA,MAAMC,kBAAkB;IACtBC,OAAOZ,OAAOa,UAAU;IACxBC,KAAKd,OAAOe,QAAQ;AACtB;AAEA;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,UAAU,KAAK,EACfC,aAAa,SAAS,EACtBC,YAAY,YAAY,EACxBC,QAAQ,QAAQ,EAChBC,KAAK,EACLC,IAAI,EACJ,GAAGC,WACY,iBACf,KAACxB;QACE,GAAGwB,SAAS;QACbC,eAAe3B,WACboB,WAAWjB,OAAOyB,MAAM,EACxBvB,oBAAoB,CAACgB,WAAW,EAChC,OAAOI,SAAS,YAAYxB,qBAAqB,CAACwB,KAAK,EACvDhB,mBAAmB,CAACa,UAAU,EAC9BG,SAASI,aAAa1B,OAAO2B,KAAK,EAClCP,UAAU,YAAYT,eAAe,CAACS,MAAM;QAE9CC,OAAO;YACL,GAAI,OAAOC,SAAS,YAAY;gBAAE,CAACrB,+BAA+B,EAAE,GAAGqB,KAAK,EAAE,CAAC;YAAC,CAAC;YACjF,GAAGD,KAAK;QACV;kBAEA,cAAA,KAACO;YAAGC,WAAW7B,OAAO8B,EAAE;;OAE1B"}
+{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { 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 './Separator.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_SIZE = '--vkui_internal--spacing_size';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения разделителя\n   */\n  appearance?: 'primary' | 'secondary' | 'primary-alpha';\n  /**\n   * Добавляет стандартные отступы у разделителя\n   */\n  padding?: boolean;\n  /**\n   * Направление отображения разделителя\n   */\n  direction?: 'horizontal' | 'vertical';\n  /**\n   * Размер контейнера, в который вложен разделитель\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные\n   */\n  size?: SpacingSizeProp;\n  /**\n   * Выравнивание разделителя в контейнере\n   */\n  align?: 'start' | 'center' | 'end';\n}\n\nconst appearanceClassNames = {\n  'primary': styles.appearancePrimary,\n  'secondary': styles.appearanceSecondary,\n  'primary-alpha': styles.appearancePrimaryAlpha,\n};\n\nconst directionClassNames = {\n  horizontal: styles.directionHorizontal,\n  vertical: styles.directionVertical,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n  padding = false,\n  appearance = 'primary',\n  direction = 'horizontal',\n  align = 'center',\n  style,\n  size,\n  ...restProps\n}: SeparatorProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_SIZE,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        padding && styles.padded,\n        appearanceClassNames[appearance],\n        directionClassNames[direction],\n        size !== undefined && styles.sized,\n        align !== 'center' && alignClassNames[align],\n        spacingSizeClassName,\n      )}\n      style={\n        spacingSizeStyle\n          ? {\n              ...spacingSizeStyle,\n              ...style,\n            }\n          : style\n      }\n    >\n      <hr className={styles.in} />\n    </RootComponent>\n  );\n};\n"],"names":["classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_SIZE","appearanceClassNames","appearancePrimary","appearanceSecondary","appearancePrimaryAlpha","directionClassNames","horizontal","directionHorizontal","vertical","directionVertical","alignClassNames","start","alignStart","end","alignEnd","Separator","padding","appearance","direction","align","style","size","restProps","spacingSizeClassName","spacingSizeStyle","baseClassName","padded","undefined","sized","hr","className","in"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,iCAAiC,gCAAgC;AA2B9E,MAAMC,uBAAuB;IAC3B,WAAWF,OAAOG,iBAAiB;IACnC,aAAaH,OAAOI,mBAAmB;IACvC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,sBAAsB;IAC1BC,YAAYP,OAAOQ,mBAAmB;IACtCC,UAAUT,OAAOU,iBAAiB;AACpC;AAEA,MAAMC,kBAAkB;IACtBC,OAAOZ,OAAOa,UAAU;IACxBC,KAAKd,OAAOe,QAAQ;AACtB;AAEA;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,UAAU,KAAK,EACfC,aAAa,SAAS,EACtBC,YAAY,YAAY,EACxBC,QAAQ,QAAQ,EAChBC,KAAK,EACLC,IAAI,EACJ,GAAGC,WACY;IACf,MAAM,CAACC,sBAAsBC,iBAAiB,GAAG3B,mBAC/CG,gCACAqB;IAEF,qBACE,KAACvB;QACE,GAAGwB,SAAS;QACbG,eAAe7B,WACboB,WAAWjB,OAAO2B,MAAM,EACxBzB,oBAAoB,CAACgB,WAAW,EAChCZ,mBAAmB,CAACa,UAAU,EAC9BG,SAASM,aAAa5B,OAAO6B,KAAK,EAClCT,UAAU,YAAYT,eAAe,CAACS,MAAM,EAC5CI;QAEFH,OACEI,mBACI;YACE,GAAGA,gBAAgB;YACnB,GAAGJ,KAAK;QACV,IACAA;kBAGN,cAAA,KAACS;YAAGC,WAAW/B,OAAOgC,EAAE;;;AAG9B,EAAE"}

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

@@ -5,7 +5,7 @@ import { classNames } from "@vkontakte/vkjs";
 import { millisecondsInSecond } from "date-fns/constants";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener.js";
-import { usePrevious } from "../../hooks/usePrevious.js";
+import { useStateWithPrev } from "../../hooks/useStateWithPrev.js";
 import { useDOM } from "../../lib/dom.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./Skeleton.module.css";
@@ -56,8 +56,7 @@ const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
  * Вычисляет позицию скелетона
  */ function useSkeletonPosition(rootRef) {
     const { document, window } = useDOM();
-    const [skeletonGradientLeft, setSkeletonGradientLeft] = React.useState('0');
-    const prevSkeletonGradientLeft = usePrevious(skeletonGradientLeft);
+    const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] = useStateWithPrev('0');
     const updatePosition = React.useCallback(()=>{
         const el = rootRef.current;
         if (!el || !document) {
@@ -71,7 +70,8 @@ const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
     }, [
         document,
         prevSkeletonGradientLeft,
-        rootRef
+        rootRef,
+        setSkeletonGradientLeft
     ]);
     React.useEffect(updatePosition, [
         updatePosition

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 { millisecondsInSecond } from 'date-fns/constants';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.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, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона\n */\nfunction useSkeletonPosition(rootRef: React.MutableRefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [skeletonGradientLeft, setSkeletonGradientLeft] = React.useState('0');\n  const prevSkeletonGradientLeft = usePrevious(skeletonGradientLeft);\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]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useGlobalEventListener(window, 'resize', 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;\n\n  /**\n   * Финальный цвет анимации\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах\n   */\n  duration?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  style,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\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(styles.host, disableAnimation && styles.disableAnimation)}\n      style={{ ...skeletonStyle, ...style }}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useGlobalEventListener","usePrevious","useDOM","RootComponent","styles","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","setSkeletonGradientLeft","prevSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","margin","getRootRef","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host"],"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 { millisecondsInSecond } from 'date-fns/constants';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.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, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона\n */\nfunction useSkeletonPosition(rootRef: React.MutableRefObject<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  useGlobalEventListener(window, 'resize', 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;\n\n  /**\n   * Финальный цвет анимации\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах\n   */\n  duration?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  style,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\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(styles.host, disableAnimation && styles.disableAnimation)}\n      style={{ ...skeletonStyle, ...style }}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useGlobalEventListener","useStateWithPrev","useDOM","RootComponent","styles","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","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","style","children","colorFrom","colorTo","noAnimation","margin","getRootRef","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,oBAAoB,QAAQ,qBAAqB;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,sBAAsB,QAAQ,wCAAqC;AAC5E,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SAASC,MAAM,QAAQ,mBAAgB;AAEvC,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,gCAAgC;AAEtC;;;;;;;;;;;;;CAaC,GACD,SAASC,yBAAyBC,gBAAyB,EAAEC,WAAW,GAAG;IACzE,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGd,MAAMe,QAAQ,CAAU;IAC5E,MAAMC,QAAQhB,MAAMiB,MAAM,CAA4CC;IAEtE,MAAMC,gBAAgBnB,MAAMoB,WAAW,CAAC;QACtCC,aAAaL,MAAMM,OAAO;QAC1BR,sBAAsB;QAEtB,MAAMS,yBAAyBX,WAAWV;QAC1C,MAAMsB,QAAQD,yBAA0BE,YAAYC,GAAG,KAAKH;QAE5DP,MAAMM,OAAO,GAAGK,WAAW,IAAMb,sBAAsB,OAAOU;QAE9D,OAAO,IAAMH,aAAaL,MAAMM,OAAO;IACzC,GAAG;QAACV;KAAS;IAEbZ,MAAM4B,SAAS,CAAC;QACd,IAAIjB,kBAAkB;YACpBG,sBAAsB;YACtB;QACF;QAEA,IAAID,oBAAoB;YACtB;QACF;QAEA,OAAOM;IACT,GAAG;QAACR;QAAkBE;QAAoBM;KAAc;IAExD,OAAON;AACT;AAEA;;CAEC,GACD,SAASgB,oBAAoBC,OAAmD;IAC9E,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAG1B;IAC7B,MAAM,CAAC,CAAC2B,sBAAsBC,yBAAyB,EAAEC,wBAAwB,GAC/E9B,iBAAiB;IAEnB,MAAM+B,iBAAiBpC,MAAMoB,WAAW,CAAC;QACvC,MAAMiB,KAAKP,QAAQR,OAAO;QAC1B,IAAI,CAACe,MAAM,CAACN,UAAU;YACpB;QACF;QAEA,MAAMO,QAAQ,CAAED,CAAAA,GAAGE,qBAAqB,GAAGC,IAAI,GAAGT,SAASU,IAAI,CAACF,qBAAqB,GAAGC,IAAI,AAAD;QAC3F,MAAME,gBAAgBJ,UAAU,IAAI,MAAM,GAAGA,MAAM,EAAE,CAAC;QACtD,IAAIJ,6BAA6BQ,eAAe;YAC9CP,wBAAwBO;QAC1B;IACF,GAAG;QAACX;QAAUG;QAA0BJ;QAASK;KAAwB;IAEzEnC,MAAM4B,SAAS,CAACQ,gBAAgB;QAACA;KAAe;IAChDhC,uBAAuB4B,QAAQ,UAAUI;IAEzC,OAAOH;AACT;AAoCA;;;;;;;;;;CAUC,GACD,OAAO,MAAMU,WAAW,CAAC,EACvBC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,YAAY,EACZC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,cAAc,KAAK,EACnB3C,QAAQ,EACR4C,MAAM,EACNC,UAAU,EACV,GAAGC,WACW;IACd,MAAM5B,UAAU3B,aAAasD;IAE7B,MAAM9C,mBAAmB,CAACD,yBAAyB6C,aAAa3C;IAChE,MAAMqB,uBAAuBJ,oBAAoBC;IAEjD,MAAM6B,gBAA2D;QAC/Df;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAM;QACA,CAAC/C,8BAA8B,EAAEwB;IACnC;IAEA,IAAIoB,WAAW;QACbM,aAAa,CAAC,uCAAuC,GAAGN;IAC1D;IAEA,IAAIC,SAAS;QACXK,aAAa,CAAC,qCAAqC,GAAGL;IACxD;IAEA,IAAIM,OAAOC,QAAQ,CAACjD,WAAW;QAC7B+C,aAAa,CAAC,+CAA+C,GAAG,GAAG/C,SAAS,CAAC,CAAC;IAChF;IAEA,qBACE,KAACL;QACCkD,YAAY3B;QACZgC,WAAU;QACVC,eAAe9D,WAAWO,OAAOwD,IAAI,EAAErD,oBAAoBH,OAAOG,gBAAgB;QAClFwC,OAAO;YAAE,GAAGQ,aAAa;YAAE,GAAGR,KAAK;QAAC;QACnC,GAAGO,SAAS;kBAEZN,0BAAY;sBAAE;;;AAGrB,EAAE"}

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

@@ -1,22 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
-import { spacingSizeClassNames } from "../../lib/spacings/sizes.js";
+import { resolveSpacingSize } from "../../lib/spacings/sizes.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./Spacing.module.css";
 export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */ export const Spacing = ({ size = 'm', style, ...restProps })=>{
+    const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(CUSTOM_CSS_TOKEN_FOR_USER_GAP, size);
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
-        style: {
-            ...typeof size === 'number' && {
-                [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: `${size}px`
-            },
+        style: spacingSizeStyle ? {
+            ...spacingSizeStyle,
             ...style
-        },
-        baseClassName: classNames(styles.host, typeof size === 'string' && spacingSizeClassNames[size])
+        } : style,
+        baseClassName: classNames(styles.host, spacingSizeClassName)
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { spacingSizeClassNames, 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  size?: SpacingSizeProp;\n  /**\n   * @depracated 7.0.0\n   *\n   * Свойство устарело и будет удалено в v8.\n   */\n  children?: React.ReactNode;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style, ...restProps }: SpacingProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: `${size}px` }),\n        ...style,\n      }}\n      baseClassName={classNames(\n        styles.host,\n        typeof size === 'string' && spacingSizeClassNames[size],\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","spacingSizeClassNames","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","style","restProps","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,qBAAqB,QAA8B,8BAA2B;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAc7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAAE,GAAGC,WAAyB;IACvE,qBACE,KAACN;QACE,GAAGM,SAAS;QACbD,OAAO;YACL,GAAI,OAAOD,SAAS,YAAY;gBAAE,CAACF,8BAA8B,EAAE,GAAGE,KAAK,EAAE,CAAC;YAAC,CAAC;YAChF,GAAGC,KAAK;QACV;QACAE,eAAeT,WACbG,OAAOO,IAAI,EACX,OAAOJ,SAAS,YAAYL,qBAAqB,CAACK,KAAK;;AAI/D,EAAE"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * 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;\n  /**\n   * @deprecated 7.0.0\n   *\n   * Свойство устарело и будет удалено в v8.\n   */\n  children?: React.ReactNode;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style, ...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      style={\n        spacingSizeStyle\n          ? {\n              ...spacingSizeStyle,\n              ...style,\n            }\n          : style\n      }\n      baseClassName={classNames(styles.host, spacingSizeClassName)}\n    />\n  );\n};\n"],"names":["React","classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","style","restProps","spacingSizeClassName","spacingSizeStyle","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAgB7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAAE,GAAGC,WAAyB;IACvE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGT,mBAC/CG,+BACAE;IAEF,qBACE,KAACJ;QACE,GAAGM,SAAS;QACbD,OACEG,mBACI;YACE,GAAGA,gBAAgB;YACnB,GAAGH,KAAK;QACV,IACAA;QAENI,eAAeX,WAAWG,OAAOS,IAAI,EAAEH;;AAG7C,EAAE"}

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

@@ -5,7 +5,6 @@ import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useMediaQueries } from "../../hooks/useMediaQueries.js";
-import { useObjectMemo } from "../../hooks/useObjectMemo.js";
 import { ViewWidth, viewWidthToClassName } from "../../lib/adaptivity/index.js";
 import { matchMediaListAddListener, matchMediaListRemoveListener } from "../../lib/matchMedia.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
@@ -51,10 +50,13 @@ function useTransitionAnimate(animateProp) {
     const baseRef = useExternRef(getRootRef);
     const { viewWidth } = useAdaptivity();
     const animate = useTransitionAnimate(animateProp);
-    const contextValue = useObjectMemo({
-        colRef: baseRef,
-        animate
-    });
+    const contextValue = React.useMemo(()=>({
+            colRef: baseRef,
+            animate
+        }), [
+        animate,
+        baseRef
+    ]);
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         style: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles.viewWidthNone, 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles.viewWidthTabletMinus,\n  smallTabletPlus: styles.viewWidthSmallTabletPlus,\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps): React.ReactNode => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        width,\n        maxWidth,\n        minWidth,\n        ...style,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles.host,\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles.fixed,\n        stretchedOnMobile && styles.stretchedOnMobile,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles.fixedInner}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","SplitCol","props","children","width","maxWidth","minWidth","fixed","style","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","colRef","baseClassName","host","spacedAuto","Provider","value","div","className","fixedInner"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,gCAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,0BAAuB;AAE/F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMb,WAAWW,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGrB;IACtB,MAAM,CAACsB,SAASC,WAAW,GAAGzB,MAAM0B,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAexB;IAErBJ,MAAM6B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYjB,UAAUyB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAxB,0BAA0BoB,aAAaV,eAAe,EAAEc;QACxD,OAAO;YACLvB,6BAA6BmB,aAAaV,eAAe,EAAEc;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAqBA;;CAEC,GACD,OAAO,MAAMU,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRf,SAASF,WAAW,EACpBkB,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGV;IACJ,MAAMW,UAAU3C,aAAayC;IAC7B,MAAM,EAAErB,SAAS,EAAE,GAAGrB;IACtB,MAAMsB,UAAUH,qBAAqBC;IAErC,MAAMyB,eAAe1C,cAAc;QACjC2C,QAAQF;QACRtB;IACF;IAEA,qBACE,KAACd;QACE,GAAGmC,SAAS;QACbJ,OAAO;YACLJ;YACAC;YACAC;YACA,GAAGE,KAAK;QACV;QACAG,YAAYE;QACZG,eAAehD,WACbW,OAAOsC,IAAI,EACX3C,qBAAqBM,sBAAsBU,YAC3CmB,cAAczC,WAAWW,OAAOuC,UAAU,EAAE,sCAC5CX,SAAS5B,OAAO4B,KAAK,EACrBG,qBAAqB/B,OAAO+B,iBAAiB;kBAG/C,cAAA,KAAChC,gBAAgByC,QAAQ;YAACC,OAAON;sBAC9BP,sBAAQ,KAACc;gBAAIC,WAAW3C,OAAO4C,UAAU;0BAAGpB;iBAAkBA;;;AAIvE,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles.viewWidthNone, 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles.viewWidthTabletMinus,\n  smallTabletPlus: styles.viewWidthSmallTabletPlus,\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps): React.ReactNode => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = React.useMemo(\n    () => ({\n      colRef: baseRef,\n      animate,\n    }),\n    [animate, baseRef],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        width,\n        maxWidth,\n        minWidth,\n        ...style,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles.host,\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles.fixed,\n        stretchedOnMobile && styles.stretchedOnMobile,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles.fixedInner}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","SplitCol","props","children","width","maxWidth","minWidth","fixed","style","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","useMemo","colRef","baseClassName","host","spacedAuto","Provider","value","div","className","fixedInner"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,gCAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,0BAAuB;AAE/F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGpB;IACtB,MAAM,CAACqB,SAASC,WAAW,GAAGxB,MAAMyB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAevB;IAErBJ,MAAM4B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYjB,UAAUyB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAxB,0BAA0BoB,aAAaV,eAAe,EAAEc;QACxD,OAAO;YACLvB,6BAA6BmB,aAAaV,eAAe,EAAEc;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAqBA;;CAEC,GACD,OAAO,MAAMU,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRf,SAASF,WAAW,EACpBkB,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGV;IACJ,MAAMW,UAAU1C,aAAawC;IAC7B,MAAM,EAAErB,SAAS,EAAE,GAAGpB;IACtB,MAAMqB,UAAUH,qBAAqBC;IAErC,MAAMyB,eAAe9C,MAAM+C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRtB;QACF,CAAA,GACA;QAACA;QAASsB;KAAQ;IAGpB,qBACE,KAACpC;QACE,GAAGmC,SAAS;QACbJ,OAAO;YACLJ;YACAC;YACAC;YACA,GAAGE,KAAK;QACV;QACAG,YAAYE;QACZI,eAAehD,WACbU,OAAOuC,IAAI,EACX5C,qBAAqBM,sBAAsBU,YAC3CmB,cAAcxC,WAAWU,OAAOwC,UAAU,EAAE,sCAC5CZ,SAAS5B,OAAO4B,KAAK,EACrBG,qBAAqB/B,OAAO+B,iBAAiB;kBAG/C,cAAA,KAAChC,gBAAgB0C,QAAQ;YAACC,OAAOP;sBAC9BP,sBAAQ,KAACe;gBAAIC,WAAW5C,OAAO6C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}

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

@@ -1,26 +1,31 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useExternRef } from "../../hooks/useExternRef.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
-import { PopoutRoot } from "../PopoutRoot/PopoutRoot.js";
+import { AppRootContext } from "../AppRoot/AppRootContext.js";
 import styles from "./SplitLayout.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
- */ export const SplitLayout = ({ popout, modal, header, children, getRootRef, getRef, className, center, ...restProps })=>{
+ */ export const SplitLayout = ({ header, children, getRootRef, getRef, className, center, modal, popout, ...restProps })=>{
     const platform = usePlatform();
-    return /*#__PURE__*/ _jsxs(PopoutRoot, {
+    const { popoutModalRoot } = React.useContext(AppRootContext);
+    const rootRef = useExternRef(popoutModalRoot, getRootRef);
+    return /*#__PURE__*/ _jsxs("div", {
         className: classNames(styles.host, platform === 'ios' && styles.ios),
-        popout: popout,
-        modal: modal,
-        getRootRef: getRootRef,
+        ref: rootRef,
         children: [
             header,
-            /*#__PURE__*/ _jsx("div", {
+            /*#__PURE__*/ _jsxs("div", {
                 ...restProps,
                 ref: getRef,
                 className: classNames(styles.inner, !!header && styles.innerHeader, center && styles.innerCenter, className),
-                children: children
+                children: [
+                    children,
+                    modal,
+                    popout
+                ]
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(styles.host, platform === 'ios' && styles.ios)}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["React","classNames","usePlatform","PopoutRoot","styles","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","center","restProps","platform","host","ios","div","ref","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,OAAOC,YAAY,2BAA2B;AAoB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWb;IAEjB,qBACE,MAACC;QACCS,WAAWX,WAAWG,OAAOY,IAAI,EAAED,aAAa,SAASX,OAAOa,GAAG;QACnEX,QAAQA;QACRC,OAAOA;QACPG,YAAYA;;YAEXF;0BACD,KAACU;gBACE,GAAGJ,SAAS;gBACbK,KAAKR;gBACLC,WAAWX,WACTG,OAAOgB,KAAK,EACZ,CAAC,CAACZ,UAAUJ,OAAOiB,WAAW,EAC9BR,UAAUT,OAAOkB,WAAW,EAC5BV;0BAGDH;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated будет удалёно в **VKUI v8**\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated будет удалёно в **VKUI v8**\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  modal,\n  popout,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const { popoutModalRoot } = React.useContext(AppRootContext);\n\n  const rootRef = useExternRef<HTMLDivElement>(popoutModalRoot, getRootRef);\n\n  return (\n    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={rootRef}>\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n          className,\n        )}\n      >\n        {children}\n        {modal}\n        {popout}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useExternRef","usePlatform","AppRootContext","styles","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","popoutModalRoot","useContext","rootRef","div","host","ios","ref","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,OAAOC,YAAY,2BAA2B;AA4B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWb;IAEjB,MAAM,EAAEc,eAAe,EAAE,GAAGjB,MAAMkB,UAAU,CAACd;IAE7C,MAAMe,UAAUjB,aAA6Be,iBAAiBR;IAE9D,qBACE,MAACW;QAAIT,WAAWV,WAAWI,OAAOgB,IAAI,EAAEL,aAAa,SAASX,OAAOiB,GAAG;QAAGC,KAAKJ;;YAC7EZ;0BACD,MAACa;gBACE,GAAGL,SAAS;gBACbQ,KAAKb;gBACLC,WAAWV,WACTI,OAAOmB,KAAK,EACZ,CAAC,CAACjB,UAAUF,OAAOoB,WAAW,EAC9Bb,UAAUP,OAAOqB,WAAW,EAC5Bf;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}

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

@@ -34,7 +34,7 @@ export const Tappable = ({ baseClassName, borderRadiusMode = 'auto', children, h
         type: 'button'
     } : {};
     return /*#__PURE__*/ _jsxs(Clickable, {
-        baseClassName: classNames(baseClassName, styles.host, sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], borderRadiusMode === 'inherit' && styles.borderRadiusInherit, hasPointerClassName(hasPointer)),
+        baseClassName: classNames('vkuiInternalTappable', baseClassName, styles.host, sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], borderRadiusMode === 'inherit' && styles.borderRadiusInherit, hasPointerClassName(hasPointer)),
         hoverClassName: hoverClass(hoverMode),
         activeClassName: activeClass(activeMode),
         ...typeProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  compact: styles.sizeXCompact,\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        baseClassName,\n        styles.host,\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","SizeType","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","styles","sizeXClassNames","none","sizeXNone","compact","sizeXCompact","hasPointerClassName","hasPointer","undefined","hasPointerNone","hasPointerFalse","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","host","REGULAR","borderRadiusInherit","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,gCAAuB;AAChD,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AACvF,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH,OAAOR,OAAOS,cAAc;QAC9B,KAAK;YACH,OAAOT,OAAOU,eAAe;IACjC;IAEA,OAAOF;AACT;AAUA,OAAO,MAAMG,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYjB,kBAAkB,EAC9BkB,aAAalB,kBAAkB,EAC/BmB,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAc5B,eAAe2B;IAEnC,MAAM,EAAEE,QAAQ,MAAM,EAAEd,UAAU,EAAE,GAAGlB;IAEvC,MAAMiC,aAAa3B,mBAAmBqB,YAAYT;IAClD,MAAM,EAAEgB,MAAM,EAAE,GAAGC,cAAc,GAAG5B,UAAU0B,YAAYf;IAE1D,MAAMkB,WAAWlC,WAAWiC,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAACnC;QACCmB,eAAexB,WACbwB,eACAZ,OAAO6B,IAAI,EACXR,UAAU/B,SAASwC,OAAO,IAAI7B,eAAe,CAACoB,MAAM,EACpDR,qBAAqB,aAAab,OAAO+B,mBAAmB,EAC5DzB,oBAAoBC;QAEtByB,gBAAgBjC,WAAWgB;QAC3BkB,iBAAiBpC,YAAYmB;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACtB;gBAAO4B,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  compact: styles.sizeXCompact,\n};\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\n}\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","SizeType","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","styles","sizeXClassNames","none","sizeXNone","compact","sizeXCompact","hasPointerClassName","hasPointer","undefined","hasPointerNone","hasPointerFalse","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","host","REGULAR","borderRadiusInherit","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,gCAAuB;AAChD,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AACvF,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKC;YACH,OAAOR,OAAOS,cAAc;QAC9B,KAAK;YACH,OAAOT,OAAOU,eAAe;IACjC;IAEA,OAAOF;AACT;AAUA,OAAO,MAAMG,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYjB,kBAAkB,EAC9BkB,aAAalB,kBAAkB,EAC/BmB,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAc5B,eAAe2B;IAEnC,MAAM,EAAEE,QAAQ,MAAM,EAAEd,UAAU,EAAE,GAAGlB;IAEvC,MAAMiC,aAAa3B,mBAAmBqB,YAAYT;IAClD,MAAM,EAAEgB,MAAM,EAAE,GAAGC,cAAc,GAAG5B,UAAU0B,YAAYf;IAE1D,MAAMkB,WAAWlC,WAAWiC,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAACnC;QACCmB,eAAexB,WACb,wBACAwB,eACAZ,OAAO6B,IAAI,EACXR,UAAU/B,SAASwC,OAAO,IAAI7B,eAAe,CAACoB,MAAM,EACpDR,qBAAqB,aAAab,OAAO+B,mBAAmB,EAC5DzB,oBAAoBC;QAEtByB,gBAAgBjC,WAAWgB;QAC3BkB,iBAAiBpC,YAAYmB;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAACtB;gBAAO4B,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}

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

@@ -1,34 +1,19 @@
 import * as React from "react";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
-class LayoutEffectCall {
-    #fns = [];
-    /**
-   * Выполняет переданные функции
-   */ run() {
-        for (const fn of this.#fns){
-            fn();
-        }
-        this.#fns = [];
-    }
-    /**
-   * Вызовет функцию после изменения DOM, но до того как пользователь увидит
-   * изменения
-   */ add = (fn)=>{
-        this.#fns.push(fn);
-    };
-}
 /**
  * Возвращает функцию которая вызывает callback после изменения DOM, но до того
  * как пользователь увидит изменения
  */ export function useLayoutEffectCall() {
-    const ref = React.useRef(null);
-    if (!ref.current) {
-        ref.current = new LayoutEffectCall();
-    }
+    const [fns] = React.useState(()=>[]);
     useIsomorphicLayoutEffect(()=>{
-        ref.current.run();
+        while(fns.length > 0){
+            fns.pop()();
+        }
     });
-    return ref.current.add;
+    const add = React.useCallback((fn)=>fns.push(fn), [
+        fns
+    ]);
+    return add;
 }
 
 //# sourceMappingURL=useLayoutEffectCall.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/View/useLayoutEffectCall.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\n\nclass LayoutEffectCall {\n  #fns: Array<() => void> = [];\n\n  /**\n   * Выполняет переданные функции\n   */\n  run() {\n    for (const fn of this.#fns) {\n      fn();\n    }\n\n    this.#fns = [];\n  }\n\n  /**\n   * Вызовет функцию после изменения DOM, но до того как пользователь увидит\n   * изменения\n   */\n  add = (fn: () => void) => {\n    this.#fns.push(fn);\n  };\n}\n\n/**\n * Возвращает функцию которая вызывает callback после изменения DOM, но до того\n * как пользователь увидит изменения\n */\nexport function useLayoutEffectCall() {\n  const ref = React.useRef<LayoutEffectCall | null>(null);\n  if (!ref.current) {\n    ref.current = new LayoutEffectCall();\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    ref.current!.run();\n  });\n\n  return ref.current.add;\n}\n"],"names":["React","useIsomorphicLayoutEffect","LayoutEffectCall","run","fn","add","push","useLayoutEffectCall","ref","useRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,MAAMC;IACJ,CAAA,GAAI,GAAsB,EAAE,CAAC;IAE7B;;GAEC,GACDC,MAAM;QACJ,KAAK,MAAMC,MAAM,IAAI,CAAC,CAAA,GAAI,CAAE;YAC1BA;QACF;QAEA,IAAI,CAAC,CAAA,GAAI,GAAG,EAAE;IAChB;IAEA;;;GAGC,GACDC,MAAM,CAACD;QACL,IAAI,CAAC,CAAA,GAAI,CAACE,IAAI,CAACF;IACjB,EAAE;AACJ;AAEA;;;CAGC,GACD,OAAO,SAASG;IACd,MAAMC,MAAMR,MAAMS,MAAM,CAA0B;IAClD,IAAI,CAACD,IAAIE,OAAO,EAAE;QAChBF,IAAIE,OAAO,GAAG,IAAIR;IACpB;IAEAD,0BAA0B;QACxBO,IAAIE,OAAO,CAAEP,GAAG;IAClB;IAEA,OAAOK,IAAIE,OAAO,CAACL,GAAG;AACxB"}
+{"version":3,"sources":["../../../../src/components/View/useLayoutEffectCall.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\n\n/**\n * Возвращает функцию которая вызывает callback после изменения DOM, но до того\n * как пользователь увидит изменения\n */\nexport function useLayoutEffectCall() {\n  const [fns] = React.useState<Array<() => void>>(() => []);\n\n  useIsomorphicLayoutEffect(() => {\n    while (fns.length > 0) {\n      fns.pop()!();\n    }\n  });\n\n  const add = React.useCallback((fn: () => void) => fns.push(fn), [fns]);\n\n  return add;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useLayoutEffectCall","fns","useState","length","pop","add","useCallback","fn","push"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF;;;CAGC,GACD,OAAO,SAASC;IACd,MAAM,CAACC,IAAI,GAAGH,MAAMI,QAAQ,CAAoB,IAAM,EAAE;IAExDH,0BAA0B;QACxB,MAAOE,IAAIE,MAAM,GAAG,EAAG;YACrBF,IAAIG,GAAG;QACT;IACF;IAEA,MAAMC,MAAMP,MAAMQ,WAAW,CAAC,CAACC,KAAmBN,IAAIO,IAAI,CAACD,KAAK;QAACN;KAAI;IAErE,OAAOI;AACT"}