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

package/dist/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","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","useParentWidth","style","transform","opacity","on","div"],"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","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","useParentWidth","style","transform","opacity","on","div"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,wBAAqB;AAC3C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SAAwBC,wCAAwC,EAAEC,MAAM,QAAQ,mBAAgB;AAChG,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAAsCC,SAAS,QAAQ,8BAA2B;AAClF,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAAgCC,KAAK,QAAyB,oBAAiB;AAC/E,OAAOC,sBAAsB,2BAAwB;AACrD,SAASC,oBAAoB,QAAQ,4BAAyB;AAG9D,MAAMC,2BAA2B;AAEjC,SAASC,YAAYC,KAAuB;IAC1C,0FAA0F,GAC1F,IAAI,CAACA,OAAO;QACV,OAAO;IACT;IACA,IAAI,oBAAoBA,MAAMC,aAAa,IAAID,MAAMC,aAAa,CAACC,UAAU,EAAE;QAC7EF,MAAMC,aAAa,CAACE,cAAc;IACpC;IACA,IAAI,qBAAqBH,MAAMC,aAAa,EAAE;QAC5CD,MAAMC,aAAa,CAACG,eAAe;IACrC;IACA,OAAO;AACT;AAeA;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,QAAQ,EACRC,UAAU,EACVC,SAAS,EACTC,SAAS,EAEU,WADhBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWvB;IACjB,MAAMwB,SAASnB;IACf,MAAM,EAAEoB,MAAM,EAAE,GAAGtB;IAEnB,MAAMuB,oBAAoB7B,MAAM8B,MAAM,CAAsBC;IAC5D/B,MAAMgC,SAAS,CAAC;QACdH,kBAAkBI,OAAO,GAAGX;IAC9B;IAEA,MAAMY,aAAalC,MAAMmC,OAAO,CAC9B,IAAO,CAAA;YACLC,OAAOV,aAAa,QAAQ,CAAC,KAAK,CAAC;YACnCW,KAAKX,aAAa,QAAQ,KAAK;YAC/BY,MAAMZ,aAAa,QAAQ,MAAM;YACjCa,YAAYb,aAAa,QAAQ,KAAK;YACtCc,oBAAoBd,aAAa,QAAQ,OAAO;QAClD,CAAA,GACA;QAACA;KAAS;IAGZ,MAAM,CAACe,UAAUC,YAAY,GAAG1C,MAAM2C,QAAQ,CAACT,WAAWE,KAAK;IAC/D,MAAM,CAACQ,UAAUC,YAAY,GAAG7C,MAAM2C,QAAQ,CAAC;IAC/C,MAAM,CAACJ,YAAYO,cAAc,GAAG9C,MAAM2C,QAAQ,CAAC;IACnD,MAAM,CAACI,YAAYC,cAAc,GAAGhD,MAAM2C,QAAQ,CAAC;IACnD,MAAM,CAAC,CAACM,WAAWC,cAAc,EAAEC,aAAa,GAAG/C,iBAAiB;IAEpE,MAAMgD,SAASpD,MAAM8B,MAAM,CAAC;IAC5B,MAAM,CAACuB,cAAcC,gBAAgB,GAAGtD,MAAM2C,QAAQ,CAAC;IACvD,MAAM,CAACY,iBAAiBC,mBAAmB,GAAGxD,MAAM2C,QAAQ,CAAC;IAE7D,MAAMc,uBAAuBzD,MAAM0D,WAAW,CAAC;QAC7Cb,YAAY;QACZG,cAAc;QACdF,cAAc;QACdJ,YAAYR,WAAWE,KAAK;QAC5BoB,mBAAmB;QACnBF,gBAAgB;IAClB,GAAG;QAACpB;KAAW;IAEf,MAAMyB,qBAAqB3D,MAAM0D,WAAW,CAAC;QAC3C,IAAI,CAACT,WAAW;YACdQ;QACF;IACF,GAAG;QAACR;QAAWQ;KAAqB;IAEpC,MAAMG,wBAAwB5D,MAAM8B,MAAM;IAE1CvB,0BAA0B;QACxB,MAAMsD,iBAAiBhC,kBAAkBI,OAAO;QAChD,IAAI4B,mBAAmB9B,aAAa8B,kBAAkB,CAACvC,YAAY;YACjEqC;QACF;IACF,GAAG;QAACrC;QAAYqC;KAAmB;IAEnCpD,0BAA0B;QACxB,MAAMsD,iBAAiBhC,kBAAkBI,OAAO;QAChD,IAAI4B,mBAAmB9B,aAAa,CAAC8B,kBAAkBvC,YAAY;YACjEwC,aAAaF,sBAAsB3B,OAAO;QAC5C;IACF,GAAG;QAACX;KAAW;IAEf,MAAMyC,gBAAgB/D,MAAM0D,WAAW,CAAC;QACtC,IAAI,CAACnB,cAAchB,WAAW;YAC5B,wDAAwD;YACxDuC,aAAaF,sBAAsB3B,OAAO;YAC1C2B,sBAAsB3B,OAAO,GAAG+B,WAAWL,oBAAoB9C;YAE/DiC,cAAc;YACdJ,YAAY,CAACuB,eAAkBvC,aAAa,QAAQuC,eAAe/B,WAAWK,UAAU;YAExFhB;QACF;IACF,GAAG;QAACgB;QAAYhB;QAAWoC;QAAoBjC;QAAUQ,WAAWK,UAAU;KAAC;IAE/EhC,0BAA0B;QACxB,IAAI2C,kBAAkBnB,aAAamB,iBAAiB,CAACD,WAAW;YAC9D,IAAI,CAACV,cAAcQ,YAAY;gBAC7BgB;YACF,OAAO,IAAIxB,cAAc,CAACjB,YAAY;gBACpC,gDAAgD;gBAChDmC;YACA,0CAA0C,GAC5C,OAAO;gBACL,gDAAgD;gBAChD,4DAA4D;gBAC5Df,YAAYH,aAAaL,WAAWK,UAAU,GAAGL,WAAWE,KAAK;gBACjEoB,mBAAmB;gBACnBF,gBAAgB;YAClB;QACF;IACF,GAAG;QACDpB;QACAZ;QACAqC;QACAT;QACAD;QACAV;QACAQ;QACAgB;KACD;IAEDxD,0BACE,SAAS2D;QACP,OAAOtC,UAAWgB,CAAAA,YAAYL,UAAS,IACnClC,yCAAyCuB,UACzCG;IACN,GACA;QAACH;QAAQgB;QAAUL;KAAW;IAGhC,MAAM4B,YAAYnE,MAAM8B,MAAM,CAAC;IAE/B,MAAMsC,eAAe,CAACrD;QACpB,IAAIwB,YAAY;YACdzB,YAAYC;YACZ;QACF;QACAoC,aAAa;QACbgB,UAAUlC,OAAO,GAAGlB,MAAMsD,MAAM;IAClC;IAEA,MAAMC,uBAAuBtE,MAAM8B,MAAM,CAAC;IAC1C,MAAMyC,cAAc,CAACxD;QACnB,MAAM,EAAEyD,GAAG,EAAEC,MAAM,EAAE,GAAG1D;QACxB,MAAM,EAAEqB,KAAK,EAAEC,GAAG,EAAE,GAAGH;QACvB,MAAMwC,cAAc/C,mBAAAA,6BAAAA,OAAQgD,SAAS,GAAGC,CAAC;QAEzC,IAAIhC,YAAYK,WAAW;YACzBnC,YAAYC;YAEZ,MAAM,EAAEyB,kBAAkB,EAAEF,IAAI,EAAE,GAAGJ;YAErC,MAAM2C,QAAQC,KAAKzC,GAAG,CAAC,GAAGoC,SAASrB,OAAOnB,OAAO;YAEjD,MAAM8C,WAAW7E,MAAMkC,QAAQyC,QAAQrC,oBAAoBJ,OAAOE;YAClE,MAAM0C,WAAWD,WAAW,CAAC,KAAKD,KAAKG,GAAG,CAAC,AAACF,CAAAA,WAAW,EAAC,IAAK1C,OAAO,KAAK;YAEzEK,YAAYqC;YACZvB,mBAAmBtD,MAAM8E,UAAU,GAAG;YACtChC,cAAcgC,WAAW;YACzB1B,gBAAgB,AAACyB,CAAAA,WAAW,EAAC,IAAK;YAElC,MAAMG,kCACJxD,aAAa,SAASsD,WAAW,MAAM,CAACzC,cAAc,CAAC+B,qBAAqBrC,OAAO;YACrF,IAAIiD,iCAAiC;gBACnCZ,qBAAqBrC,OAAO,GAAG;gBAC/B8B;YACF;QACF,OAAO,IAAIS,OAAOE,gBAAgB,KAAKD,SAAS,KAAK,CAAClC,cAAcU,WAAW;YAC7EnC,YAAYC;YAEZqC,OAAOnB,OAAO,GAAGwC;YACjB5B,YAAY;YACZH,YAAYN;YACZoB,mBAAmB;QACrB;IACF;IAEA,MAAM2B,aAAa;QACjBtC,YAAY;QACZM,aAAa;QACbmB,qBAAqBrC,OAAO,GAAG;IACjC;IAEA,MAAMmD,mBAAmB,CAAC,eAAe,EAAE3C,SAAS,MAAM,CAAC;IAC3D,IAAI4C,mBAAmB;IAEvB,IAAI3D,aAAa,SAASa,cAAc,CAACU,WAAW;QAClDoC,mBAAmB;IACrB,OAAO,IAAI3D,aAAa,SAAU2B,CAAAA,gBAAgBd,UAAS,GAAI;QAC7D8C,mBAAmB,CAAC,eAAe,EAAEhC,aAAa,MAAM,CAAC;IAC3D;IAEA,qBACE,KAAC1C,iBAAiB2E,QAAQ;QAACC,OAAO;kBAChC,cAAA,MAAC7E;YACC8E,aAAU;YACVC,aAAW,CAAC,CAACnE;WACTG;YACJiE,SAAStB;YACTuB,QAAQpB;YACRqB,OAAOT;YACP3D,WAAWvB,sCAETyB,aAAa,mCACbkB,2CACAL,+CACAf;;8BAGF,KAACf;oBAAYe,SAAS;oBAAmBqE,cAAc;8BACrD,cAAA,KAACjF;wBACCkF,OAAO;4BACLC,WAAWX;4BACXY,SAASpD,YAAYL,cAAcQ,aAAa,IAAI;wBACtD;wBACAkD,IAAI1D;wBACJyC,UAAUzC,aAAaR,YAAYwB;;;8BAIvC,KAAC2C;oBACC1E,SAAS;oBACTsE,OAAO;wBACLC,WAAWV;oBACb;8BAEChE;;;;;AAKX,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,GAAG;IACzD,SAAS,EAAE,OAAO,sBAAsB,CAAC;IACzC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAsBxC,CAAC"}
+{"version":3,"file":"ScreenSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,GAAG;IACzD,SAAS,EAAE,OAAO,sBAAsB,CAAC;IACzC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAyBxC,CAAC"}

package/dist/components/ScreenSpinner/ScreenSpinner.js

@@ -3,6 +3,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 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";
@@ -11,7 +12,7 @@ import { ScreenSpinnerSwapIcon } from "./ScreenSpinnerSwapIcon.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */ export const ScreenSpinner = (_param)=>{
-    var { style, className, state = 'loading', onClick, cancelLabel, mode, label, customIcon } = _param, restProps = _object_without_properties(_param, [
+    var { style, className, state = 'loading', onClick, cancelLabel, mode, label, customIcon, usePortal } = _param, restProps = _object_without_properties(_param, [
         "style",
         "className",
         "state",
@@ -19,25 +20,29 @@ import { ScreenSpinnerSwapIcon } from "./ScreenSpinnerSwapIcon.js";
         "cancelLabel",
         "mode",
         "label",
-        "customIcon"
+        "customIcon",
+        "usePortal"
     ]);
     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, _object_spread({}, 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, _object_spread({}, restProps)),
+                    /*#__PURE__*/ _jsx(ScreenSpinnerSwapIcon, {
+                        onClick: onClick,
+                        cancelLabel: cancelLabel
+                    })
+                ]
+            })
         })
     });
 };

package/dist/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;QAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EAES,WADhBC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGAb;IAEA,qBACE,KAACC;QAAcM,WAAWA;QAAWD,OAAOA;QAAOS,YAAY;kBAC7D,cAAA,MAACb;YAAuBM,OAAOA;YAAOG,MAAMA;YAAMC,OAAOA;YAAOC,YAAYA;;8BAC1E,KAACV,wCAAwBW;8BACzB,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;QAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EAEU,WADhBC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGAd;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,wCAAwBY;kCACzB,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/components/ScreenSpinner/types.d.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { AppRootPortalProps } from '../AppRoot/AppRootPortal';
 import type { SpinnerProps } from '../Spinner/Spinner';
 export type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> & {
     state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom';
@@ -12,5 +13,6 @@ export type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> & {
      */
     label?: React.ReactNode;
     cancelLabel?: string;
+    usePortal?: AppRootPortalProps['usePortal'];
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ScreenSpinner/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,GAAG;IAC5D,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/D;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,GAAG;IAC5D,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/D;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;CAC7C,CAAC"}

package/dist/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/components/Separator/Separator.d.ts

@@ -16,6 +16,8 @@ export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement
     direction?: 'horizontal' | 'vertical';
     /**
      * Размер контейнера, в который вложен разделитель
+     *
+     * Принимает значения дизайн-системы, числовые значения и css-переменные
      */
     size?: SpacingSizeProp;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,eAAO,MAAM,8BAA8B,kCAAkC,CAAC;AAE9E,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC/E;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,eAAe,CAAC;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAkBD;;GAEG;AACH,eAAO,MAAM,SAAS,yEAQnB,cAAc,KAAG,KAAK,CAAC,SAkBzB,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACpF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,eAAO,MAAM,8BAA8B,kCAAkC,CAAC;AAE9E,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC/E;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,eAAe,CAAC;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAkBD;;GAEG;AACH,eAAO,MAAM,SAAS,yEAQnB,cAAc,KAAG,KAAK,CAAC,SA4BzB,CAAC"}

package/dist/components/Separator/Separator.js

@@ -3,7 +3,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 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";
 export const CUSTOM_CSS_TOKEN_FOR_USER_SIZE = '--vkui_internal--spacing_size';
 const appearanceClassNames = {
@@ -30,11 +30,10 @@ const alignClassNames = {
         "style",
         "size"
     ]);
+    const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(CUSTOM_CSS_TOKEN_FOR_USER_SIZE, size);
     return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, restProps), {
-        baseClassName: classNames(padding && "vkuiSeparator__padded", appearanceClassNames[appearance], typeof size === 'string' && spacingSizeClassNames[size], directionClassNames[direction], size !== undefined && "vkuiSeparator__sized", align !== 'center' && alignClassNames[align]),
-        style: _object_spread({}, typeof size === 'number' && {
-            [CUSTOM_CSS_TOKEN_FOR_USER_SIZE]: `${size}px`
-        }, style),
+        baseClassName: classNames(padding && "vkuiSeparator__padded", appearanceClassNames[appearance], directionClassNames[direction], size !== undefined && "vkuiSeparator__sized", align !== 'center' && alignClassNames[align], spacingSizeClassName),
+        style: spacingSizeStyle ? _object_spread({}, spacingSizeStyle, style) : style,
         children: /*#__PURE__*/ _jsx("hr", {
             className: "vkuiSeparator__in"
         })

package/dist/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","CUSTOM_CSS_TOKEN_FOR_USER_SIZE","appearanceClassNames","directionClassNames","horizontal","vertical","alignClassNames","start","end","Separator","padding","appearance","direction","align","style","size","restProps","baseClassName","undefined","hr","className"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,qBAAqB,QAA8B,8BAA2B;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,OAAO,MAAMC,iCAAiC,gCAAgC;AAyB9E,MAAMC,uBAAuB;IAC3B,SAAS;IACT,WAAW;IACX,eAAe;AACjB;AAEA,MAAMC,sBAAsB;IAC1BC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;AACL;AAEA;;CAEC,GACD,OAAO,MAAMC,YAAY;QAAC,EACxBC,UAAU,KAAK,EACfC,aAAa,SAAS,EACtBC,YAAY,YAAY,EACxBC,QAAQ,QAAQ,EAChBC,KAAK,EACLC,IAAI,EAEW,WADZC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAGA,KAACf,uDACKgB;QACJC,eAAenB,WACbY,oCACAR,oBAAoB,CAACS,WAAW,EAChC,OAAOI,SAAS,YAAYhB,qBAAqB,CAACgB,KAAK,EACvDZ,mBAAmB,CAACS,UAAU,EAC9BG,SAASG,qCACTL,UAAU,YAAYP,eAAe,CAACO,MAAM;QAE9CC,OAAO,mBACD,OAAOC,SAAS,YAAY;YAAE,CAACd,+BAA+B,EAAE,GAAGc,KAAK,EAAE,CAAC;QAAC,GAC7ED;kBAGL,cAAA,KAACK;YAAGC,SAAS;;;EAEf"}
+{"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","CUSTOM_CSS_TOKEN_FOR_USER_SIZE","appearanceClassNames","directionClassNames","horizontal","vertical","alignClassNames","start","end","Separator","padding","appearance","direction","align","style","size","restProps","spacingSizeClassName","spacingSizeStyle","baseClassName","undefined","hr","className"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,OAAO,MAAMC,iCAAiC,gCAAgC;AA2B9E,MAAMC,uBAAuB;IAC3B,SAAS;IACT,WAAW;IACX,eAAe;AACjB;AAEA,MAAMC,sBAAsB;IAC1BC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,kBAAkB;IACtBC,KAAK;IACLC,GAAG;AACL;AAEA;;CAEC,GACD,OAAO,MAAMC,YAAY;QAAC,EACxBC,UAAU,KAAK,EACfC,aAAa,SAAS,EACtBC,YAAY,YAAY,EACxBC,QAAQ,QAAQ,EAChBC,KAAK,EACLC,IAAI,EAEW,WADZC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,sBAAsBC,iBAAiB,GAAGnB,mBAC/CE,gCACAc;IAEF,qBACE,KAACf,uDACKgB;QACJG,eAAerB,WACbY,oCACAR,oBAAoB,CAACS,WAAW,EAChCR,mBAAmB,CAACS,UAAU,EAC9BG,SAASK,qCACTP,UAAU,YAAYP,eAAe,CAACO,MAAM,EAC5CI;QAEFH,OACEI,mBACI,mBACKA,kBACAJ,SAELA;kBAGN,cAAA,KAACO;YAAGC,SAAS;;;AAGnB,EAAE"}

package/dist/components/Skeleton/Skeleton.js

@@ -8,7 +8,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";
 const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
@@ -58,8 +58,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) {
@@ -73,7 +72,8 @@ const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
     }, [
         document,
         prevSkeletonGradientLeft,
-        rootRef
+        rootRef,
+        setSkeletonGradientLeft
     ]);
     React.useEffect(updatePosition, [
         updatePosition

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { 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","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"],"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","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"],"mappings":"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"}

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

@@ -5,10 +5,12 @@ export declare const CUSTOM_CSS_TOKEN_FOR_USER_GAP = "--vkui_internal--spacing_s
 export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Высота спэйсинга
+     *
+     * Принимает значения дизайн-системы, числовые значения и css-переменные
      */
     size?: SpacingSizeProp;
     /**
-     * @depracated 7.0.0
+     * @deprecated 7.0.0
      *
      * Свойство устарело и будет удалено в v8.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAyB,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,eAAO,MAAM,6BAA6B,kCAAkC,CAAC;AAE7E,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,kCAAyC,YAAY,KAAG,KAAK,CAAC,SAcjF,CAAC"}
+{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACpF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,eAAO,MAAM,6BAA6B,kCAAkC,CAAC;AAE7E,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,kCAAyC,YAAY,KAAG,KAAK,CAAC,SAmBjF,CAAC"}

package/dist/components/Spacing/Spacing.js

@@ -4,7 +4,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 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";
 export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';
 /**
@@ -14,11 +14,10 @@ export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';
         "size",
         "style"
     ]);
+    const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(CUSTOM_CSS_TOKEN_FOR_USER_GAP, size);
     return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, restProps), {
-        style: _object_spread({}, typeof size === 'number' && {
-            [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: `${size}px`
-        }, style),
-        baseClassName: classNames("vkuiSpacing__host", typeof size === 'string' && spacingSizeClassNames[size])
+        style: spacingSizeStyle ? _object_spread({}, spacingSizeStyle, style) : style,
+        baseClassName: classNames("vkuiSpacing__host", spacingSizeClassName)
     }));
 };
 

package/dist/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","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","style","restProps","baseClassName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,qBAAqB,QAA8B,8BAA2B;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,OAAO,MAAMC,gCAAgC,gCAAgC;AAc7E;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAA8B,WAAzBC;QAAtBF;QAAYC;;IACpC,qBACE,KAACJ,uDACKK;QACJD,OAAO,mBACD,OAAOD,SAAS,YAAY;YAAE,CAACF,8BAA8B,EAAE,GAAGE,KAAK,EAAE,CAAC;QAAC,GAC5EC;QAELE,eAAeR,gCAEb,OAAOK,SAAS,YAAYJ,qBAAqB,CAACI,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","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","style","restProps","spacingSizeClassName","spacingSizeStyle","baseClassName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,OAAO,MAAMC,gCAAgC,gCAAgC;AAgB7E;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAA8B,WAAzBC;QAAtBF;QAAYC;;IACpC,MAAM,CAACE,sBAAsBC,iBAAiB,GAAGR,mBAC/CE,+BACAE;IAEF,qBACE,KAACH,uDACKK;QACJD,OACEG,mBACI,mBACKA,kBACAH,SAELA;QAENI,eAAeV,gCAAwBQ;;AAG7C,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"SplitCol.d.ts","sourceRoot":"","sources":["../../../src/components/SplitCol/SplitCol.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAyC7D,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,KAAK,CAAC,SA8CrD,CAAC"}
+{"version":3,"file":"SplitCol.d.ts","sourceRoot":"","sources":["../../../src/components/SplitCol/SplitCol.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAyC7D,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,KAAK,CAAC,SAiDrD,CAAC"}

package/dist/components/SplitCol/SplitCol.js

@@ -8,7 +8,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";
@@ -64,10 +63,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, _object_spread_props(_object_spread({}, restProps), {
         style: _object_spread({
             width,

package/dist/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","breakpointClassNames","none","tabletMinus","smallTabletPlus","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","Provider","value","div","className"],"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;AAGpD,MAAMC,uBAAuB;IAC3BC,MAAMZ,0CAAiC;IACvCa,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGjB;IACtB,MAAM,CAACkB,SAASC,WAAW,GAAGrB,MAAMsB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAepB;IAErBJ,MAAMyB,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYb,UAAUqB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaT,eAAe,CAACc,OAAO;QACvED;QAEApB,0BAA0BgB,aAAaT,eAAe,EAAEa;QACxD,OAAO;YACLnB,6BAA6Be,aAAaT,eAAe,EAAEa;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,EAEX,GAAGT,OADCU,uCACDV;QAXFC;QACAC;QACAC;QACAC;QACAf;QACAgB;QACAC;QACAC;QACAC;QACAC;;IAGF,MAAME,UAAUvC,aAAaqC;IAC7B,MAAM,EAAErB,SAAS,EAAE,GAAGjB;IACtB,MAAMkB,UAAUH,qBAAqBC;IAErC,MAAMyB,eAAetC,cAAc;QACjCuC,QAAQF;QACRtB;IACF;IAEA,qBACE,KAACV,uDACK+B;QACJJ,OAAO;YACLJ;YACAC;YACAC;WACGE;QAELG,YAAYE;QACZG,eAAe5C,iCAEbM,qBAAqBK,sBAAsBO,YAC3CmB,cAAcrC,uCAA8B,sCAC5CmC,gCACAG;kBAGF,cAAA,KAAC5B,gBAAgBmC,QAAQ;YAACC,OAAOJ;sBAC9BP,sBAAQ,KAACY;gBAAIC,SAAS;0BAAsBjB;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","breakpointClassNames","none","tabletMinus","smallTabletPlus","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","Provider","value","div","className"],"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;AAGpD,MAAMC,uBAAuB;IAC3BC,MAAMX,0CAAiC;IACvCY,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGhB;IACtB,MAAM,CAACiB,SAASC,WAAW,GAAGpB,MAAMqB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAenB;IAErBJ,MAAMwB,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYb,UAAUqB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaT,eAAe,CAACc,OAAO;QACvED;QAEApB,0BAA0BgB,aAAaT,eAAe,EAAEa;QACxD,OAAO;YACLnB,6BAA6Be,aAAaT,eAAe,EAAEa;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,EAEX,GAAGT,OADCU,uCACDV;QAXFC;QACAC;QACAC;QACAC;QACAf;QACAgB;QACAC;QACAC;QACAC;QACAC;;IAGF,MAAME,UAAUtC,aAAaoC;IAC7B,MAAM,EAAErB,SAAS,EAAE,GAAGhB;IACtB,MAAMiB,UAAUH,qBAAqBC;IAErC,MAAMyB,eAAe1C,MAAM2C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRtB;QACF,CAAA,GACA;QAACA;QAASsB;KAAQ;IAGpB,qBACE,KAAChC,uDACK+B;QACJJ,OAAO;YACLJ;YACAC;YACAC;WACGE;QAELG,YAAYE;QACZI,eAAe5C,iCAEbK,qBAAqBK,sBAAsBO,YAC3CmB,cAAcpC,uCAA8B,sCAC5CkC,gCACAG;kBAGF,cAAA,KAAC5B,gBAAgBoC,QAAQ;YAACC,OAAOL;sBAC9BP,sBAAQ,KAACa;gBAAIC,SAAS;0BAAsBlB;iBAAkBA;;;AAIvE,EAAE"}

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

@@ -3,10 +3,18 @@ import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
 export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
+     *
+     * @deprecated будет удалёно в **VKUI v8**
+     * Начиная с **VKUI v7** компоненты можно располагать в любом
+     * месте приложения в пределах `AppRoot`
      */
     popout?: React.ReactNode;
     /**
      * Свойство для отрисовки `ModalRoot`.
+     *
+     * @deprecated будет удалёно в **VKUI v8**
+     * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом
+     * месте приложения в пределах `AppRoot`
      */
     modal?: React.ReactNode;
     header?: React.ReactNode;
@@ -18,5 +26,5 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
  */
-export declare const SplitLayout: ({ popout, modal, header, children, getRootRef, getRef, className, center, ...restProps }: SplitLayoutProps) => React.ReactNode;
+export declare const SplitLayout: ({ header, children, getRootRef, getRef, className, center, modal, popout, ...restProps }: SplitLayoutProps) => React.ReactNode;
 //# sourceMappingURL=SplitLayout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.d.ts","sourceRoot":"","sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIrE,MAAM,WAAW,gBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,6FAUrB,gBAAgB,KAAG,KAAK,CAAC,SAyB3B,CAAC"}
+{"version":3,"file":"SplitLayout.d.ts","sourceRoot":"","sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIrE,MAAM,WAAW,gBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,6FAUrB,gBAAgB,KAAG,KAAK,CAAC,SA0B3B,CAAC"}

package/dist/components/SplitLayout/SplitLayout.js

@@ -2,36 +2,41 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-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";
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
  */ export const SplitLayout = (_param)=>{
-    var { popout, modal, header, children, getRootRef, getRef, className, center } = _param, restProps = _object_without_properties(_param, [
-        "popout",
-        "modal",
+    var { header, children, getRootRef, getRef, className, center, modal, popout } = _param, restProps = _object_without_properties(_param, [
         "header",
         "children",
         "getRootRef",
         "getRef",
         "className",
-        "center"
+        "center",
+        "modal",
+        "popout"
     ]);
     const platform = usePlatform();
-    return /*#__PURE__*/ _jsxs(PopoutRoot, {
+    const { popoutModalRoot } = React.useContext(AppRootContext);
+    const rootRef = useExternRef(popoutModalRoot, getRootRef);
+    return /*#__PURE__*/ _jsxs("div", {
         className: classNames("vkuiSplitLayout__host", platform === 'ios' && "vkuiSplitLayout__ios"),
-        popout: popout,
-        modal: modal,
-        getRootRef: getRootRef,
+        ref: rootRef,
         children: [
             header,
-            /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({}, restProps), {
+            /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({}, restProps), {
                 ref: getRef,
                 className: classNames("vkuiSplitLayout__inner", !!header && "vkuiSplitLayout__innerHeader", center && "vkuiSplitLayout__innerCenter", className),
-                children: children
+                children: [
+                    children,
+                    modal,
+                    popout
+                ]
             }))
         ]
     });

package/dist/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","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","center","restProps","platform","div","ref"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,UAAU,QAAQ,8BAA2B;AAqBtD;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EAEW,WADdC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWZ;IAEjB,qBACE,MAACC;QACCQ,WAAWV,oCAAwBa,aAAa;QAChDT,QAAQA;QACRC,OAAOA;QACPG,YAAYA;;YAEXF;0BACD,KAACQ,+CACKF;gBACJG,KAAKN;gBACLC,WAAWV,qCAET,CAAC,CAACM,0CACFK,0CACAD;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","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","popoutModalRoot","useContext","rootRef","div","ref"],"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;AA6B3D;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EAEW,WADdC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWZ;IAEjB,MAAM,EAAEa,eAAe,EAAE,GAAGhB,MAAMiB,UAAU,CAACb;IAE7C,MAAMc,UAAUhB,aAA6Bc,iBAAiBR;IAE9D,qBACE,MAACW;QAAIT,WAAWT,oCAAwBc,aAAa;QAAsBK,KAAKF;;YAC7EZ;0BACD,MAACa,+CACKL;gBACJM,KAAKX;gBACLC,WAAWT,qCAET,CAAC,CAACK,0CACFK,0CACAD;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}