@vkontakte/vkui 8.1.3 → 8.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  resolveLayoutProps,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { LayoutProps } from '../../lib/layouts/types';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n  'auto': styles.marginAuto,\n  'auto-inline': styles.marginAutoInline,\n  'auto-block': styles.marginAutoBlock,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nconst displayClassNames = {\n  'none': styles.displayNone,\n  'inline-grid': styles.displayInlineGrid,\n};\n\nexport interface SimpleGridProps extends RootComponentProps<HTMLElement>, LayoutProps {\n  /**\n   * Количество колонок.\n   */\n  columns?: number | undefined;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp | undefined;\n  /**\n   * Управляет отступами вокруг контейнера\n   * Значение `none` позволяет отключить отступы\n   * Значение `auto` позволяет задать платформенные отступы\n   * Значение `auto-inline` позволяет задать платформенные inline-отступы\n   * Значение `auto-block` позволяет задать платформенные block-отступы.\n   */\n  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | undefined;\n  /**\n   * Вместо задания количества колонок, можно указать минимальную ширину элементов.\n   */\n  minColWidth?: number | undefined;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | undefined;\n  /**\n   * Возможность задать css-свойство `display`.\n   */\n  display?: 'none' | 'grid' | 'inline-grid' | undefined;\n}\n\n/**\n * @see https://vkui.io/components/simple-grid\n */\nexport const SimpleGrid = ({\n  columns = 1,\n  gap = 0,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  display = 'grid',\n  ...restProps\n}: SimpleGridProps) => {\n  const resolvedProps = resolveLayoutProps(restProps);\n  const style: CSSCustomProperties = {};\n  const [rowGap, columnGap] = calculateGap(gap);\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n  style['--vkui_internal--grid_columns'] = `${columns}`;\n  if (minColWidth) {\n    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n  }\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        margin !== 'none' && marginClassNames[margin],\n        alignClassNames[align],\n        minColWidth && styles.withMinWidth,\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n        display !== 'grid' && displayClassNames[display],\n      )}\n      baseStyle={style}\n      {...resolvedProps}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","resolveLayoutProps","rowGapClassNames","RootComponent","styles","marginClassNames","marginAuto","marginAutoInline","marginAutoBlock","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","displayClassNames","displayNone","displayInlineGrid","SimpleGrid","columns","gap","margin","minColWidth","align","display","restProps","resolvedProps","style","rowGap","columnGap","baseClassName","host","withMinWidth","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,mBAAmB;IACvB,QAAQD,OAAOE,UAAU;IACzB,eAAeF,OAAOG,gBAAgB;IACtC,cAAcH,OAAOI,eAAe;AACtC;AAEA,MAAMC,kBAAkB;IACtBC,OAAON,OAAOO,UAAU;IACxBC,KAAKR,OAAOS,QAAQ;IACpBC,QAAQV,OAAOW,WAAW;IAC1BC,SAASZ,OAAOa,YAAY;IAC5BC,UAAUd,OAAOe,aAAa;AAChC;AAEA,MAAMC,oBAAoB;IACxB,QAAQhB,OAAOiB,WAAW;IAC1B,eAAejB,OAAOkB,iBAAiB;AACzC;AAmCA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,MAAM,CAAC,EACPC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EACjBC,UAAU,MAAM,EAChB,GAAGC,WACa;IAChB,MAAMC,gBAAgB9B,mBAAmB6B;IACzC,MAAME,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAGnC,aAAa0B;IACzC,IAAI,OAAOQ,WAAW,UAAU;QAC9BD,KAAK,CAAC,2BAA2B,GAAG,GAAGC,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCF,KAAK,CAAC,8BAA8B,GAAG,GAAGE,UAAU,EAAE,CAAC;IACzD;IACAF,KAAK,CAAC,gCAAgC,GAAG,GAAGR,SAAS;IACrD,IAAIG,aAAa;QACfK,KAAK,CAAC,iCAAiC,GAAG,GAAGL,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACxB;QACCgC,eAAerC,WACbM,OAAOgC,IAAI,EACXV,WAAW,UAAUrB,gBAAgB,CAACqB,OAAO,EAC7CjB,eAAe,CAACmB,MAAM,EACtBD,eAAevB,OAAOiC,YAAY,EAClC,OAAOH,cAAc,YAAYlC,mBAAmB,CAACkC,UAAU,EAC/D,OAAOD,WAAW,YAAY/B,gBAAgB,CAAC+B,OAAO,EACtDJ,YAAY,UAAUT,iBAAiB,CAACS,QAAQ;QAElDS,WAAWN;QACV,GAAGD,aAAa;;AAGvB,EAAE"}
+{"version":3,"sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  resolveLayoutProps,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { LayoutProps, MarginProp } from '../../lib/layouts/types';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\ntype SpecificMargin = 'auto' | 'auto-inline' | 'auto-block' | 'none';\n\nconst marginClassNames: Record<SpecificMargin, string | undefined> = {\n  'none': undefined,\n  'auto': styles.marginAuto,\n  'auto-inline': styles.marginAutoInline,\n  'auto-block': styles.marginAutoBlock,\n};\n\nfunction isSpecialMargin(margin: SimpleGridProps['margin']): margin is SpecificMargin {\n  return (\n    margin === 'auto' || margin === 'auto-inline' || margin === 'auto-block' || margin === 'none'\n  );\n}\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nconst displayClassNames = {\n  'none': styles.displayNone,\n  'inline-grid': styles.displayInlineGrid,\n};\n\nexport interface SimpleGridProps\n  extends RootComponentProps<HTMLElement>,\n    Omit<LayoutProps, 'margin'> {\n  /**\n   * Количество колонок.\n   */\n  columns?: number | undefined;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp | undefined;\n  /**\n   * Внешние отступы контейнера.\n   * Дополнительно поддерживаются специальные значения:\n   * `none` — отключает дополнительные отступы;\n   * `auto` — включает платформенные отступы вокруг контейнера;\n   * `auto-inline` — включает платформенные inline-отступы;\n   * `auto-block` — включает платформенные block-отступы.\n   */\n  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | MarginProp | undefined;\n  /**\n   * Вместо задания количества колонок, можно указать минимальную ширину элементов.\n   */\n  minColWidth?: number | undefined;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | undefined;\n  /**\n   * Возможность задать css-свойство `display`.\n   */\n  display?: 'none' | 'grid' | 'inline-grid' | undefined;\n}\n\n/**\n * @see https://vkui.io/components/simple-grid\n */\nexport const SimpleGrid = ({\n  columns = 1,\n  gap = 0,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  display = 'grid',\n  ...restProps\n}: SimpleGridProps) => {\n  const resolvedProps = resolveLayoutProps(\n    isSpecialMargin(margin) ? restProps : { ...restProps, margin },\n  );\n  const style: CSSCustomProperties = {};\n  const [rowGap, columnGap] = calculateGap(gap);\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n  style['--vkui_internal--grid_columns'] = `${columns}`;\n  if (minColWidth) {\n    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n  }\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.host,\n        isSpecialMargin(margin) && marginClassNames[margin],\n        alignClassNames[align],\n        minColWidth && styles.withMinWidth,\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n        display !== 'grid' && displayClassNames[display],\n      )}\n      baseStyle={style}\n      {...resolvedProps}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","resolveLayoutProps","rowGapClassNames","RootComponent","styles","marginClassNames","undefined","marginAuto","marginAutoInline","marginAutoBlock","isSpecialMargin","margin","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","displayClassNames","displayNone","displayInlineGrid","SimpleGrid","columns","gap","minColWidth","align","display","restProps","resolvedProps","style","rowGap","columnGap","baseClassName","host","withMinWidth","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,OAAOC,YAAY,0BAA0B;AAI7C,MAAMC,mBAA+D;IACnE,QAAQC;IACR,QAAQF,OAAOG,UAAU;IACzB,eAAeH,OAAOI,gBAAgB;IACtC,cAAcJ,OAAOK,eAAe;AACtC;AAEA,SAASC,gBAAgBC,MAAiC;IACxD,OACEA,WAAW,UAAUA,WAAW,iBAAiBA,WAAW,gBAAgBA,WAAW;AAE3F;AAEA,MAAMC,kBAAkB;IACtBC,OAAOT,OAAOU,UAAU;IACxBC,KAAKX,OAAOY,QAAQ;IACpBC,QAAQb,OAAOc,WAAW;IAC1BC,SAASf,OAAOgB,YAAY;IAC5BC,UAAUjB,OAAOkB,aAAa;AAChC;AAEA,MAAMC,oBAAoB;IACxB,QAAQnB,OAAOoB,WAAW;IAC1B,eAAepB,OAAOqB,iBAAiB;AACzC;AAsCA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,MAAM,CAAC,EACPjB,SAAS,MAAM,EACfkB,WAAW,EACXC,QAAQ,SAAS,EACjBC,UAAU,MAAM,EAChB,GAAGC,WACa;IAChB,MAAMC,gBAAgBhC,mBACpBS,gBAAgBC,UAAUqB,YAAY;QAAE,GAAGA,SAAS;QAAErB;IAAO;IAE/D,MAAMuB,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAGrC,aAAa6B;IACzC,IAAI,OAAOO,WAAW,UAAU;QAC9BD,KAAK,CAAC,2BAA2B,GAAG,GAAGC,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCF,KAAK,CAAC,8BAA8B,GAAG,GAAGE,UAAU,EAAE,CAAC;IACzD;IACAF,KAAK,CAAC,gCAAgC,GAAG,GAAGP,SAAS;IACrD,IAAIE,aAAa;QACfK,KAAK,CAAC,iCAAiC,GAAG,GAAGL,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAAC1B;QACCkC,eAAevC,WACbM,OAAOkC,IAAI,EACX5B,gBAAgBC,WAAWN,gBAAgB,CAACM,OAAO,EACnDC,eAAe,CAACkB,MAAM,EACtBD,eAAezB,OAAOmC,YAAY,EAClC,OAAOH,cAAc,YAAYpC,mBAAmB,CAACoC,UAAU,EAC/D,OAAOD,WAAW,YAAYjC,gBAAgB,CAACiC,OAAO,EACtDJ,YAAY,UAAUR,iBAAiB,CAACQ,QAAQ;QAElDS,WAAWN;QACV,GAAGD,aAAa;;AAGvB,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { millisecondsInSecond } from '../../lib/date';\nimport { useDOM } from '../../lib/dom';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков.\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`.\n *\n * Смотри https://developer.chrome.com/blog/page-lifecycle-api/.\n *\n * @param duration Длительность анимации в секундах.\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStartedTrue, setIsAnimationStartedFalse] =\n    useBooleanState();\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStartedFalse();\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(setIsAnimationStartedTrue, delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration, setIsAnimationStartedFalse, setIsAnimationStartedTrue]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStartedFalse();\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, setIsAnimationStartedFalse, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона.\n */\nfunction useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n    useStateWithPrev('0');\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el || !document) {\n      return;\n    }\n\n    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useResizeObserver(window, updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации.\n   */\n  colorFrom?: string | undefined;\n\n  /**\n   * Финальный цвет анимации.\n   */\n  colorTo?: string | undefined;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет.\n   */\n  noAnimation?: boolean | undefined;\n\n  /**\n   * Длительность анимации в секундах.\n   */\n  duration?: number | undefined;\n\n  /**\n   * Задерживает отрисовку элемента на заданное количество миллисекунд.\n   */\n  visibilityDelay?: number | undefined;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n *\n * @see https://vkui.io/components/skeleton\n *\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  visibilityDelay,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(\n        styles.host,\n        disableAnimation && styles.disableAnimation,\n        visibilityDelay && stylesDelay.visibilityDelay,\n      )}\n      baseStyle={mergeStyle(skeletonStyle, animationVisibilityDelayStyles(visibilityDelay))}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","mergeStyle","useBooleanState","useExternRef","useResizeObserver","useStateWithPrev","millisecondsInSecond","useDOM","animationVisibilityDelayStyles","RootComponent","styles","stylesDelay","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStartedTrue","setIsAnimationStartedFalse","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","visibilityDelay","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host","baseStyle"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { millisecondsInSecond } from '../../lib/date';\nimport { useDOM } from '../../lib/dom';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков.\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`.\n *\n * Смотри https://developer.chrome.com/blog/page-lifecycle-api/.\n *\n * @param duration Длительность анимации в секундах.\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStartedTrue, setIsAnimationStartedFalse] =\n    useBooleanState();\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStartedFalse();\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(setIsAnimationStartedTrue, delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration, setIsAnimationStartedFalse, setIsAnimationStartedTrue]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStartedFalse();\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, setIsAnimationStartedFalse, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона.\n */\nfunction useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {\n  const { window } = useDOM();\n  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n    useStateWithPrev('0');\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el) {\n      return;\n    }\n\n    const value = -(\n      el.getBoundingClientRect().left - el.ownerDocument.body.getBoundingClientRect().left\n    );\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useResizeObserver(window, updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации.\n   */\n  colorFrom?: string | undefined;\n\n  /**\n   * Финальный цвет анимации.\n   */\n  colorTo?: string | undefined;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет.\n   */\n  noAnimation?: boolean | undefined;\n\n  /**\n   * Длительность анимации в секундах.\n   */\n  duration?: number | undefined;\n\n  /**\n   * Задерживает отрисовку элемента на заданное количество миллисекунд.\n   */\n  visibilityDelay?: number | undefined;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n *\n * @see https://vkui.io/components/skeleton\n *\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  visibilityDelay,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(\n        styles.host,\n        disableAnimation && styles.disableAnimation,\n        visibilityDelay && stylesDelay.visibilityDelay,\n      )}\n      baseStyle={mergeStyle(skeletonStyle, animationVisibilityDelayStyles(visibilityDelay))}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","mergeStyle","useBooleanState","useExternRef","useResizeObserver","useStateWithPrev","millisecondsInSecond","useDOM","animationVisibilityDelayStyles","RootComponent","styles","stylesDelay","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStartedTrue","setIsAnimationStartedFalse","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","ownerDocument","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","visibilityDelay","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host","baseStyle"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SAASC,oBAAoB,QAAQ,oBAAiB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,8BAA8B,QAAQ,2CAAwC;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAC3C,OAAOC,iBAAiB,mDAAmD;AAE3E,MAAMC,gCAAgC;AAEtC;;;;;;;;;;;;;CAaC,GACD,SAASC,yBAAyBC,gBAAyB,EAAEC,WAAW,GAAG;IACzE,MAAM,CAACC,oBAAoBC,2BAA2BC,2BAA2B,GAC/EhB;IACF,MAAMiB,QAAQpB,MAAMqB,MAAM,CAA4CC;IAEtE,MAAMC,gBAAgBvB,MAAMwB,WAAW,CAAC;QACtCC,aAAaL,MAAMM,OAAO;QAC1BP;QAEA,MAAMQ,yBAAyBX,WAAWT;QAC1C,MAAMqB,QAAQD,yBAA0BE,YAAYC,GAAG,KAAKH;QAE5DP,MAAMM,OAAO,GAAGK,WAAWb,2BAA2BU;QAEtD,OAAO,IAAMH,aAAaL,MAAMM,OAAO;IACzC,GAAG;QAACV;QAAUG;QAA4BD;KAA0B;IAEpElB,MAAMgC,SAAS,CAAC;QACd,IAAIjB,kBAAkB;YACpBI;YACA;QACF;QAEA,IAAIF,oBAAoB;YACtB;QACF;QAEA,OAAOM;IACT,GAAG;QAACR;QAAkBE;QAAoBE;QAA4BI;KAAc;IAEpF,OAAON;AACT;AAEA;;CAEC,GACD,SAASgB,oBAAoBC,OAA4C;IACvE,MAAM,EAAEC,MAAM,EAAE,GAAG3B;IACnB,MAAM,CAAC,CAAC4B,sBAAsBC,yBAAyB,EAAEC,wBAAwB,GAC/EhC,iBAAiB;IAEnB,MAAMiC,iBAAiBvC,MAAMwB,WAAW,CAAC;QACvC,MAAMgB,KAAKN,QAAQR,OAAO;QAC1B,IAAI,CAACc,IAAI;YACP;QACF;QAEA,MAAMC,QAAQ,CACZD,CAAAA,GAAGE,qBAAqB,GAAGC,IAAI,GAAGH,GAAGI,aAAa,CAACC,IAAI,CAACH,qBAAqB,GAAGC,IAAI,AAAD;QAErF,MAAMG,gBAAgBL,UAAU,IAAI,MAAM,GAAGA,MAAM,EAAE,CAAC;QACtD,IAAIJ,6BAA6BS,eAAe;YAC9CR,wBAAwBQ;QAC1B;IACF,GAAG;QAACT;QAA0BH;QAASI;KAAwB;IAE/DtC,MAAMgC,SAAS,CAACO,gBAAgB;QAACA;KAAe;IAChDlC,kBAAkB8B,QAAQI;IAE1B,OAAOH;AACT;AAyCA;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAMW,WAAW,CAAC,EACvBC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,cAAc,KAAK,EACnB1C,QAAQ,EACR2C,MAAM,EACNC,UAAU,EACVC,eAAe,EACf,GAAGC,WACW;IACd,MAAM5B,UAAU9B,aAAawD;IAE7B,MAAM7C,mBAAmB,CAACD,yBAAyB4C,aAAa1C;IAChE,MAAMoB,uBAAuBH,oBAAoBC;IAEjD,MAAM6B,gBAA2D;QAC/Df;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAK;QACA,CAAC9C,8BAA8B,EAAEuB;IACnC;IAEA,IAAIoB,WAAW;QACbO,aAAa,CAAC,uCAAuC,GAAGP;IAC1D;IAEA,IAAIC,SAAS;QACXM,aAAa,CAAC,qCAAqC,GAAGN;IACxD;IAEA,IAAIO,OAAOC,QAAQ,CAACjD,WAAW;QAC7B+C,aAAa,CAAC,+CAA+C,GAAG,GAAG/C,SAAS,CAAC,CAAC;IAChF;IAEA,qBACE,KAACN;QACCkD,YAAY1B;QACZgC,WAAU;QACVC,eAAelE,WACbU,OAAOyD,IAAI,EACXrD,oBAAoBJ,OAAOI,gBAAgB,EAC3C8C,mBAAmBjD,YAAYiD,eAAe;QAEhDQ,WAAWnE,WAAW6D,eAAetD,+BAA+BoD;QACnE,GAAGC,SAAS;kBAEZP,0BAAY;sBAAE;;;AAGrB,EAAE"}

package/dist/cssm/components/Snackbar/Snackbar.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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