@vkontakte/vkui 5.4.3 → 5.5.0

package/dist/cssm/components/AppRoot/ScrollContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overflowY: '',\n    overflowX: '',\n  });\n};\n\nconst getPageYOffsetWithoutKeyboardHeight = (window: Window) => {\n  // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.\n  //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,\n  //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.\n  const diffOfClientHeightAndViewportHeight =\n    window.document.documentElement.clientHeight - window.innerHeight;\n  return window.pageYOffset - diffOfClientHeightAndViewportHeight;\n};\n\nexport interface ScrollContextInterface {\n  getScroll(this: void): { x: number; y: number };\n  scrollTo(this: void, x?: number, y?: number): void;\n  isScrollLock: boolean;\n  enableScrollLock(this: void): void;\n  disableScrollLock(this: void): void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext = React.createContext<ScrollContextInterface>({\n  getScroll: () => ({ x: 0, y: 0 }),\n  scrollTo: noop,\n  isScrollLock: false,\n  enableScrollLock: noop,\n  disableScrollLock: noop,\n});\n\nexport const useScroll = () => React.useContext(ScrollContext);\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement>;\n}\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps) => {\n  const { window, document } = useDOM();\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: window!.pageXOffset,\n      y: getPageYOffsetWithoutKeyboardHeight(window!),\n    }),\n    [window],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      // Some iOS versions do not normalize scroll — do it manually.\n      window!.scrollTo(\n        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,\n        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0,\n      );\n    },\n    [document, window],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = window!.pageYOffset;\n    const scrollX = window!.pageXOffset;\n    const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';\n    const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';\n\n    Object.assign(document!.body.style, {\n      position: 'fixed',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [document, window]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const scrollY = document!.body.style.top;\n    const scrollX = document!.body.style.left;\n\n    clearDisableScrollStyle(document!.body);\n    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [document, window]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({ elRef, children }: ScrollControllerProps) => {\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: elRef.current?.scrollLeft ?? 0,\n      y: elRef.current?.scrollTop ?? 0,\n    }),\n    [elRef],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      // Some iOS versions do not normalize scroll — do it manually.\n      el?.scrollTo(\n        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,\n        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0,\n      );\n    },\n    [elRef],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = el.scrollTop;\n    const scrollX = el.scrollLeft;\n    const overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';\n    const overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';\n\n    Object.assign(el.style, {\n      position: 'absolute',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [elRef]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollY = el.style.top;\n    const scrollX = el.style.left;\n\n    clearDisableScrollStyle(el);\n    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [elRef]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Вызывает функцию effect, до блокировки прокрутки\n * @param effect функция, которая может возвращать функцию очистки\n * @param deps effect обновится только при изменении значений в списке.\n */\nexport const useScrollLockEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {\n  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);\n  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();\n\n  // Изменяем effectCallback только при изменении deps\n  const effectCallback = React.useCallback(() => {\n    destructorRef.current = effect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  // Добавляем effectCallback в список функций, которые необходимо вызвать\n  // до блокировки\n  React.useEffect(() => {\n    const beforeSet = beforeScrollLockFnSetRef?.current;\n    if (!beforeSet) {\n      return noop;\n    }\n\n    beforeSet.add(effectCallback);\n\n    return () => {\n      beforeSet.delete(effectCallback);\n    };\n  }, [beforeScrollLockFnSetRef, effectCallback]);\n\n  // Вызываем сбрасывающую функцию, после отключения блокировки\n  React.useEffect(() => {\n    if (!isScrollLock && destructorRef.current) {\n      destructorRef.current();\n    }\n  }, [isScrollLock]);\n};\n\nexport const useScrollLock = (enabled = true) => {\n  const { enableScrollLock, disableScrollLock } = useScroll();\n  useIsomorphicLayoutEffect(() => {\n    if (enabled) {\n      enableScrollLock();\n      return disableScrollLock;\n    }\n    return noop;\n  }, [enableScrollLock, disableScrollLock, enabled]);\n};\n"],"names":["React","noop","clamp","useDOM","useIsomorphicLayoutEffect","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","ScrollContext","createContext","getScroll","x","y","scrollTo","isScrollLock","enableScrollLock","disableScrollLock","useScroll","useContext","GlobalScrollController","children","setScrollLock","useState","beforeScrollLockFnSetRef","useRef","Set","useCallback","pageXOffset","body","scrollWidth","innerWidth","scrollHeight","current","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","Provider","value","ElementScrollController","elRef","scrollLeft","scrollTop","el","useScrollLockEffect","effect","deps","destructorRef","effectCallback","useEffect","beforeSet","add","delete","useScrollLock","enabled"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/ScrollContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\n\nconst clearDisableScrollStyle = (node: HTMLElement) => {\n  Object.assign(node.style, {\n    position: '',\n    top: '',\n    left: '',\n    right: '',\n    overflowY: '',\n    overflowX: '',\n  });\n};\n\nconst getPageYOffsetWithoutKeyboardHeight = (window: Window) => {\n  // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.\n  //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,\n  //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.\n  const diffOfClientHeightAndViewportHeight =\n    window.document.documentElement.clientHeight - window.innerHeight;\n  return window.pageYOffset - diffOfClientHeightAndViewportHeight;\n};\n\nexport interface ScrollContextInterface {\n  getScroll(this: void): { x: number; y: number };\n  scrollTo(this: void, x?: number, y?: number): void;\n  isScrollLock: boolean;\n  enableScrollLock(this: void): void;\n  disableScrollLock(this: void): void;\n  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;\n}\n\nexport const ScrollContext = React.createContext<ScrollContextInterface>({\n  getScroll: () => ({ x: 0, y: 0 }),\n  scrollTo: noop,\n  isScrollLock: false,\n  enableScrollLock: noop,\n  disableScrollLock: noop,\n});\n\nexport const useScroll = () => React.useContext(ScrollContext);\n\nexport interface ScrollControllerProps extends HasChildren {\n  elRef: React.RefObject<HTMLElement>;\n}\n\nexport const GlobalScrollController = ({ children }: ScrollControllerProps) => {\n  const { window, document } = useDOM();\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: window!.pageXOffset,\n      y: getPageYOffsetWithoutKeyboardHeight(window!),\n    }),\n    [window],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      // Some iOS versions do not normalize scroll — do it manually.\n      window!.scrollTo(\n        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,\n        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0,\n      );\n    },\n    [document, window],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = window!.pageYOffset;\n    const scrollX = window!.pageXOffset;\n    const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';\n    const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';\n\n    Object.assign(document!.body.style, {\n      position: 'fixed',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [document, window]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const scrollY = document!.body.style.top;\n    const scrollX = document!.body.style.left;\n\n    clearDisableScrollStyle(document!.body);\n    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [document, window]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n\n      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\nexport const ElementScrollController = ({ elRef, children }: ScrollControllerProps) => {\n  const [isScrollLock, setScrollLock] = React.useState(false);\n  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());\n\n  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(\n    () => ({\n      x: elRef.current?.scrollLeft ?? 0,\n      y: elRef.current?.scrollTop ?? 0,\n    }),\n    [elRef],\n  );\n  const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(\n    (x = 0, y = 0) => {\n      const el = elRef.current;\n      // Some iOS versions do not normalize scroll — do it manually.\n      el?.scrollTo(\n        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,\n        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0,\n      );\n    },\n    [elRef],\n  );\n\n  const enableScrollLock = React.useCallback<ScrollContextInterface['enableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n    beforeScrollLockFnSetRef.current.forEach((fn) => {\n      fn();\n    });\n\n    const scrollY = el.scrollTop;\n    const scrollX = el.scrollLeft;\n    const overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';\n    const overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';\n\n    Object.assign(el.style, {\n      position: 'absolute',\n      top: `-${scrollY}px`,\n      left: `-${scrollX}px`,\n      right: '0',\n      overflowY,\n      overflowX,\n    });\n    setScrollLock(true);\n  }, [elRef]);\n\n  const disableScrollLock = React.useCallback<ScrollContextInterface['disableScrollLock']>(() => {\n    const el = elRef.current;\n    if (!el) {\n      return;\n    }\n\n    const scrollY = el.style.top;\n    const scrollX = el.style.left;\n\n    clearDisableScrollStyle(el);\n    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));\n    setScrollLock(false);\n  }, [elRef]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => ({\n      getScroll,\n      scrollTo,\n      isScrollLock,\n      disableScrollLock,\n      enableScrollLock,\n      beforeScrollLockFnSetRef,\n    }),\n    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock],\n  );\n\n  return <ScrollContext.Provider value={scrollController}>{children}</ScrollContext.Provider>;\n};\n\n/**\n * Вызывает функцию effect, до блокировки прокрутки\n * @param effect функция, которая может возвращать функцию очистки\n * @param deps effect обновится только при изменении значений в списке.\n */\nexport const useScrollLockEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {\n  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);\n  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();\n\n  // Изменяем effectCallback только при изменении deps\n  const effectCallback = React.useCallback(() => {\n    destructorRef.current = effect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  // Добавляем effectCallback в список функций, которые необходимо вызвать\n  // до блокировки\n  React.useEffect(() => {\n    const beforeSet = beforeScrollLockFnSetRef?.current;\n    if (!beforeSet) {\n      return noop;\n    }\n\n    beforeSet.add(effectCallback);\n\n    return () => {\n      beforeSet.delete(effectCallback);\n    };\n  }, [beforeScrollLockFnSetRef, effectCallback]);\n\n  // Вызываем сбрасывающую функцию, после отключения блокировки\n  React.useEffect(() => {\n    if (!isScrollLock && destructorRef.current) {\n      destructorRef.current();\n    }\n  }, [isScrollLock]);\n};\n\nexport const useScrollLock = (enabled = true) => {\n  const { enableScrollLock, disableScrollLock } = useScroll();\n  useIsomorphicLayoutEffect(() => {\n    if (enabled) {\n      enableScrollLock();\n      return disableScrollLock;\n    }\n    return noop;\n  }, [enableScrollLock, disableScrollLock, enabled]);\n};\n"],"names":["React","noop","clamp","useDOM","useIsomorphicLayoutEffect","clearDisableScrollStyle","node","Object","assign","style","position","top","left","right","overflowY","overflowX","getPageYOffsetWithoutKeyboardHeight","window","diffOfClientHeightAndViewportHeight","document","documentElement","clientHeight","innerHeight","pageYOffset","ScrollContext","createContext","getScroll","x","y","scrollTo","isScrollLock","enableScrollLock","disableScrollLock","useScroll","useContext","GlobalScrollController","children","setScrollLock","useState","beforeScrollLockFnSetRef","useRef","Set","useCallback","pageXOffset","body","scrollWidth","innerWidth","scrollHeight","current","forEach","fn","scrollY","scrollX","clientWidth","parseInt","scrollController","useMemo","Provider","value","ElementScrollController","elRef","scrollLeft","scrollTop","el","useScrollLockEffect","effect","deps","destructorRef","effectCallback","useEffect","beforeSet","add","delete","useScrollLock","enabled"],"mappings":"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"}

package/dist/cssm/components/AppearanceProvider/AppearanceProvider.d.ts

@@ -7,4 +7,4 @@ export interface AppearanceProviderProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
  */
-export declare const AppearanceProvider: ({ appearance, children }: AppearanceProviderProps) => JSX.Element;
+export declare const AppearanceProvider: ({ appearance, children }: AppearanceProviderProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppearanceType } from '@vkontakte/vk-bridge';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["React","usePlatform","TokensClassProvider","ConfigProviderOverride","AppearanceProvider","appearance","children","platform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAOlF;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,WAAU,EAAEC,SAAQ,EAA2B,GAAK;IACvF,MAAMC,WAAWN;IAEjB,qBACE,oBAACE;QAAuBE,YAAYA;qBAClC,oBAACH;QAAoBK,UAAUA;QAAUF,YAAYA;OAClDC;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppearanceType } from '@vkontakte/vk-bridge';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["React","usePlatform","TokensClassProvider","ConfigProviderOverride","AppearanceProvider","appearance","children","platform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAOlF;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,WAAU,EAAEC,SAAQ,EAA2B;IAClF,MAAMC,WAAWN;IAEjB,qBACE,oBAACE;QAAuBE,YAAYA;qBAClC,oBAACH;QAAoBK,UAAUA;QAAUF,YAAYA;OAClDC;AAIT,EAAE"}

package/dist/cssm/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+    className?: string;
+    /**
+     * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.
+     */
+    mode?: 'stretch' | 'none';
+    children: React.ReactNode;
+    /**
+     * Например 16 / 9, 4 / 3, 1920 / 1080
+     */
+    ratio: number;
+}
+/**
+ * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
+ * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
+ 
+ * @since 5.5.0
+ * @see https://vkcom.github.io/VKUI/#/AspectRatio
+ */
+export declare function AspectRatio({ ratio, children, mode, className, getRootRef, style: styleProp, ...props }: AspectRatioProps): JSX.Element;

package/dist/cssm/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import styles from './AspectRatio.module.css';
+/**
+ * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
+ * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
+ 
+ * @since 5.5.0
+ * @see https://vkcom.github.io/VKUI/#/AspectRatio
+ */ export function AspectRatio({ ratio , children , mode ='stretch' , className , getRootRef , style: styleProp , ...props }) {
+    const style = {
+        ['--vkui_internal--aspect_ratio']: String(ratio)
+    };
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles.AspectRatio, mode === 'stretch' && styles['AspectRatio--mode-stretch'], className),
+        style: {
+            ...styleProp,
+            ...style
+        },
+        ref: getRootRef,
+        ...props
+    }, children);
+}
+
+//# sourceMappingURL=AspectRatio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HasRootRef } from '../../types';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  children: React.ReactNode;\n  /**\n   * Например 16 / 9, 4 / 3, 1920 / 1080\n   */\n  ratio: number;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n \n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({\n  ratio,\n  children,\n  mode = 'stretch',\n  className,\n  getRootRef,\n  style: styleProp,\n  ...props\n}: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    ['--vkui_internal--aspect_ratio']: String(ratio),\n  };\n\n  return (\n    <div\n      className={classNames(\n        styles.AspectRatio,\n        mode === 'stretch' && styles['AspectRatio--mode-stretch'],\n        className,\n      )}\n      style={{ ...styleProp, ...style }}\n      ref={getRootRef}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["React","classNames","styles","AspectRatio","ratio","children","mode","className","getRootRef","style","styleProp","props","String","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,2BAA2B;AAiB9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAC1BC,MAAK,EACLC,SAAQ,EACRC,MAAO,UAAS,EAChBC,UAAS,EACTC,WAAU,EACVC,OAAOC,UAAS,EAChB,GAAGC,OACc;IACjB,MAAMF,QAAmD;QACvD,CAAC,gCAAgC,EAAEG,OAAOR;IAC5C;IAEA,qBACE,oBAACS;QACCN,WAAWN,WACTC,OAAOC,aACPG,SAAS,aAAaJ,MAAM,CAAC,4BAA4B,EACzDK;QAEFE,OAAO;YAAE,GAAGC,SAAS;YAAE,GAAGD,KAAK;QAAC;QAChCK,KAAKN;QACJ,GAAGG,KAAK;OAERN;AAGP"}

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

@@ -0,0 +1,29 @@
+.AspectRatio {
+  --vkui_internal--aspect_ratio: 1;
+
+  position: relative;
+  max-width: 100%;
+}
+
+.AspectRatio::before {
+  content: '';
+  height: 0;
+  display: block;
+  padding-bottom: calc((1 / var(--vkui_internal--aspect_ratio, 1)) * 100%);
+}
+
+.AspectRatio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.AspectRatio--mode-stretch > * {
+  width: 100%;
+  height: 100%;
+}
+
+.AspectRatio--mode-stretch > img,
+.AspectRatio--mode-stretch > video {
+  object-fit: cover;
+}

package/dist/cssm/components/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';
 import { type AvatarBadgeWithPresetProps } from './AvatarBadge/AvatarBadgeWithPreset';
@@ -48,8 +48,8 @@ export interface AvatarProps extends ImageBaseProps {
  * @see https://vkcom.github.io/VKUI/#/Avatar
  */
 export declare const Avatar: {
-    ({ size, className, gradientColor, initials, fallbackIcon, children, ...restProps }: AvatarProps): JSX.Element;
-    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => JSX.Element;
-    BadgeWithPreset: ({ preset, className, ...restProps }: AvatarBadgeWithPresetProps) => JSX.Element;
-    Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => JSX.Element;
+    ({ size, className, gradientColor, initials, fallbackIcon, children, ...restProps }: AvatarProps): React.JSX.Element;
+    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => React.JSX.Element;
+    BadgeWithPreset: ({ preset, className, ...restProps }: AvatarBadgeWithPresetProps) => React.JSX.Element;
+    Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => React.JSX.Element;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles['Avatar--gradient-red'],\n  'orange': styles['Avatar--gradient-orange'],\n  'yellow': styles['Avatar--gradient-yellow'],\n  'green': styles['Avatar--gradient-green'],\n  'blue': styles['Avatar--gradient-blue'],\n  'l-blue': styles['Avatar--gradient-l-blue'],\n  'violet': styles['Avatar--gradient-violet'],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNames(\n        styles['Avatar'],\n        gradientName && styles['Avatar--has-gradient'],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {initials && (\n        <div\n          className={styles['Avatar__initials']}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"names":["React","classNames","ImageBase","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","styles","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","div","style","fontSize","Badge","BadgeWithPreset","Overlay"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,WAAW,QAA+B,4BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,sCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,YAAY;AAChD,OAAOC,YAAY,sBAAsB;AAQzC,OAAO,MAAMC,sBAAsB,GAAG;AAEtC,MAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,MAAMC,iBAAiB;IACrB,OAAOH,MAAM,CAAC,uBAAuB;IACrC,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,SAASA,MAAM,CAAC,yBAAyB;IACzC,QAAQA,MAAM,CAAC,wBAAwB;IACvC,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,UAAUA,MAAM,CAAC,0BAA0B;AAC7C;AA6BA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EACrBC,MAAOJ,oBAAmB,EAC1BK,UAAS,EACTC,cAAa,EACbC,SAAQ,EACRC,aAAY,EACZC,SAAQ,EACR,GAAGC,WACS,GAAK;IACjB,MAAMC,eACJ,OAAOL,kBAAkB,WAAWL,yBAAyB,CAACK,cAAc,GAAGA,aAAa;IAC9F,MAAMM,sBAAsBD,gBAAgBA,iBAAiB;IAC7D,MAAME,wBAAwBN,WAAWO,YAAYN,YAAY;IAEjE,qBACE,oBAACb;QACE,GAAGe,SAAS;QACbN,MAAMA;QACNI,cAAcK;QACdR,WAAWX,WACTK,MAAM,CAAC,SAAS,EAChBY,gBAAgBZ,MAAM,CAAC,uBAAuB,EAC9Ca,uBAAuBV,cAAc,CAACS,aAAa,EACnDN;OAGDE,0BACC,oBAACQ;QACCV,WAAWN,MAAM,CAAC,mBAAmB;QACrCiB,OAAO;YACLC,UAAUnB,oBAAoBM;QAChC;OAECG,WAGJE;AAGP,EAAE;AAEFN,OAAOe,KAAK,GAAGtB;AAEfO,OAAOgB,eAAe,GAAGtB;AAEzBM,OAAOiB,OAAO,GAAGzB,UAAUyB,OAAO"}
+{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';\nimport {\n  AvatarBadgeWithPreset,\n  type AvatarBadgeWithPresetProps,\n} from './AvatarBadge/AvatarBadgeWithPreset';\nimport { getInitialsFontSize } from './helpers';\nimport styles from './Avatar.module.css';\n\nexport type {\n  AvatarBadgeProps,\n  AvatarBadgeWithPresetProps,\n  ImageBaseOverlayProps as AvatarOverlayProps,\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\n\nconst COLORS_NUMBER_TO_TEXT_MAP = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n} as const;\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = keyof typeof COLORS_NUMBER_TO_TEXT_MAP;\n\nexport type InitialsAvatarTextGradients =\n  | (typeof COLORS_NUMBER_TO_TEXT_MAP)[InitialsAvatarNumberGradients]\n  | 'blue';\n\nconst gradientStyles = {\n  'red': styles['Avatar--gradient-red'],\n  'orange': styles['Avatar--gradient-orange'],\n  'yellow': styles['Avatar--gradient-yellow'],\n  'green': styles['Avatar--gradient-green'],\n  'blue': styles['Avatar--gradient-blue'],\n  'l-blue': styles['Avatar--gradient-l-blue'],\n  'violet': styles['Avatar--gradient-violet'],\n};\n\nexport interface AvatarProps extends ImageBaseProps {\n  /**\n   * Инициалы пользователя.\n   *\n   * > Note: Если аватарка не прогрузится, то пользователь увидит инициалы.\n   *\n   * > ⚠️ Перебивает `fallbackIcon`.\n   */\n  initials?: string;\n  /**\n   * Задаёт градиент для фона.\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   * 2: 'orange'\n   * 3: 'yellow'\n   * 4: 'green'\n   * 5: 'l-blue'\n   * 6: 'violet'\n   *\n   * > Если необходимо задать свой градиент, то используйте значение `\"custom\"` и определите цвет градиента либо через\n   * > свой класс в `className`, либо через `style={{ backgroundImage: \"...\" }}`.\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients | 'custom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n  size = AVATAR_DEFAULT_SIZE,\n  className,\n  gradientColor,\n  initials,\n  fallbackIcon,\n  children,\n  ...restProps\n}: AvatarProps) => {\n  const gradientName =\n    typeof gradientColor === 'number' ? COLORS_NUMBER_TO_TEXT_MAP[gradientColor] : gradientColor;\n  const isGradientNotCustom = gradientName && gradientName !== 'custom';\n  const rewrittenFallbackIcon = initials ? undefined : fallbackIcon;\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      fallbackIcon={rewrittenFallbackIcon}\n      className={classNames(\n        styles['Avatar'],\n        gradientName && styles['Avatar--has-gradient'],\n        isGradientNotCustom && gradientStyles[gradientName],\n        className,\n      )}\n    >\n      {initials && (\n        <div\n          className={styles['Avatar__initials']}\n          style={{\n            fontSize: getInitialsFontSize(size),\n          }}\n        >\n          {initials}\n        </div>\n      )}\n      {children}\n    </ImageBase>\n  );\n};\n\nAvatar.Badge = AvatarBadge;\n\nAvatar.BadgeWithPreset = AvatarBadgeWithPreset;\n\nAvatar.Overlay = ImageBase.Overlay;\n"],"names":["React","classNames","ImageBase","AvatarBadge","AvatarBadgeWithPreset","getInitialsFontSize","styles","AVATAR_DEFAULT_SIZE","COLORS_NUMBER_TO_TEXT_MAP","gradientStyles","Avatar","size","className","gradientColor","initials","fallbackIcon","children","restProps","gradientName","isGradientNotCustom","rewrittenFallbackIcon","undefined","div","style","fontSize","Badge","BadgeWithPreset","Overlay"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,WAAW,QAA+B,4BAA4B;AAC/E,SACEC,qBAAqB,QAEhB,sCAAsC;AAC7C,SAASC,mBAAmB,QAAQ,YAAY;AAChD,OAAOC,YAAY,sBAAsB;AAQzC,OAAO,MAAMC,sBAAsB,GAAG;AAEtC,MAAMC,4BAA4B;IAChC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAYA,MAAMC,iBAAiB;IACrB,OAAOH,MAAM,CAAC,uBAAuB;IACrC,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,SAASA,MAAM,CAAC,yBAAyB;IACzC,QAAQA,MAAM,CAAC,wBAAwB;IACvC,UAAUA,MAAM,CAAC,0BAA0B;IAC3C,UAAUA,MAAM,CAAC,0BAA0B;AAC7C;AA6BA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EACrBC,MAAOJ,oBAAmB,EAC1BK,UAAS,EACTC,cAAa,EACbC,SAAQ,EACRC,aAAY,EACZC,SAAQ,EACR,GAAGC,WACS;IACZ,MAAMC,eACJ,OAAOL,kBAAkB,WAAWL,yBAAyB,CAACK,cAAc,GAAGA;IACjF,MAAMM,sBAAsBD,gBAAgBA,iBAAiB;IAC7D,MAAME,wBAAwBN,WAAWO,YAAYN;IAErD,qBACE,oBAACb;QACE,GAAGe,SAAS;QACbN,MAAMA;QACNI,cAAcK;QACdR,WAAWX,WACTK,MAAM,CAAC,SAAS,EAChBY,gBAAgBZ,MAAM,CAAC,uBAAuB,EAC9Ca,uBAAuBV,cAAc,CAACS,aAAa,EACnDN;OAGDE,0BACC,oBAACQ;QACCV,WAAWN,MAAM,CAAC,mBAAmB;QACrCiB,OAAO;YACLC,UAAUnB,oBAAoBM;QAChC;OAECG,WAGJE;AAGP,EAAE;AAEFN,OAAOe,QAAQtB;AAEfO,OAAOgB,kBAAkBtB;AAEzBM,OAAOiB,UAAUzB,UAAUyB"}

package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadge.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export type AvatarBadgeProps = ImageBaseBadgeProps;
-export declare const AvatarBadge: ({ className, ...restProps }: AvatarBadgeProps) => JSX.Element;
+export declare const AvatarBadge: ({ className, ...restProps }: AvatarBadgeProps) => React.JSX.Element;

package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './AvatarBadge.module.css';\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['AvatarBadge'],\n        size < 96 && styles['AvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","AvatarBadge","className","restProps","size","useContext","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,2BAA2B;AAI9C,OAAO,MAAMC,cAAc,CAAC,EAAEC,UAAS,EAAE,GAAGC,WAA6B,GAAK;IAC5E,MAAM,EAAEC,KAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,oBAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,cAAc,EACrBI,OAAO,MAAMJ,MAAM,CAAC,uBAAuB,EAC3CE;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './AvatarBadge.module.css';\n\nexport type AvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['AvatarBadge'],\n        size < 96 && styles['AvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","AvatarBadge","className","restProps","size","useContext","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,2BAA2B;AAI9C,OAAO,MAAMC,cAAc,CAAC,EAAEC,UAAS,EAAE,GAAGC,WAA6B;IACvE,MAAM,EAAEC,KAAI,EAAE,GAAGR,MAAMS,WAAWN;IAClC,qBACE,oBAACD,UAAUQ;QACR,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,cAAc,EACrBI,OAAO,MAAMJ,MAAM,CAAC,uBAAuB,EAC3CE;;AAIR,EAAE"}

package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export interface AvatarBadgeWithPresetProps extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {
     /**
@@ -8,4 +8,4 @@ export interface AvatarBadgeWithPresetProps extends Omit<ImageBaseBadgeProps, 'b
      */
     preset?: 'online' | 'online-mobile';
 }
-export declare const AvatarBadgeWithPreset: ({ preset, className, ...restProps }: AvatarBadgeWithPresetProps) => JSX.Element;
+export declare const AvatarBadgeWithPreset: ({ preset, className, ...restProps }: AvatarBadgeWithPresetProps) => React.JSX.Element;

package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  ImageBase,\n  type ImageBaseBadgeProps,\n  ImageBaseContext,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset\n    ? styles['AvatarBadge--preset-online']\n    : styles['AvatarBadge--preset-onlineMobile'];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles['AvatarBadge'], presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"names":["React","classNames","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","styles","AvatarBadgeWithPreset","preset","className","restProps","size","useContext","badgeSize","isOnlinePreset","presetClassName","Icon","Badge","background","width","height"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,UAAU;AAC3D,OAAOC,YAAY,2BAA2B;AAY9C,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,QAAS,SAAQ,EACjBC,UAAS,EACT,GAAGC,WACwB,GAAK;IAChC,MAAM,EAAEC,KAAI,EAAE,GAAGZ,MAAMa,UAAU,CAACT;IAClC,MAAMU,YAAYZ,gCAAgCU;IAClD,MAAMG,iBAAiBN,WAAW;IAClC,MAAMO,kBAAkBD,iBACpBR,MAAM,CAAC,6BAA6B,GACpCA,MAAM,CAAC,mCAAmC;IAC9C,MAAMU,OAAOF,iBAAiBV,eAAeC,kBAAkB;IAE/D,qBACE,oBAACH,UAAUe,KAAK;QACdC,YAAW;QACXT,WAAWT,WAAWM,MAAM,CAAC,cAAc,EAAES,iBAAiBN;QAC7D,GAAGC,SAAS;qBAEb,oBAACM;QAAKG,OAAON;QAAWO,QAAQP;;AAGtC,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  ImageBase,\n  type ImageBaseBadgeProps,\n  ImageBaseContext,\n} from '../../ImageBase/ImageBase';\nimport { Icon12Circle, Icon12OnlineMobile } from './icons';\nimport styles from './AvatarBadge.module.css';\n\nexport interface AvatarBadgeWithPresetProps\n  extends Omit<ImageBaseBadgeProps, 'background' | 'children'> {\n  /**\n   * Использует предзаданные настройки.\n   *\n   * За каждым пресетом закреплена своя иконка и стили.\n   */\n  preset?: 'online' | 'online-mobile';\n}\n\nexport const AvatarBadgeWithPreset = ({\n  preset = 'online',\n  className,\n  ...restProps\n}: AvatarBadgeWithPresetProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  const badgeSize = getBadgeIconSizeByImageBaseSize(size);\n  const isOnlinePreset = preset === 'online';\n  const presetClassName = isOnlinePreset\n    ? styles['AvatarBadge--preset-online']\n    : styles['AvatarBadge--preset-onlineMobile'];\n  const Icon = isOnlinePreset ? Icon12Circle : Icon12OnlineMobile;\n\n  return (\n    <ImageBase.Badge\n      background=\"stroke\"\n      className={classNames(styles['AvatarBadge'], presetClassName, className)}\n      {...restProps}\n    >\n      <Icon width={badgeSize} height={badgeSize} />\n    </ImageBase.Badge>\n  );\n};\n"],"names":["React","classNames","getBadgeIconSizeByImageBaseSize","ImageBase","ImageBaseContext","Icon12Circle","Icon12OnlineMobile","styles","AvatarBadgeWithPreset","preset","className","restProps","size","useContext","badgeSize","isOnlinePreset","presetClassName","Icon","Badge","background","width","height"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,+BAA+B,EAC/BC,SAAS,EAETC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,UAAU;AAC3D,OAAOC,YAAY,2BAA2B;AAY9C,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,QAAS,SAAQ,EACjBC,UAAS,EACT,GAAGC,WACwB;IAC3B,MAAM,EAAEC,KAAI,EAAE,GAAGZ,MAAMa,WAAWT;IAClC,MAAMU,YAAYZ,gCAAgCU;IAClD,MAAMG,iBAAiBN,WAAW;IAClC,MAAMO,kBAAkBD,iBACpBR,MAAM,CAAC,6BAA6B,GACpCA,MAAM,CAAC,mCAAmC;IAC9C,MAAMU,OAAOF,iBAAiBV,eAAeC;IAE7C,qBACE,oBAACH,UAAUe;QACTC,YAAW;QACXT,WAAWT,WAAWM,MAAM,CAAC,cAAc,EAAES,iBAAiBN;QAC7D,GAAGC,SAAS;qBAEb,oBAACM;QAAKG,OAAON;QAAWO,QAAQP;;AAGtC,EAAE"}

package/dist/cssm/components/Avatar/AvatarBadge/icons.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Icon12Circle as Icon12CircleLib, Icon12OnlineMobile as Icon12OnlineMobileLib } from '@vkontakte/icons';
-export declare const Icon12Circle: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12CircleLib>) => JSX.Element;
-export declare const Icon12OnlineMobile: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12OnlineMobileLib>) => JSX.Element;
+export declare const Icon12Circle: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12CircleLib>) => React.JSX.Element;
+export declare const Icon12OnlineMobile: ({ width, height, ...restProps }: React.ComponentProps<typeof Icon12OnlineMobileLib>) => React.JSX.Element;

package/dist/cssm/components/Avatar/AvatarBadge/icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/icons.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Circle as Icon12CircleLib,\n  Icon12OnlineMobile as Icon12OnlineMobileLib,\n} from '@vkontakte/icons';\n\nexport const Icon12Circle = ({\n  width = 12,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12CircleLib>) => {\n  return (\n    <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width = 8,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {\n  return (\n    <Icon12OnlineMobileLib\n      {...restProps}\n      width={width >= 24 ? 9 : 8}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n"],"names":["React","Icon12Circle","Icon12CircleLib","Icon12OnlineMobile","Icon12OnlineMobileLib","width","height","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,gBAAgBC,eAAe,EAC/BC,sBAAsBC,qBAAqB,QACtC,mBAAmB;AAE1B,OAAO,MAAMH,eAAe,CAAC,EAC3BI,OAAQ,GAAE,EACVC,QAAS,GAAE,EACX,GAAGC,WAC0C,GAAK;IAClD,qBACE,oBAACL;QAAiB,GAAGK,SAAS;QAAEF,OAAOA,SAAS,KAAK,KAAK,EAAE;QAAEC,QAAQA,UAAU,KAAK,KAAK,EAAE;;AAEhG,EAAE;AAEF,OAAO,MAAMH,qBAAqB,CAAC,EACjCE,OAAQ,EAAC,EACTC,QAAS,GAAE,EACX,GAAGC,WACgD,GAAK;IACxD,qBACE,oBAACH;QACE,GAAGG,SAAS;QACbF,OAAOA,SAAS,KAAK,IAAI,CAAC;QAC1BC,QAAQA,UAAU,KAAK,KAAK,EAAE;;AAGpC,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Avatar/AvatarBadge/icons.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon12Circle as Icon12CircleLib,\n  Icon12OnlineMobile as Icon12OnlineMobileLib,\n} from '@vkontakte/icons';\n\nexport const Icon12Circle = ({\n  width = 12,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12CircleLib>) => {\n  return (\n    <Icon12CircleLib {...restProps} width={width >= 24 ? 15 : 12} height={height >= 24 ? 15 : 12} />\n  );\n};\n\nexport const Icon12OnlineMobile = ({\n  width = 8,\n  height = 12,\n  ...restProps\n}: React.ComponentProps<typeof Icon12OnlineMobileLib>) => {\n  return (\n    <Icon12OnlineMobileLib\n      {...restProps}\n      width={width >= 24 ? 9 : 8}\n      height={height >= 24 ? 15 : 12}\n    />\n  );\n};\n"],"names":["React","Icon12Circle","Icon12CircleLib","Icon12OnlineMobile","Icon12OnlineMobileLib","width","height","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,gBAAgBC,eAAe,EAC/BC,sBAAsBC,qBAAqB,QACtC,mBAAmB;AAE1B,OAAO,MAAMH,eAAe,CAAC,EAC3BI,OAAQ,GAAE,EACVC,QAAS,GAAE,EACX,GAAGC,WAC0C;IAC7C,qBACE,oBAACL;QAAiB,GAAGK,SAAS;QAAEF,OAAOA,SAAS,KAAK,KAAK;QAAIC,QAAQA,UAAU,KAAK,KAAK;;AAE9F,EAAE;AAEF,OAAO,MAAMH,qBAAqB,CAAC,EACjCE,OAAQ,EAAC,EACTC,QAAS,GAAE,EACX,GAAGC,WACgD;IACnD,qBACE,oBAACH;QACE,GAAGG,SAAS;QACbF,OAAOA,SAAS,KAAK,IAAI;QACzBC,QAAQA,UAAU,KAAK,KAAK;;AAGlC,EAAE"}

package/dist/cssm/components/Avatar/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/helpers.ts"],"sourcesContent":["import type { ImageBaseSize } from '../ImageBase/ImageBase';\n\nconst MAX_FONT_SIZE = 30;\nconst MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;\nconst RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;\n\n/**\n * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.\n */\nexport function getInitialsFontSize(avatarSize: number): number {\n  if (avatarSize <= 16) {\n    return 5;\n  } else if (avatarSize <= 24) {\n    return 8;\n  } else if (avatarSize <= 32) {\n    return 10;\n  } else if (avatarSize <= 36) {\n    return 13;\n  } else if (avatarSize <= 44) {\n    return 14;\n  } else if (avatarSize <= 48) {\n    return 17;\n  } else if (avatarSize < 56) {\n    return 18;\n  } else if (avatarSize <= 64) {\n    return 21;\n  } else if (avatarSize <= 88) {\n    return 26;\n  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {\n    return MAX_FONT_SIZE;\n  }\n\n  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n"],"names":["MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"mappings":"AAEA,MAAMA,gBAAgB;AACtB,MAAMC,sBAAqC;AAC3C,MAAMC,gBAAgBF,gBAAgBC;AAEtC;;CAEC,GACD,OAAO,SAASE,oBAAoBC,UAAkB,EAAU;IAC9D,IAAIA,cAAc,IAAI;QACpB,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,aAAa,IAAI;QAC1B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAcH,qBAAqB;QAC5C,OAAOD;IACT,CAAC;IAED,MAAMK,qBAAqBC,KAAKC,IAAI,CAACH,aAAaF;IAClD,MAAMM,UAAUH,qBAAqB;IACrC,OAAOA,qBAAqBG;AAC9B,CAAC"}
+{"version":3,"sources":["../../../../src/components/Avatar/helpers.ts"],"sourcesContent":["import type { ImageBaseSize } from '../ImageBase/ImageBase';\n\nconst MAX_FONT_SIZE = 30;\nconst MAX_IMAGE_BASE_SIZE: ImageBaseSize = 96;\nconst RELATIVE_SIZE = MAX_FONT_SIZE / MAX_IMAGE_BASE_SIZE;\n\n/**\n * По возможности выставляем размеры по дизайн-системе. Иначе высчитываем.\n */\nexport function getInitialsFontSize(avatarSize: number): number {\n  if (avatarSize <= 16) {\n    return 5;\n  } else if (avatarSize <= 24) {\n    return 8;\n  } else if (avatarSize <= 32) {\n    return 10;\n  } else if (avatarSize <= 36) {\n    return 13;\n  } else if (avatarSize <= 44) {\n    return 14;\n  } else if (avatarSize <= 48) {\n    return 17;\n  } else if (avatarSize < 56) {\n    return 18;\n  } else if (avatarSize <= 64) {\n    return 21;\n  } else if (avatarSize <= 88) {\n    return 26;\n  } else if (avatarSize <= MAX_IMAGE_BASE_SIZE) {\n    return MAX_FONT_SIZE;\n  }\n\n  const calculatedFontSize = Math.ceil(avatarSize * RELATIVE_SIZE);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n"],"names":["MAX_FONT_SIZE","MAX_IMAGE_BASE_SIZE","RELATIVE_SIZE","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix"],"mappings":"AAEA,MAAMA,gBAAgB;AACtB,MAAMC,sBAAqC;AAC3C,MAAMC,gBAAgBF,gBAAgBC;AAEtC;;CAEC,GACD,OAAO,SAASE,oBAAoBC,UAAkB;IACpD,IAAIA,cAAc,IAAI;QACpB,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,aAAa,IAAI;QAC1B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAc,IAAI;QAC3B,OAAO;IACT,OAAO,IAAIA,cAAcH,qBAAqB;QAC5C,OAAOD;IACT;IAEA,MAAMK,qBAAqBC,KAAKC,KAAKH,aAAaF;IAClD,MAAMM,UAAUH,qBAAqB;IACrC,OAAOA,qBAAqBG;AAC9B"}

package/dist/cssm/components/Badge/Badge.d.ts

@@ -5,4 +5,4 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */
-export declare const Badge: ({ mode, className, ...restProps }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ mode, className, ...restProps }: BadgeProps) => React.JSX.Element;

package/dist/cssm/components/Banner/Banner.d.ts

@@ -72,4 +72,4 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRo
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */
-export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, className, getRootRef, ...restProps }: BannerProps) => JSX.Element;
+export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, className, getRootRef, ...restProps }: BannerProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","styles","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","styles","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":"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"}

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

@@ -147,7 +147,7 @@
  */
 
 :global(.vkuiInternalFormStatus) .Banner__in::before {
-  border: none;
+  border: 0;
 }
 
 :global(.vkuiInternalFormStatus--mode-error) .Banner__in {

package/dist/cssm/components/BaseGallery/BaseGallery.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BaseGalleryProps } from './types';
-export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, className, arrowSize, ...restProps }: BaseGalleryProps) => JSX.Element;
+export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, className, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;

package/dist/cssm/components/BaseGallery/BaseGallery.js

@@ -5,7 +5,7 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { HorizontalScrollArrow } from '../HorizontalScroll/HorizontalScrollArrow';
+import { ScrollArrow } from '../ScrollArrow/ScrollArrow';
 import { Touch } from '../Touch/Touch';
 import { calcMax, calcMin } from './helpers';
 import styles from './BaseGallery.module.css';
@@ -232,7 +232,7 @@ export const BaseGallery = ({ bullets =false , getRootRef , children , slideWidt
     const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
-        className: classNames(styles['BaseGallery'], 'vkuiInternalBaseGallery', align === 'center' && styles['BaseGallery--align-center'], slideWidth === 'custom' && styles['BaseGallery--custom-width'], isDraggable && styles['BaseGallery--draggable'], className),
+        className: classNames(styles['BaseGallery'], align === 'center' && styles['BaseGallery--align-center'], slideWidth === 'custom' && styles['BaseGallery--custom-width'], isDraggable && styles['BaseGallery--draggable'], className),
         ref: rootRef
     }, /*#__PURE__*/ React.createElement(Touch, {
         className: styles['BaseGallery__viewport'],
@@ -260,11 +260,13 @@ export const BaseGallery = ({ bullets =false , getRootRef , children , slideWidt
     }, React.Children.map(children, (_item, index)=>/*#__PURE__*/ React.createElement("div", {
             className: classNames(styles['BaseGallery__bullet'], index === slideIndex && styles['BaseGallery__bullet--active']),
             key: index
-        }))), showArrows && hasPointer && canSlideLeft && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
+        }))), showArrows && hasPointer && canSlideLeft && /*#__PURE__*/ React.createElement(ScrollArrow, {
+        className: styles['BaseGallery__arrow'],
         direction: "left",
         onClick: slideLeft,
         size: arrowSize
-    }), showArrows && hasPointer && canSlideRight && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
+    }), showArrows && hasPointer && canSlideRight && /*#__PURE__*/ React.createElement(ScrollArrow, {
+        className: styles['BaseGallery__arrow'],
         direction: "right",
         onClick: slideRight,
         size: arrowSize

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HorizontalScrollArrow } from '../HorizontalScroll/HorizontalScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  isDraggable: isDraggableProp = true,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  className,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const onStart = (e: TouchEvent) => {\n    onDragStart?.(e);\n    setShiftState((prevState) => ({ ...prevState, animation: false }));\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggableProp && !layoutState.current.isFullyVisible) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n    onDragEnd?.(e, targetIndex);\n\n    const nextShiftState: Partial<ShiftingState> = {\n      animation: true,\n      dragging: false,\n      deltaX: 0,\n    };\n\n    const shiftXStick = calculateDragIndent();\n    if (targetIndex !== slideIndex) {\n      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n      nextShiftState.shiftX = shiftXStick;\n    }\n\n    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n    if (targetIndex !== slideIndex) {\n      onChange?.(targetIndex);\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['BaseGallery'],\n        'vkuiInternalBaseGallery',\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n        className,\n      )}\n      ref={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(\n            styles['BaseGallery__bullets'],\n            {\n              dark: styles['BaseGallery__bullets--dark'],\n              light: styles['BaseGallery__bullets--light'],\n            }[bullets],\n          )}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <HorizontalScrollArrow direction=\"left\" onClick={slideLeft} size={arrowSize} />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <HorizontalScrollArrow direction=\"right\" onClick={slideRight} size={arrowSize} />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","HorizontalScrollArrow","Touch","calcMax","calcMin","styles","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","isDraggable","isDraggableProp","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","useRef","layoutState","shiftState","setShiftState","useState","rootRef","viewportRef","window","hasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","prevState","onResize","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","onStart","onMoveX","originalEvent","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","div","ref","onStartX","style","noSlideClick","key","el","aria-hidden","dark","light","onClick","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,qBAAqB,QAAQ,4CAA4C;AAClF,SAASC,KAAK,QAAoB,iBAAiB;AACnD,SAASC,OAAO,EAAEC,OAAO,QAAQ,YAAY;AAE7C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,qBAAqB;AAE3B,MAAMC,uBAAuB;IAC3BC,gBAAgB;IAChBC,qBAAqB;IACrBC,YAAY;IACZC,KAAK;IACLC,KAAK;IACLC,QAAQ,EAAE;IACVC,gBAAgB,IAAI;AACtB;AAEA,MAAMC,sBAAsB;IAC1BC,WAAWC;IACXC,QAAQ;IACRC,UAAU,KAAK;IACfC,QAAQ;IACRC,QAAQ;AACV;AAEA,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAU,KAAK,CAAA,EACfC,WAAU,EACVC,SAAQ,EACRC,YAAa,OAAM,EACnBC,YAAa,EAAC,EACdC,aAAaC,kBAAkB,IAAI,CAAA,EACnCC,YAAW,EACXC,UAAS,EACTC,SAAQ,EACRC,YAAW,EACXC,YAAW,EACXC,OAAQ,OAAM,EACdC,WAAU,EACVC,OAAM,EACNC,UAAS,EACTC,WAAY,IAAG,EACf,GAAGC,WACc,GAAK;IACtB,MAAMC,cAAc/C,MAAMgD,MAAM,CAAwC,CAAC;IACzE,MAAMC,cAAcjD,MAAMgD,MAAM,CAAcnC;IAC9C,MAAM,CAACqC,YAAYC,cAAc,GAAGnD,MAAMoD,QAAQ,CAAgB/B;IAElE,MAAMgC,UAAUlD,aAAa2B;IAC7B,MAAMwB,cAAcnD,aAAawC;IAEjC,MAAM,EAAEY,OAAM,EAAE,GAAGlD;IACnB,MAAMmD,aAAatD;IAEnB,MAAMuD,0BAA0BzB,eAAe,YAAYS,UAAU;IAErE,MAAMiB,iBAAiB,CAACC,QAAkB;QACxC,MAAMC,WAAWX,YAAYY,OAAO,CAAC3C,GAAG,IAAI;QAC5C,MAAM4C,WAAWb,YAAYY,OAAO,CAAC5C,GAAG,IAAI;QAE5C,IAAI0C,QAAQG,UAAU;YACpB,OAAOA;QACT,OAAO,IAAIH,QAAQC,UAAU;YAC3B,OAAOA;QACT,CAAC;QAED,OAAOD;IACT;IAEA;;GAEC,GACD,MAAMI,kBAAkB,CAACC,cAAwB;QAC/C,IAAIf,YAAYY,OAAO,CAACzC,cAAc,EAAE;YACtC,OAAO;QACT,CAAC;QAED,MAAM6C,cAAchB,YAAYY,OAAO,CAAC1C,MAAM,EAAE+C,SAC5CjB,YAAYY,OAAO,CAAC1C,MAAM,CAAC6C,YAAY,GACvC,IAAI;QAER,IAAIC,aAAa;YACf,MAAM,EAAEE,OAAM,EAAEC,MAAK,EAAE,GAAGH;YAE1B,IAAIR,yBAAyB;gBAC3B,MAAMY,gBAAgBpB,YAAYY,OAAO,CAAC9C,mBAAmB,IAAI;gBACjE,OAAOsD,gBAAgB,IAAIF,SAASC,QAAQ;YAC9C,CAAC;YAED,OAAOV,eAAe,CAAC,IAAIS;QAC7B,CAAC;QAED,OAAO;IACT;IAEA;;GAEC,GACD,MAAMG,sBAAsB,IAAM;QAChC,MAAMV,WAAWX,YAAYY,OAAO,CAAC3C,GAAG,IAAI;QAC5C,MAAM4C,WAAWb,YAAYY,OAAO,CAAC5C,GAAG,IAAI;QAC5C,MAAMU,SAASuB,WAAW1B,MAAM,GAAG0B,WAAWxB,MAAM;QAEpD,IAAIC,SAASiC,UAAU;YACrB,OAAOA,WAAWW,OAAO,AAAC5C,CAAAA,SAASiC,QAAO,IAAK;QACjD,OAAO,IAAIjC,SAASmC,UAAU;YAC5B,OAAOA,WAAWS,OAAO,AAAC5C,CAAAA,SAASmC,QAAO,IAAK;QACjD,CAAC;QAED,OAAOnC;IACT;IAEA,MAAM6C,mBAAmB,CAACC,UAAmC,CAAC,CAAC,GAAK;QAClE,MAAMC,cACJ1E,MAAM2E,QAAQ,CAACC,GAAG,CAAC7C,UAAU,CAAC8C,OAAwBC,IAAkC;YACtF,MAAMC,OAAOhC,YAAYc,OAAO,CAAC,CAAC,MAAM,EAAEiB,EAAE,CAAC,CAAC;YAC9C,OAAO;gBACLX,QAAQY,MAAMC,cAAc;gBAC5BZ,OAAOW,MAAME,eAAe;YAC9B;QACF,MAAM,EAAE;QAEV,MAAMC,sBAAsB7B,QAAQQ,OAAO,EAAEoB,eAAe;QAC5D,MAAME,2BAA2B7B,YAAYO,OAAO,EAAEoB,eAAe;QACrE,MAAMG,kBAAkBV,YAAYW,MAAM,CACxC,CAACC,KAAaC,QAA8BA,MAAMnB,KAAK,GAAGkB,KAC1D;QAEF,MAAME,eACJd,YAAYR,MAAM,IAAIjB,YAAYY,OAAO,CAAC1C,MAAM,CAAC+C,MAAM,IACvDjB,YAAYY,OAAO,CAAC1C,MAAM,CAACc,WAAW,EAAEkC,WAAWO,WAAW,CAACzC,WAAW,EAAEkC;QAE9ElB,YAAYY,OAAO,GAAG;YACpB/C,gBAAgBoE;YAChBnE,qBAAqBoE;YACrBnE,YAAYoE;YACZlE,KAAKT,QAAQ;gBACXU,QAAQuD;gBACR3D,qBAAqBoE;gBACrB1B;YACF;YACAxC,KAAKP,QAAQ;gBACXI,gBAAgBoE;gBAChBlE,YAAYoE;gBACZjE,QAAQuD;gBACR3D,qBAAqBoE;gBACrB1B;gBACAhB;YACF;YACAtB,QAAQuD;YACRtD,gBAAgBgE,mBAAmBF;QACrC;QAEA/B,cAAc,CAACsC,YAAe,CAAA;gBAC5B,GAAGA,SAAS;gBACZjE,QAAQgE,eAAezB,gBAAgB9B,cAAcwD,UAAUjE,MAAM;gBACrEF,WAAWmD,QAAQnD,SAAS,IAAImE,UAAUjE,MAAM,KAAKkC,eAAe+B,UAAUjE,MAAM;YACtF,CAAA;IACF;IAEA,MAAMkE,WAAW,IAAM;QACrB,IAAIxC,WAAW5B,SAAS,KAAKC,WAAW;YACtCiD,iBAAiB;gBAAElD,WAAW,KAAK;YAAC;QACtC,CAAC;IACH;IAEAlB,uBAAuBmD,QAAQ,UAAUmC;IAEzCpF,0BAA0B,IAAM;QAC9BkE,iBAAiB;YAAElD,WAAW,KAAK;QAAC;IACtC,GAAG;QAACS;QAAUU;QAAOT;KAAW;IAEhC1B,0BAA0B,IAAM;QAC9B,IAAI4C,WAAW5B,SAAS,KAAKC,WAAW;YACtC4B,cAAc,CAACsC,YAAe,CAAA;oBAC5B,GAAGA,SAAS;oBACZnE,WAAW,IAAI;oBACfI,QAAQ;oBACRF,QAAQuC,gBAAgB9B,cAAc;gBACxC,CAAA;QACF,CAAC;IACH,GAAG;QAACA;KAAW;IAEf,MAAM0D,YAAY,CAACC,QAA4B;QAC7CtD,WAAWL,aAAa;QACxBM,cAAcqD;IAChB;IAEA,MAAMC,aAAa,CAACD,QAA4B;QAC9CtD,WAAWL,aAAa;QACxBO,cAAcoD;IAChB;IAEA;;GAEC,GACD,MAAME,YAAY,CAACC,IAAkB;QACnC,MAAMC,eAAe,AAAC9C,WAAWxB,MAAM,GAAGqE,EAAEE,QAAQ,GAAI,MAAM;QAC9D,MAAMC,QACJhD,WAAW1B,MAAM,GAAG0B,WAAWxB,MAAM,GAAGsE,eAAgB/C,CAAAA,YAAYY,OAAO,CAAC3C,GAAG,IAAI,CAAA;QACrF,MAAMiF,YAAYjD,WAAWxB,MAAM,GAAG,IAAI,IAAI,CAAC,CAAC;QAEhD,sDAAsD;QACtD,IAAIsC,cAAcf,YAAYY,OAAO,CAAC1C,MAAM,CAACkE,MAAM,CACjD,CAACC,KAAac,MAA0BC,QAAkB;YACxD,MAAMC,gBAAgBC,KAAKC,GAAG,CAACvD,YAAYY,OAAO,CAAC1C,MAAM,CAACmE,IAAI,CAACnB,MAAM,GAAG+B;YACxE,MAAMO,eAAeF,KAAKC,GAAG,CAACJ,KAAKjC,MAAM,GAAG+B;YAE5C,OAAOI,gBAAgBG,eAAenB,MAAMe,KAAK;QACnD,GACApE;QAGF,IAAI+B,gBAAgB/B,YAAY;YAC9B,IAAIgC,cAAchC,aAAakE;YAE/B,IAAIlC,eAAe,KAAKA,cAAchB,YAAYY,OAAO,CAAC1C,MAAM,CAAC+C,MAAM,EAAE;gBACvE,IAAIqC,KAAKC,GAAG,CAACtD,WAAWxB,MAAM,IAAIuB,YAAYY,OAAO,CAAC1C,MAAM,CAAC8C,YAAY,CAACG,KAAK,GAAG,MAAM;oBACtFJ,cAAcC;gBAChB,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAOD;IACT;IAEA,MAAM0C,UAAU,CAACX,IAAkB;QACjC3D,cAAc2D;QACd5C,cAAc,CAACsC,YAAe,CAAA;gBAAE,GAAGA,SAAS;gBAAEnE,WAAW,KAAK;YAAC,CAAA;IACjE;IAEA,MAAMqF,UAAU,CAACZ,IAAkB;QACjC,IAAI5D,mBAAmB,CAACc,YAAYY,OAAO,CAACzC,cAAc,EAAE;YAC1D2E,EAAEa,aAAa,CAACC,cAAc;YAE9B,IAAId,EAAEe,QAAQ,EAAE;gBACd,IAAI5D,WAAWxB,MAAM,KAAKqE,EAAEvE,MAAM,EAAE;oBAClC2B,cAAc,CAACsC,YAAe,CAAA;4BAC5B,GAAGA,SAAS;4BACZ/D,QAAQqE,EAAEvE,MAAM;4BAChBC,UAAUsE,EAAEe,QAAQ;wBACtB,CAAA;gBACF,CAAC;YACH,CAAC;QACH,CAAC;IACH;IAEA,MAAMC,QAAQ,CAAChB,IAAkB;QAC/B,MAAM/B,cAAc+B,EAAEiB,OAAO,GAAGlB,UAAUC,KAAK9D,cAAc,CAAC;QAC9DI,YAAY0D,GAAG/B;QAEf,MAAMiD,iBAAyC;YAC7C3F,WAAW,IAAI;YACfG,UAAU,KAAK;YACfC,QAAQ;QACV;QAEA,MAAMwF,cAAc5C;QACpB,IAAIN,gBAAgB/B,YAAY;YAC9B,6FAA6F;YAC7FgF,eAAezF,MAAM,GAAG0F;QAC1B,CAAC;QAED/D,cAAc,CAACsC,YAAe,CAAA;gBAAE,GAAGA,SAAS;gBAAE,GAAGwB,cAAc;YAAC,CAAA;QAChE,IAAIjD,gBAAgB/B,YAAY;YAC9BK,WAAW0B;QACb,CAAC;IACH;IAEA,MAAMrC,SAASuB,WAAWzB,QAAQ,GAAG6C,wBAAwBpB,WAAW1B,MAAM;IAE9E,MAAM2F,aAAa;QACjBC,iBAAiB,CAAC,WAAW,EAAEzF,OAAO,GAAG,CAAC;QAC1C0F,WAAW,CAAC,WAAW,EAAE1F,OAAO,GAAG,CAAC;QACpC2F,kBAAkBpE,WAAW5B,SAAS,GAClC,CAAC,kBAAkB,EAAEV,mBAAmB,6BAA6B,CAAC,GACtE,MAAM;QACV2G,YAAYrE,WAAW5B,SAAS,GAC5B,CAAC,UAAU,EAAEV,mBAAmB,6BAA6B,CAAC,GAC9D,MAAM;IACZ;IAEA,MAAM4G,cAAc,CAACC,UAAiCxF,aAAuB;QAC3Ec,YAAYc,OAAO,CAAC,CAAC,MAAM,EAAE5B,WAAW,CAAC,CAAC,GAAGwF;IAC/C;IAEA,sEAAsE;IACtE,MAAMC,eAAe,CAACzE,YAAYY,OAAO,CAACzC,cAAc,IAAI8B,WAAW1B,MAAM,GAAG;IAEhF,MAAMmG,gBACJ,CAAC1E,YAAYY,OAAO,CAACzC,cAAc,IACnC,+FAA+F;IAC9F,CAAA,AAACqB,UAAU,UACVQ,YAAYY,OAAO,CAAC/C,cAAc,GAAGoC,WAAW1B,MAAM,GACnDyB,CAAAA,YAAYY,OAAO,CAAC7C,UAAU,IAAI,CAAA,KACrC,mFAAmF;IAClFyB,UAAU,UAAUR,aAAagB,YAAYY,OAAO,CAAC1C,MAAM,CAAC+C,MAAM,GAAG,CAAC;IAE3E,MAAMhC,cAAcC,mBAAmB,CAACc,YAAYY,OAAO,CAACzC,cAAc;IAE1E,qBACE,oBAACwG;QACE,GAAG9E,SAAS;QACbF,WAAW3C,WACTU,MAAM,CAAC,cAAc,EACrB,2BACA8B,UAAU,YAAY9B,MAAM,CAAC,4BAA4B,EACzDqB,eAAe,YAAYrB,MAAM,CAAC,4BAA4B,EAC9DuB,eAAevB,MAAM,CAAC,yBAAyB,EAC/CiC;QAEFiF,KAAKxE;qBAEL,oBAAC7C;QACCoC,WAAWjC,MAAM,CAAC,wBAAwB;QAC1CmH,UAAUpB;QACVC,SAASA;QACTI,OAAOA;QACPgB,OAAO;YAAE3D,OAAOpC,eAAe,WAAW,SAASA,UAAU;QAAC;QAC9DF,YAAYwB;QACZ0E,cAAAA,IAAY;qBAEZ,oBAACJ;QAAIhF,WAAWjC,MAAM,CAAC,qBAAqB;QAAEoH,OAAOZ;OAClDnH,MAAM2E,QAAQ,CAACC,GAAG,CAAC7C,UAAU,CAACqE,MAAuBtB,kBACpD,oBAAC8C;YACChF,WAAWjC,MAAM,CAAC,qBAAqB;YACvCsH,KAAK,CAAC,MAAM,EAAEnD,EAAE,CAAC;YACjB+C,KAAK,CAACK,KAAOV,YAAYU,IAAIpD;WAE5BsB,UAMRvE,yBACC,oBAAC+F;QACCO,eAAAA,IAAW;QACXvF,WAAW3C,WACTU,MAAM,CAAC,uBAAuB,EAC9B;YACEyH,MAAMzH,MAAM,CAAC,6BAA6B;YAC1C0H,OAAO1H,MAAM,CAAC,8BAA8B;QAC9C,CAAC,CAACkB,QAAQ;OAGX7B,MAAM2E,QAAQ,CAACC,GAAG,CAAC7C,UAAU,CAAC8C,OAAwBwB,sBACrD,oBAACuB;YACChF,WAAW3C,WACTU,MAAM,CAAC,sBAAsB,EAC7B0F,UAAUpE,cAActB,MAAM,CAAC,8BAA8B;YAE/DsH,KAAK5B;cAMZ3D,cAAcc,cAAckE,8BAC3B,oBAACnH;QAAsB4F,WAAU;QAAOmC,SAAS3C;QAAW4C,MAAM1F;QAEnEH,cAAcc,cAAcmE,+BAC3B,oBAACpH;QAAsB4F,WAAU;QAAQmC,SAASzC;QAAY0C,MAAM1F;;AAI5E,EAAE"}
+{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  isDraggable: isDraggableProp = true,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  className,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const onStart = (e: TouchEvent) => {\n    onDragStart?.(e);\n    setShiftState((prevState) => ({ ...prevState, animation: false }));\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggableProp && !layoutState.current.isFullyVisible) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n    onDragEnd?.(e, targetIndex);\n\n    const nextShiftState: Partial<ShiftingState> = {\n      animation: true,\n      dragging: false,\n      deltaX: 0,\n    };\n\n    const shiftXStick = calculateDragIndent();\n    if (targetIndex !== slideIndex) {\n      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n      nextShiftState.shiftX = shiftXStick;\n    }\n\n    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n    if (targetIndex !== slideIndex) {\n      onChange?.(targetIndex);\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n        className,\n      )}\n      ref={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(\n            styles['BaseGallery__bullets'],\n            {\n              dark: styles['BaseGallery__bullets--dark'],\n              light: styles['BaseGallery__bullets--light'],\n            }[bullets],\n          )}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","ScrollArrow","Touch","calcMax","calcMin","styles","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","isDraggable","isDraggableProp","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","useRef","layoutState","shiftState","setShiftState","useState","rootRef","viewportRef","window","hasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","prevState","onResize","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","onStart","onMoveX","originalEvent","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","div","ref","onStartX","style","noSlideClick","key","el","aria-hidden","dark","light","onClick","size"],"mappings":"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"}

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

@@ -80,3 +80,17 @@
 .BaseGallery__bullet--active {
   opacity: 1;
 }
+
+.BaseGallery__arrow {
+  position: absolute;
+  top: 0;
+  opacity: 0;
+}
+
+.BaseGallery:hover .BaseGallery__arrow {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.BaseGallery .BaseGallery__arrow:hover {
+  opacity: 1;
+}

package/dist/cssm/components/BaseGallery/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/BaseGallery/helpers.ts"],"sourcesContent":["import { HasAlign } from '../../types';\nimport { LayoutState } from './types';\n\ninterface CalcMin extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n  align: HasAlign['align'];\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewportOffsetWidth = 0,\n  align,\n  isCenterWithCustomWidth,\n}: CalcMin) => {\n  switch (align) {\n    case 'left':\n      return containerWidth - layerWidth;\n    case 'right':\n      return viewportOffsetWidth - layerWidth;\n    case 'center':\n      if (isCenterWithCustomWidth && slides.length) {\n        const { coordX, width } = slides[slides.length - 1];\n        return viewportOffsetWidth / 2 - coordX - width / 2;\n      } else {\n        return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;\n      }\n  }\n  return undefined;\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n}\n\nexport const calcMax = ({\n  slides = [],\n  viewportOffsetWidth = 0,\n  isCenterWithCustomWidth,\n}: CalcMax) => {\n  if (isCenterWithCustomWidth && slides.length) {\n    const { width, coordX } = slides[0];\n    return viewportOffsetWidth / 2 - coordX - width / 2;\n  }\n  return 0;\n};\n"],"names":["calcMin","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined","calcMax"],"mappings":"AAQA,OAAO,MAAMA,UAAU,CAAC,EACtBC,gBAAiB,EAAC,EAClBC,YAAa,EAAC,EACdC,QAAS,EAAE,CAAA,EACXC,qBAAsB,EAAC,EACvBC,MAAK,EACLC,wBAAuB,EACf,GAAK;IACb,OAAQD;QACN,KAAK;YACH,OAAOJ,iBAAiBC;QAC1B,KAAK;YACH,OAAOE,sBAAsBF;QAC/B,KAAK;YACH,IAAII,2BAA2BH,OAAOI,MAAM,EAAE;gBAC5C,MAAM,EAAEC,OAAM,EAAEC,MAAK,EAAE,GAAGN,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE;gBACnD,OAAOH,sBAAsB,IAAII,SAASC,QAAQ;YACpD,OAAO;gBACL,OAAOL,sBAAsB,AAACH,CAAAA,iBAAiBG,mBAAkB,IAAK,IAAIF;YAC5E,CAAC;IACL;IACA,OAAOQ;AACT,EAAE;AAMF,OAAO,MAAMC,UAAU,CAAC,EACtBR,QAAS,EAAE,CAAA,EACXC,qBAAsB,EAAC,EACvBE,wBAAuB,EACf,GAAK;IACb,IAAIA,2BAA2BH,OAAOI,MAAM,EAAE;QAC5C,MAAM,EAAEE,MAAK,EAAED,OAAM,EAAE,GAAGL,MAAM,CAAC,EAAE;QACnC,OAAOC,sBAAsB,IAAII,SAASC,QAAQ;IACpD,CAAC;IACD,OAAO;AACT,EAAE"}
+{"version":3,"sources":["../../../../src/components/BaseGallery/helpers.ts"],"sourcesContent":["import { HasAlign } from '../../types';\nimport { LayoutState } from './types';\n\ninterface CalcMin extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n  align: HasAlign['align'];\n}\n\nexport const calcMin = ({\n  containerWidth = 0,\n  layerWidth = 0,\n  slides = [],\n  viewportOffsetWidth = 0,\n  align,\n  isCenterWithCustomWidth,\n}: CalcMin) => {\n  switch (align) {\n    case 'left':\n      return containerWidth - layerWidth;\n    case 'right':\n      return viewportOffsetWidth - layerWidth;\n    case 'center':\n      if (isCenterWithCustomWidth && slides.length) {\n        const { coordX, width } = slides[slides.length - 1];\n        return viewportOffsetWidth / 2 - coordX - width / 2;\n      } else {\n        return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;\n      }\n  }\n  return undefined;\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n  isCenterWithCustomWidth: boolean;\n}\n\nexport const calcMax = ({\n  slides = [],\n  viewportOffsetWidth = 0,\n  isCenterWithCustomWidth,\n}: CalcMax) => {\n  if (isCenterWithCustomWidth && slides.length) {\n    const { width, coordX } = slides[0];\n    return viewportOffsetWidth / 2 - coordX - width / 2;\n  }\n  return 0;\n};\n"],"names":["calcMin","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","undefined","calcMax"],"mappings":"AAQA,OAAO,MAAMA,UAAU,CAAC,EACtBC,gBAAiB,EAAC,EAClBC,YAAa,EAAC,EACdC,QAAS,EAAE,CAAA,EACXC,qBAAsB,EAAC,EACvBC,MAAK,EACLC,wBAAuB,EACf;IACR,OAAQD;QACN,KAAK;YACH,OAAOJ,iBAAiBC;QAC1B,KAAK;YACH,OAAOE,sBAAsBF;QAC/B,KAAK;YACH,IAAII,2BAA2BH,OAAOI,QAAQ;gBAC5C,MAAM,EAAEC,OAAM,EAAEC,MAAK,EAAE,GAAGN,MAAM,CAACA,OAAOI,SAAS,EAAE;gBACnD,OAAOH,sBAAsB,IAAII,SAASC,QAAQ;YACpD,OAAO;gBACL,OAAOL,sBAAsB,AAACH,CAAAA,iBAAiBG,mBAAkB,IAAK,IAAIF;YAC5E;IACJ;IACA,OAAOQ;AACT,EAAE;AAMF,OAAO,MAAMC,UAAU,CAAC,EACtBR,QAAS,EAAE,CAAA,EACXC,qBAAsB,EAAC,EACvBE,wBAAuB,EACf;IACR,IAAIA,2BAA2BH,OAAOI,QAAQ;QAC5C,MAAM,EAAEE,MAAK,EAAED,OAAM,EAAE,GAAGL,MAAM,CAAC,EAAE;QACnC,OAAOC,sBAAsB,IAAII,SAASC,QAAQ;IACpD;IACA,OAAO;AACT,EAAE"}