@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst warn = warnOnce('AppRoot');\n\nexport type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  safeAreaInsets,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const deprecatedInsets = useInsets(!safeAreaInsets);\n  const insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    if (!safeAreaInsets) {\n      // TODO [>=6]: удалить warn\n      warn(\"[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)\"); // prettier-ignore\n    }\n  }\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof SafeAreaInsets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof SafeAreaInsets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","IconSettingsProvider","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","warnOnce","AppRootContext","ElementScrollController","GlobalScrollController","warn","vkuiSizeXClassNames","none","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRootProp","portalRoot","disablePortal","className","safeAreaInsets","props","isKeyboardInputActive","rootRef","useRef","useState","setPortalRoot","document","deprecatedInsets","insets","appearance","hasPointer","sizeX","process","env","NODE_ENVIRONMENT","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","classPrefix","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst warn = warnOnce('AppRoot');\n\nexport type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst vkuiLayoutClassNames = {\n  card: 'vkui--layout-card',\n  plain: 'vkui--layout-plain',\n};\n\nfunction containerClassNames(layout: AppRootProps['layout'], sizeX: SizeType | 'none'): string[] {\n  const classNames: string[] = [];\n\n  if (layout) {\n    classNames.push(vkuiLayoutClassNames[layout]);\n  }\n\n  if (sizeX !== SizeType.COMPACT) {\n    classNames.push(vkuiSizeXClassNames[sizeX]);\n  }\n\n  return classNames;\n}\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  layout?: 'card' | 'plain';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  disableParentTransformForPositionFixedElements,\n  className,\n  safeAreaInsets,\n  layout,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const deprecatedInsets = useInsets(!safeAreaInsets);\n  const insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    if (!safeAreaInsets) {\n      // TODO [>=6]: удалить warn\n      warn(\"[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)\"); // prettier-ignore\n    }\n  }\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    if (parent) {\n      if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {\n        parent.style.transform = 'translate3d(0, 0, 0)';\n      }\n      parent.classList.add(...classes);\n    }\n\n    return () => {\n      if (parent) {\n        if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {\n          parent.style.transform = '';\n        }\n        parent.classList.remove(...classes);\n      }\n    };\n  }, [disableParentTransformForPositionFixedElements]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof SafeAreaInsets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof SafeAreaInsets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const classNames = containerClassNames(layout, sizeX);\n\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (!classNames.length || !container) {\n      return noop;\n    }\n\n    container.classList.add(...classNames);\n    return () => {\n      container.classList.remove(...classNames);\n    };\n  }, [sizeX, layout]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n        layout,\n      }}\n    >\n      <ScrollController elRef={rootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","warnOnce","AppRootContext","ElementScrollController","GlobalScrollController","warn","vkuiSizeXClassNames","none","REGULAR","vkuiLayoutClassNames","card","plain","containerClassNames","layout","sizeX","push","COMPACT","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRootProp","portalRoot","disablePortal","disableParentTransformForPositionFixedElements","className","safeAreaInsets","props","isKeyboardInputActive","rootRef","useRef","useState","setPortalRoot","document","deprecatedInsets","insets","appearance","hasPointer","process","env","NODE_ENVIRONMENT","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","style","transform","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","setProperty","removeProperty","container","length","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","div","ref"],"mappings":"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"}

package/dist/components/AppRoot/AppRootContext.d.ts

@@ -6,5 +6,6 @@ export interface AppRootContextInterface {
     mode?: 'partial' | 'embedded' | 'full';
     keyboardInput?: boolean;
     disablePortal?: boolean;
+    layout?: 'card' | 'plain';
 }
 export declare const AppRootContext: React.Context<AppRootContextInterface>;

package/dist/components/AppRoot/AppRootContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAW/B,OAAO,IAAMC,iBAAiBD,MAAME,aAAa,CAA0B;IACzEC,YAAY;AACd,GAAG"}
+{"version":3,"sources":["../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n  layout?: 'card' | 'plain';\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAY/B,OAAO,IAAMC,iBAAiBD,MAAME,aAAa,CAA0B;IACzEC,YAAY;AACd,GAAG"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     className?: string;
     /**
      * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.
@@ -19,4 +19,4 @@ export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>,
  * @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;
+export declare function AspectRatio({ ratio, children, mode, style: styleProp, ...props }: AspectRatioProps): JSX.Element;

package/dist/components/AspectRatio/AspectRatio.js

@@ -3,6 +3,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 /**
  * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
  * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
@@ -10,20 +11,17 @@ import { classNames } from "@vkontakte/vkjs";
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */ export function AspectRatio(_param) {
-    var ratio = _param.ratio, children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "stretch" : _param_mode, className = _param.className, getRootRef = _param.getRootRef, styleProp = _param.style, props = _object_without_properties(_param, [
+    var ratio = _param.ratio, children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "stretch" : _param_mode, styleProp = _param.style, props = _object_without_properties(_param, [
         "ratio",
         "children",
         "mode",
-        "className",
-        "getRootRef",
         "style"
     ]);
     var style = _define_property({}, "--vkui_internal--aspect_ratio", String(ratio));
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
-        className: classNames("vkuiAspectRatio", mode === "stretch" && "vkuiAspectRatio--mode-stretch", className),
-        style: _object_spread({}, styleProp, style),
-        ref: getRootRef
-    }, props), children);
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: classNames("vkuiAspectRatio", mode === "stretch" && "vkuiAspectRatio--mode-stretch"),
+        style: _object_spread({}, styleProp, style)
+    }, props));
 }
 
 //# sourceMappingURL=AspectRatio.js.map

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

@@ -1 +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","AspectRatio","ratio","children","mode","className","getRootRef","style","styleProp","props","String","div","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAmB7C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY;QAC1BC,QAD0B,OAC1BA,OACAC,WAF0B,OAE1BA,wBAF0B,OAG1BC,MAAAA,gCAAO,yBACPC,YAJ0B,OAI1BA,WACAC,aAL0B,OAK1BA,YACAC,AAAOC,YANmB,OAM1BD,OACGE,mCAPuB;QAC1BP;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMA,QACJ,qBAAC,iCAAkCG,OAAOR;IAG5C,qBACE,oBAACS;QACCN,WAAWL,8BAETI,SAAS,8CACTC;QAEFE,OAAO,mBAAKC,WAAcD;QAC1BK,KAAKN;OACDG,QAEHN;AAGP"}
+{"version":3,"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends HTMLAttributesWithRootRef<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  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    <RootComponent\n      baseClassName={classNames(\n        styles.AspectRatio,\n        mode === 'stretch' && styles['AspectRatio--mode-stretch'],\n      )}\n      style={{ ...styleProp, ...style }}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","AspectRatio","ratio","children","mode","style","styleProp","props","String","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAgB/D;;;;;;CAMC,GACD,OAAO,SAASC,YAAY;QAC1BC,QAD0B,OAC1BA,OACAC,WAF0B,OAE1BA,wBAF0B,OAG1BC,MAAAA,gCAAO,yBACPC,AAAOC,YAJmB,OAI1BD,OACGE,mCALuB;QAC1BL;QACAC;QACAC;QACAC;;IAGA,IAAMA,QACJ,qBAAC,iCAAkCG,OAAON;IAG5C,qBACE,oBAACF;QACCS,eAAeV,8BAEbK,SAAS;QAEXC,OAAO,mBAAKC,WAAcD;OACtBE;AAGV"}

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface BadgeProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
     mode: 'new' | 'prominent';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */
-export declare const Badge: ({ mode, className, ...restProps }: BadgeProps) => React.JSX.Element;
+export declare const Badge: ({ mode, ...restProps }: BadgeProps) => React.JSX.Element;

package/dist/components/Badge/Badge.js

@@ -2,18 +2,20 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
+var stylesMode = {
+    new: "vkuiBadge--mode-new",
+    prominent: "vkuiBadge--mode-prominent"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */ export var Badge = function(_param) /*#__PURE__*/ {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "new" : _param_mode, className = _param.className, restProps = _object_without_properties(_param, [
-        "mode",
-        "className"
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "new" : _param_mode, restProps = _object_without_properties(_param, [
+        "mode"
     ]);
-    return React.createElement("span", _object_spread({
-        className: classNames("vkuiBadge", {
-            new: "vkuiBadge--mode-new",
-            prominent: "vkuiBadge--mode-prominent"
-        }[mode], className)
+    return React.createElement(RootComponent, _object_spread({
+        Component: "span",
+        baseClassName: classNames("vkuiBadge", stylesMode[mode])
     }, restProps));
 };
 

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Badge.module.css';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', className, ...restProps }: BadgeProps) => (\n  <span\n    className={classNames(\n      styles['Badge'],\n      {\n        new: styles['Badge--mode-new'],\n        prominent: styles['Badge--mode-prominent'],\n      }[mode],\n      className,\n    )}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","Badge","mode","className","restProps","span","new","prominent"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAO7C;;CAEC,GACD,OAAO,IAAMC,QAAQ;6BAAGC,MAAAA,gCAAO,qBAAOC,mBAAAA,WAAcC;QAA5BF;QAAcC;;WACpC,oBAACE;QACCF,WAAWH,wBAET;YACEM,GAAG;YACHC,SAAS;QACX,CAAC,CAACL,KAAK,EACPC;OAEEC;AACL,EACD"}
+{"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Badge.module.css';\n\nconst stylesMode = {\n  new: styles['Badge--mode-new'],\n  prominent: styles['Badge--mode-prominent'],\n};\n\nexport interface BadgeProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', ...restProps }: BadgeProps) => (\n  <RootComponent\n    Component=\"span\"\n    baseClassName={classNames(styles['Badge'], stylesMode[mode])}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","RootComponent","stylesMode","new","prominent","Badge","mode","restProps","Component","baseClassName"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC,aAAa;IACjBC,GAAG;IACHC,SAAS;AACX;AAMA;;CAEC,GACD,OAAO,IAAMC,QAAQ;6BAAGC,MAAAA,gCAAO,qBAAUC;QAAjBD;;WACtB,oBAACL;QACCO,WAAU;QACVC,eAAeT,wBAA4BE,UAAU,CAACI,KAAK;OACvDC;AACL,EACD"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Тип баннера.
      */
@@ -73,4 +73,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, noPadding, ...restProps }: BannerProps) => React.JSX.Element;
+export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, noPadding, ...restProps }: BannerProps) => React.JSX.Element;

package/dist/components/Banner/Banner.js

@@ -2,20 +2,25 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
-import { Icon24Cancel, Icon24Chevron, Icon24DismissDark, Icon24DismissSubstract } from "@vkontakte/icons";
+import { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from "@vkontakte/icons";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Platform } from "../../lib/platform";
 import { IconButton } from "../IconButton/IconButton";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Tappable } from "../Tappable/Tappable";
 import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
+var stylesSize = {
+    s: "vkuiBanner--size-s",
+    m: "vkuiBanner--size-m"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */ export var Banner = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, _param_imageTheme = _param.imageTheme, imageTheme = _param_imageTheme === void 0 ? "dark" : _param_imageTheme, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, before = _param.before, asideMode = _param.asideMode, header = _param.header, subheader = _param.subheader, text = _param.text, children = _param.children, background = _param.background, actions = _param.actions, onDismiss = _param.onDismiss, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, className = _param.className, getRootRef = _param.getRootRef, noPadding = _param.noPadding, restProps = _object_without_properties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, _param_imageTheme = _param.imageTheme, imageTheme = _param_imageTheme === void 0 ? "dark" : _param_imageTheme, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, before = _param.before, asideMode = _param.asideMode, header = _param.header, subheader = _param.subheader, text = _param.text, children = _param.children, background = _param.background, actions = _param.actions, onDismiss = _param.onDismiss, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, noPadding = _param.noPadding, restProps = _object_without_properties(_param, [
         "mode",
         "imageTheme",
         "size",
@@ -29,14 +34,12 @@ import { Title } from "../Typography/Title/Title";
         "actions",
         "onDismiss",
         "dismissLabel",
-        "className",
-        "getRootRef",
         "noPadding"
     ]);
     var platform = usePlatform();
     var HeaderTypography = size === "m" ? Title : Headline;
     var SubheaderTypography = size === "m" ? Text : Subhead;
-    var IconDismissIOS = mode === "image" ? Icon24DismissDark : Icon24DismissSubstract;
+    var IconDismissIOS = mode === "image" ? Icon24DismissDark : Icon24Dismiss;
     var content = /*#__PURE__*/ React.createElement(React.Fragment, null, mode === "image" && background && /*#__PURE__*/ React.createElement("div", {
         "aria-hidden": true,
         className: "vkuiBanner__bg"
@@ -57,12 +60,10 @@ import { Title } from "../Typography/Title/Title";
     }, text), hasReactNode(actions) && React.Children.count(actions) > 0 && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiBanner__actions"
     }, actions)));
-    return /*#__PURE__*/ React.createElement("section", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiBanner", !noPadding && "vkuiBanner--withPadding", platform === Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", {
-            s: "vkuiBanner--size-s",
-            m: "vkuiBanner--size-m"
-        }[size], mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted", className),
-        ref: getRootRef
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({
+        Component: "section"
+    }, restProps), {
+        baseClassName: classNames("vkuiBanner", !noPadding && "vkuiBanner--withPadding", platform === Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", stylesSize[size], mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted")
     }), asideMode === "expand" ? /*#__PURE__*/ React.createElement(Tappable, {
         className: "vkuiBanner__in",
         activeMode: platform === Platform.IOS ? "opacity" : "background",

package/dist/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   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\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  noPadding?: boolean;\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  noPadding,\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        !noPadding && styles['Banner--withPadding'],\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 className={styles['Banner__expand']} />\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","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","noPadding","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":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,sBAAsB,QACjB,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AA0ElD;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACAC,mBAAAA,WACGC;QAhBHhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAW1B;IAEjB,IAAM2B,mBAAmBhB,SAAS,MAAMJ,QAAQH;IAChD,IAAMwB,sBAAsBjB,SAAS,MAAML,OAAOD;IAElD,IAAMwB,iBAAiBpB,SAAS,UAAUb,oBAAoBC;IAE9D,IAAMiC,wBACJ,0CACGrB,SAAS,WAAWS,4BACnB,oBAACa;QAAIC,eAAAA;QAAYV,SAAS;OACvBJ,aAIJN,wBAAU,oBAACmB;QAAIT,SAAS;OAA6BV,uBAEtD,oBAACmB;QAAIT,SAAS;OACXvB,aAAae,yBACZ,oBAACa;QAAiBM,WAAU;QAAIC,QAAO;QAAIC,OAAOxB,SAAS,MAAM,MAAM;OACpEG,SAGJf,aAAagB,4BACZ,oBAACa;QAAoBK,WAAU;QAAIX,SAAS;OACzCP,YAGJhB,aAAaiB,uBACZ,oBAACV;QAAK2B,WAAU;QAAIX,SAAS;OAC1BN,OAGJjB,aAAaoB,YAAY1B,MAAM2C,QAAQ,CAACC,KAAK,CAAClB,WAAW,mBACxD,oBAACY;QAAIT,SAAS;OAA8BH;IAMpD,qBACE,oBAACmB,mDACKb;QACJH,WAAWxB,yBAET,CAAC0B,wCACDE,aAAazB,SAASsC,GAAG,uBACzB9B,SAAS,qCACT;YACE+B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC9B,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEFoB,KAAKnB;QAEJV,cAAc,yBACb,oBAACV;QACCmB,SAAS;QACTqB,YAAYjB,aAAazB,SAASsC,GAAG,GAAG,YAAY;QACpDK,MAAK;OAEJd,uBAED,oBAACC;QAAIT,SAAS;qBACZ,oBAAC3B;QAAc2B,SAAS;yBAI5B,oBAACS;QAAIT,SAAS;OACXQ,SAEAjB,cAAc,2BACb,oBAACkB;QAAIT,SAAS;qBACZ,oBAACpB;QACC2C,cAAYxB;QACZC,SAAS;QACTwB,SAAS1B;QACT2B,WAAU;QACVC,WAAW;OAEVtB,aAAazB,SAASsC,GAAG,iBAAG,oBAACV,sCAAoB,oBAACnC;AAQnE,EAAE"}
+{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\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\nconst stylesSize = {\n  s: styles['Banner--size-s'],\n  m: styles['Banner--size-m'],\n};\n\nexport interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\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   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\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  noPadding?: boolean;\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  noPadding,\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 : Icon24Dismiss;\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    <RootComponent\n      Component=\"section\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Banner'],\n        !noPadding && styles['Banner--withPadding'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        stylesSize[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n      )}\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 className={styles['Banner__expand']} />\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    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","Platform","IconButton","RootComponent","Tappable","Headline","Subhead","Text","Title","stylesSize","s","m","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","noPadding","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","className","Component","weight","level","Children","count","baseClassName","IOS","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAGlD,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAyEA;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAW5B;IAEjB,IAAM6B,mBAAmBd,SAAS,MAAMP,QAAQH;IAChD,IAAMyB,sBAAsBf,SAAS,MAAMR,OAAOD;IAElD,IAAMyB,iBAAiBlB,SAAS,UAAUhB,oBAAoBD;IAE9D,IAAMoC,wBACJ,0CACGnB,SAAS,WAAWS,4BACnB,oBAACW;QAAIC,eAAAA;QAAYC,SAAS;OACvBb,aAIJN,wBAAU,oBAACiB;QAAIE,SAAS;OAA6BnB,uBAEtD,oBAACiB;QAAIE,SAAS;OACXpC,aAAamB,yBACZ,oBAACW;QAAiBO,WAAU;QAAIC,QAAO;QAAIC,OAAOvB,SAAS,MAAM,MAAM;OACpEG,SAGJnB,aAAaoB,4BACZ,oBAACW;QAAoBM,WAAU;QAAID,SAAS;OACzChB,YAGJpB,aAAaqB,uBACZ,oBAACb;QAAK6B,WAAU;QAAID,SAAS;OAC1Bf,OAGJrB,aAAawB,YAAY9B,MAAM8C,QAAQ,CAACC,KAAK,CAACjB,WAAW,mBACxD,oBAACU;QAAIE,SAAS;OAA8BZ;IAMpD,qBACE,oBAACpB;QACCiC,WAAU;OACNT;QACJc,eAAe3C,yBAEb,CAAC4B,wCACDE,aAAa3B,SAASyC,GAAG,uBACzB7B,SAAS,qCACTJ,UAAU,CAACM,KAAK,EAChBF,SAAS,WAAWC,eAAe;QAGpCG,cAAc,yBACb,oBAACb;QACC+B,SAAS;QACTQ,YAAYf,aAAa3B,SAASyC,GAAG,GAAG,YAAY;QACpDE,MAAK;OAEJZ,uBAED,oBAACC;QAAIE,SAAS;qBACZ,oBAACxC;QAAcwC,SAAS;yBAI5B,oBAACF;QAAIE,SAAS;OACXH,SAEAf,cAAc,2BACb,oBAACgB;QAAIE,SAAS;qBACZ,oBAACjC;QACC2C,cAAYpB;QACZU,SAAS;QACTW,SAAStB;QACTuB,WAAU;QACVC,WAAW;OAEVpB,aAAa3B,SAASyC,GAAG,iBAAG,oBAACX,sCAAoB,oBAACrC;AAQnE,EAAE"}

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

@@ -1,3 +1,3 @@
 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) => React.JSX.Element;
+export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;

package/dist/components/BaseGallery/BaseGallery.js

@@ -9,6 +9,7 @@ import { useExternRef } from "../../hooks/useExternRef";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { useDOM } from "../../lib/dom";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { ScrollArrow } from "../ScrollArrow/ScrollArrow";
 import { Touch } from "../Touch/Touch";
 import { calcMax, calcMin } from "./helpers";
@@ -29,8 +30,12 @@ var SHIFT_DEFAULT_STATE = {
     deltaX: 0,
     indent: 0
 };
+var stylesBullets = {
+    dark: "vkuiBaseGallery__bullets--dark",
+    light: "vkuiBaseGallery__bullets--light"
+};
 export var BaseGallery = function(_param) {
-    var _param_bullets = _param.bullets, bullets = _param_bullets === void 0 ? false : _param_bullets, getRootRef = _param.getRootRef, children = _param.children, _param_slideWidth = _param.slideWidth, slideWidth = _param_slideWidth === void 0 ? "100%" : _param_slideWidth, _param_slideIndex = _param.slideIndex, slideIndex = _param_slideIndex === void 0 ? 0 : _param_slideIndex, tmp = _param.isDraggable, isDraggableProp = tmp === void 0 ? true : tmp, onDragStart = _param.onDragStart, onDragEnd = _param.onDragEnd, onChange = _param.onChange, onPrevClick = _param.onPrevClick, onNextClick = _param.onNextClick, _param_align = _param.align, align = _param_align === void 0 ? "left" : _param_align, showArrows = _param.showArrows, getRef = _param.getRef, className = _param.className, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, restProps = _object_without_properties(_param, [
+    var _param_bullets = _param.bullets, bullets = _param_bullets === void 0 ? false : _param_bullets, getRootRef = _param.getRootRef, children = _param.children, _param_slideWidth = _param.slideWidth, slideWidth = _param_slideWidth === void 0 ? "100%" : _param_slideWidth, _param_slideIndex = _param.slideIndex, slideIndex = _param_slideIndex === void 0 ? 0 : _param_slideIndex, tmp = _param.isDraggable, isDraggableProp = tmp === void 0 ? true : tmp, onDragStart = _param.onDragStart, onDragEnd = _param.onDragEnd, onChange = _param.onChange, onPrevClick = _param.onPrevClick, onNextClick = _param.onNextClick, _param_align = _param.align, align = _param_align === void 0 ? "left" : _param_align, showArrows = _param.showArrows, getRef = _param.getRef, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, restProps = _object_without_properties(_param, [
         "bullets",
         "getRootRef",
         "children",
@@ -45,7 +50,6 @@ export var BaseGallery = function(_param) {
         "align",
         "showArrows",
         "getRef",
-        "className",
         "arrowSize"
     ]);
     var slidesStore = React.useRef({});
@@ -277,9 +281,9 @@ export var BaseGallery = function(_param) {
     (align === "left" && layoutState.current.containerWidth - shiftState.shiftX < ((_layoutState_current_layerWidth = layoutState.current.layerWidth) !== null && _layoutState_current_layerWidth !== void 0 ? _layoutState_current_layerWidth : 0) || // otherwise we need to check current slide index (align = right or align = center)
     align !== "left" && slideIndex < layoutState.current.slides.length - 1);
     var isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiBaseGallery", align === "center" && "vkuiBaseGallery--align-center", slideWidth === "custom" && "vkuiBaseGallery--custom-width", isDraggable && "vkuiBaseGallery--draggable", className),
-        ref: rootRef
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiBaseGallery", align === "center" && "vkuiBaseGallery--align-center", slideWidth === "custom" && "vkuiBaseGallery--custom-width", isDraggable && "vkuiBaseGallery--draggable"),
+        getRootRef: rootRef
     }), /*#__PURE__*/ React.createElement(Touch, {
         className: "vkuiBaseGallery__viewport",
         onStartX: onStart,
@@ -303,10 +307,7 @@ export var BaseGallery = function(_param) {
         }, item);
     }))), bullets && /*#__PURE__*/ React.createElement("div", {
         "aria-hidden": true,
-        className: classNames("vkuiBaseGallery__bullets", {
-            dark: "vkuiBaseGallery__bullets--dark",
-            light: "vkuiBaseGallery__bullets--light"
-        }[bullets])
+        className: classNames("vkuiBaseGallery__bullets", stylesBullets[bullets])
     }, React.Children.map(children, function(_item, index) {
         return /*#__PURE__*/ React.createElement("div", {
             className: classNames("vkuiBaseGallery__bullet", index === slideIndex && "vkuiBaseGallery__bullet--active"),

package/dist/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 { 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","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","isDraggableProp","isDraggable","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","className","arrowSize","restProps","slidesStore","useRef","layoutState","useState","shiftState","setShiftState","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,WAAW,QAAQ,6BAA6B;AACzD,SAASC,KAAK,QAAoB,iBAAiB;AACnD,SAASC,OAAO,EAAEC,OAAO,QAAQ,YAAY;AAI7C,IAAMC,qBAAqB;AAE3B,IAAMC,uBAAuB;IAC3BC,gBAAgB;IAChBC,qBAAqB;IACrBC,YAAY;IACZC,KAAK;IACLC,KAAK;IACLC,QAAQ,EAAE;IACVC,gBAAgB;AAClB;AAEA,IAAMC,sBAAsB;IAC1BC,WAAWC;IACXC,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC,QAAQ;AACV;AAEA,OAAO,IAAMC,cAAc;gCACzBC,SAAAA,sCAAU,wBACVC,oBAAAA,YACAC,kBAAAA,qCACAC,YAAAA,4CAAa,uDACbC,YAAAA,4CAAa,uBACAC,aAAbC,aAAaD,kBAAAA,iBAAkB,OAAlBA,KACbE,qBAAAA,aACAC,mBAAAA,WACAC,kBAAAA,UACAC,qBAAAA,aACAC,qBAAAA,mCACAC,OAAAA,kCAAQ,uBACRC,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,qCACAC,WAAAA,0CAAY,wBACTC;QAhBHjB;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,cAAc9C,MAAM+C,MAAM,CAAwC,CAAC;IACzE,IAAMC,cAAchD,MAAM+C,MAAM,CAAcnC;IAC9C,IAAoCZ,mCAAAA,MAAMiD,QAAQ,CAAgB7B,0BAA3D8B,aAA6BlD,oBAAjBmD,gBAAiBnD;IAEpC,IAAMoD,UAAUjD,aAAa0B;IAC7B,IAAMwB,cAAclD,aAAauC;IAEjC,IAAM,AAAEY,SAAWjD,SAAXiD;IACR,IAAMC,aAAarD;IAEnB,IAAMsD,0BAA0BzB,eAAe,YAAYS,UAAU;IAErE,IAAMiB,iBAAiB,SAACC;YACLV;QAAjB,IAAMW,WAAWX,CAAAA,2BAAAA,YAAYY,OAAO,CAAC3C,GAAG,cAAvB+B,sCAAAA,2BAA2B;YAC3BA;QAAjB,IAAMa,WAAWb,CAAAA,2BAAAA,YAAYY,OAAO,CAAC5C,GAAG,cAAvBgC,sCAAAA,2BAA2B;QAE5C,IAAIU,QAAQG,UAAU;YACpB,OAAOA;QACT,OAAO,IAAIH,QAAQC,UAAU;YAC3B,OAAOA;QACT;QAEA,OAAOD;IACT;IAEA;;GAEC,GACD,IAAMI,kBAAkB,SAACC;YAKHf;QAJpB,IAAIA,YAAYY,OAAO,CAACzC,cAAc,EAAE;YACtC,OAAO;QACT;QAEA,IAAM6C,cAAchB,EAAAA,8BAAAA,YAAYY,OAAO,CAAC1C,MAAM,cAA1B8B,kDAAAA,4BAA4BiB,MAAM,IAClDjB,YAAYY,OAAO,CAAC1C,MAAM,CAAC6C,YAAY,GACvC;QAEJ,IAAIC,aAAa;YACf,IAAQE,SAAkBF,YAAlBE,QAAQC,QAAUH,YAAVG;YAEhB,IAAIX,yBAAyB;oBACLR;gBAAtB,IAAMoB,gBAAgBpB,CAAAA,2CAAAA,YAAYY,OAAO,CAAC9C,mBAAmB,cAAvCkC,sDAAAA,2CAA2C;gBACjE,OAAOoB,gBAAgB,IAAIF,SAASC,QAAQ;YAC9C;YAEA,OAAOV,eAAe,CAAC,IAAIS;QAC7B;QAEA,OAAO;IACT;IAEA;;GAEC,GACD,IAAMG,sBAAsB;YACTrB;QAAjB,IAAMW,WAAWX,CAAAA,2BAAAA,YAAYY,OAAO,CAAC3C,GAAG,cAAvB+B,sCAAAA,2BAA2B;YAC3BA;QAAjB,IAAMa,WAAWb,CAAAA,2BAAAA,YAAYY,OAAO,CAAC5C,GAAG,cAAvBgC,sCAAAA,2BAA2B;QAC5C,IAAMtB,SAASwB,WAAW3B,MAAM,GAAG2B,WAAWzB,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;QAEA,OAAOnC;IACT;IAEA,IAAM6C,mBAAmB;YAACC,2EAAmC,CAAC;YAUhCpB,kBACKC,sBAO/BL,wCAAmDyB;YAhBnDzE;QADF,IAAMyE,cACJzE,CAAAA,sBAAAA,MAAM0E,QAAQ,CAACC,GAAG,CAAC7C,UAAU,SAAC8C,OAAwBC;gBAG1CC,OACDA;YAHT,IAAMA,OAAOhC,YAAYc,OAAO,CAAC,AAAC,SAAU,OAAFiB,GAAI;gBAEpCC,kBACDA;YAFT,OAAO;gBACLZ,QAAQY,CAAAA,oBAAAA,QAAAA,kBAAAA,4BAAAA,MAAMC,UAAU,cAAhBD,8BAAAA,mBAAoB;gBAC5BX,OAAOW,CAAAA,qBAAAA,SAAAA,kBAAAA,6BAAAA,OAAME,WAAW,cAAjBF,+BAAAA,oBAAqB;YAC9B;QACF,gBANA9E,iCAAAA,sBAMM,EAAE;YAEkBoD;QAA5B,IAAM6B,sBAAsB7B,CAAAA,gCAAAA,mBAAAA,QAAQQ,OAAO,cAAfR,uCAAAA,iBAAiB4B,WAAW,cAA5B5B,0CAAAA,+BAAgC;YAC3BC;QAAjC,IAAM6B,2BAA2B7B,CAAAA,oCAAAA,uBAAAA,YAAYO,OAAO,cAAnBP,2CAAAA,qBAAqB2B,WAAW,cAAhC3B,8CAAAA,mCAAoC;QACrE,IAAM8B,kBAAkBV,YAAYW,MAAM,CACxC,SAACC,KAAaC;mBAA8BA,MAAMnB,KAAK,GAAGkB;WAC1D;QAEF,IAAME,eACJd,YAAYR,MAAM,IAAIjB,YAAYY,OAAO,CAAC1C,MAAM,CAAC+C,MAAM,IACvDjB,EAAAA,yCAAAA,YAAYY,OAAO,CAAC1C,MAAM,CAACc,WAAW,cAAtCgB,6DAAAA,uCAAwCkB,MAAM,QAAKO,0BAAAA,WAAW,CAACzC,WAAW,cAAvByC,8CAAAA,wBAAyBP,MAAM;QAEpFlB,YAAYY,OAAO,GAAG;YACpB/C,gBAAgBoE;YAChBnE,qBAAqBoE;YACrBnE,YAAYoE;YACZlE,KAAKR,QAAQ;gBACXS,QAAQuD;gBACR3D,qBAAqBoE;gBACrB1B,yBAAAA;YACF;YACAxC,KAAKN,QAAQ;gBACXG,gBAAgBoE;gBAChBlE,YAAYoE;gBACZjE,QAAQuD;gBACR3D,qBAAqBoE;gBACrB1B,yBAAAA;gBACAhB,OAAAA;YACF;YACAtB,QAAQuD;YACRtD,gBAAgBgE,mBAAmBF;QACrC;YAKaT;QAHbrB,cAAc,SAACqC;mBAAe,wCACzBA;gBACHjE,QAAQgE,eAAezB,gBAAgB9B,cAAcwD,UAAUjE,MAAM;gBACrEF,WAAWmD,CAAAA,qBAAAA,QAAQnD,SAAS,cAAjBmD,gCAAAA,qBAAqBgB,UAAUjE,MAAM,KAAKkC,eAAe+B,UAAUjE,MAAM;;;IAExF;IAEA,IAAMkE,WAAW;QACf,IAAIvC,WAAW7B,SAAS,KAAKC,WAAW;YACtCiD,iBAAiB;gBAAElD,WAAW;YAAM;QACtC;IACF;IAEAjB,uBAAuBkD,QAAQ,UAAUmC;IAEzCnF,0BAA0B;QACxBiE,iBAAiB;YAAElD,WAAW;QAAM;IACtC,GAAG;QAACS;QAAUU;QAAOT;KAAW;IAEhCzB,0BAA0B;QACxB,IAAI4C,WAAW7B,SAAS,KAAKC,WAAW;YACtC6B,cAAc,SAACqC;uBAAe,wCACzBA;oBACHnE,WAAW;oBACXI,QAAQ;oBACRF,QAAQuC,gBAAgB9B,uBAAAA,wBAAAA,aAAc;;;QAE1C;IACF,GAAG;QAACA;KAAW;IAEf,IAAM0D,YAAY,SAACC;YACjBtD,WACAC;SADAD,YAAAA,sBAAAA,gCAAAA,UAAWL,aAAa;SACxBM,eAAAA,yBAAAA,mCAAAA,aAAcqD;IAChB;IAEA,IAAMC,aAAa,SAACD;YAClBtD,WACAE;SADAF,YAAAA,sBAAAA,gCAAAA,UAAWL,aAAa;SACxBO,eAAAA,yBAAAA,mCAAAA,aAAcoD;IAChB;IAEA;;GAEC,GACD,IAAME,YAAY,SAACC;QACjB,IAAMC,eAAe,AAAC7C,WAAWzB,MAAM,GAAGqE,EAAEE,QAAQ,GAAI,MAAM;YAEJhD;QAD1D,IAAMiD,QACJ/C,WAAW3B,MAAM,GAAG2B,WAAWzB,MAAM,GAAGsE,eAAgB/C,CAAAA,CAAAA,2BAAAA,YAAYY,OAAO,CAAC3C,GAAG,cAAvB+B,sCAAAA,2BAA2B,CAAA;QACrF,IAAMkD,YAAYhD,WAAWzB,MAAM,GAAG,IAAI,IAAI,CAAC;QAE/C,sDAAsD;QACtD,IAAIsC,cAAcf,YAAYY,OAAO,CAAC1C,MAAM,CAACkE,MAAM,CACjD,SAACC,KAAac,MAA0BC;YACtC,IAAMC,gBAAgBC,KAAKC,GAAG,CAACvD,YAAYY,OAAO,CAAC1C,MAAM,CAACmE,IAAI,CAACnB,MAAM,GAAG+B;YACxE,IAAMO,eAAeF,KAAKC,GAAG,CAACJ,KAAKjC,MAAM,GAAG+B;YAE5C,OAAOI,gBAAgBG,eAAenB,MAAMe;QAC9C,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,CAACrD,WAAWzB,MAAM,IAAIuB,YAAYY,OAAO,CAAC1C,MAAM,CAAC8C,YAAY,CAACG,KAAK,GAAG,MAAM;oBACtFJ,cAAcC;gBAChB;YACF;QACF;QAEA,OAAOD;IACT;IAEA,IAAM0C,UAAU,SAACX;YACf3D;SAAAA,eAAAA,yBAAAA,mCAAAA,aAAc2D;QACd3C,cAAc,SAACqC;mBAAe,wCAAKA;gBAAWnE,WAAW;;;IAC3D;IAEA,IAAMqF,UAAU,SAACZ;QACf,IAAI7D,mBAAmB,CAACe,YAAYY,OAAO,CAACzC,cAAc,EAAE;YAC1D2E,EAAEa,aAAa,CAACC,cAAc;YAE9B,IAAId,EAAEe,QAAQ,EAAE;gBACd,IAAI3D,WAAWzB,MAAM,KAAKqE,EAAEvE,MAAM,EAAE;oBAClC4B,cAAc,SAACqC;+BAAe,wCACzBA;4BACH/D,QAAQqE,EAAEvE,MAAM;4BAChBC,UAAUsE,EAAEe,QAAQ;;;gBAExB;YACF;QACF;IACF;IAEA,IAAMC,QAAQ,SAAChB;YAEb1D;QADA,IAAM2B,cAAc+B,EAAEiB,OAAO,GAAGlB,UAAUC,KAAK9D,uBAAAA,wBAAAA,aAAc;SAC7DI,aAAAA,uBAAAA,iCAAAA,WAAY0D,GAAG/B;QAEf,IAAMiD,iBAAyC;YAC7C3F,WAAW;YACXG,UAAU;YACVC,QAAQ;QACV;QAEA,IAAMwF,cAAc5C;QACpB,IAAIN,gBAAgB/B,YAAY;YAC9B,6FAA6F;YAC7FgF,eAAezF,MAAM,GAAG0F;QAC1B;QAEA9D,cAAc,SAACqC;mBAAe,mBAAKA,WAAcwB;;QACjD,IAAIjD,gBAAgB/B,YAAY;gBAC9BK;aAAAA,YAAAA,sBAAAA,gCAAAA,UAAW0B;QACb;IACF;IAEA,IAAMrC,SAASwB,WAAW1B,QAAQ,GAAG6C,wBAAwBnB,WAAW3B,MAAM;IAE9E,IAAM2F,aAAa;QACjBC,iBAAiB,AAAC,cAAoB,OAAPzF,QAAO;QACtC0F,WAAW,AAAC,cAAoB,OAAP1F,QAAO;QAChC2F,kBAAkBnE,WAAW7B,SAAS,GAClC,AAAC,qBAAuC,OAAnBV,oBAAmB,mCACxC;QACJ2G,YAAYpE,WAAW7B,SAAS,GAC5B,AAAC,aAA+B,OAAnBV,oBAAmB,mCAChC;IACN;IAEA,IAAM4G,cAAc,SAACC,UAAiCxF;QACpDc,YAAYc,OAAO,CAAC,AAAC,SAAmB,OAAX5B,YAAa,GAAGwF;IAC/C;IAEA,sEAAsE;IACtE,IAAMC,eAAe,CAACzE,YAAYY,OAAO,CAACzC,cAAc,IAAI+B,WAAW3B,MAAM,GAAG;QAOzEyB;IALP,IAAM0E,gBACJ,CAAC1E,YAAYY,OAAO,CAACzC,cAAc,IACnC,+FAA+F;IAC9F,CAAA,AAACqB,UAAU,UACVQ,YAAYY,OAAO,CAAC/C,cAAc,GAAGqC,WAAW3B,MAAM,GACnDyB,CAAAA,CAAAA,kCAAAA,YAAYY,OAAO,CAAC7C,UAAU,cAA9BiC,6CAAAA,kCAAkC,CAAA,KACrC,mFAAmF;IAClFR,UAAU,UAAUR,aAAagB,YAAYY,OAAO,CAAC1C,MAAM,CAAC+C,MAAM,GAAG,CAAC;IAE3E,IAAM/B,cAAcD,mBAAmB,CAACe,YAAYY,OAAO,CAACzC,cAAc;IAE1E,qBACE,oBAACwG,+CACK9E;QACJF,WAAW1C,8BAETuC,UAAU,6CACVT,eAAe,6CACfG,6CACAS;QAEFiF,KAAKxE;sBAEL,oBAAC5C;QACCmC,SAAS;QACTkF,UAAUpB;QACVC,SAASA;QACTI,OAAOA;QACPgB,OAAO;YAAE3D,OAAOpC,eAAe,WAAW,SAASA;QAAW;QAC9DF,YAAYwB;QACZ0E,cAAAA;qBAEA,oBAACJ;QAAIhF,SAAS;QAAgCmF,OAAOZ;OAClDlH,MAAM0E,QAAQ,CAACC,GAAG,CAAC7C,UAAU,SAACqE,MAAuBtB;6BACpD,oBAAC8C;YACChF,SAAS;YACTqF,KAAK,AAAC,SAAU,OAAFnD;YACd+C,KAAK,SAACK;uBAAOV,YAAYU,IAAIpD;;WAE5BsB;UAMRvE,yBACC,oBAAC+F;QACCO,eAAAA;QACAvF,WAAW1C,uCAET;YACEkI,IAAI;YACJC,KAAK;QACP,CAAC,CAACxG,QAAQ;OAGX5B,MAAM0E,QAAQ,CAACC,GAAG,CAAC7C,UAAU,SAAC8C,OAAwBwB;6BACrD,oBAACuB;YACChF,WAAW1C,sCAETmG,UAAUpE;YAEZgG,KAAK5B;;SAMZ3D,cAAcc,cAAckE,8BAC3B,oBAAClH;QACCoC,SAAS;QACTuD,WAAU;QACVmC,SAAS3C;QACT4C,MAAM1F;QAGTH,cAAcc,cAAcmE,+BAC3B,oBAACnH;QACCoC,SAAS;QACTuD,WAAU;QACVmC,SAASzC;QACT0C,MAAM1F;;AAKhB,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 { RootComponent } from '../RootComponent/RootComponent';\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\nconst stylesBullets = {\n  dark: styles['BaseGallery__bullets--dark'],\n  light: styles['BaseGallery__bullets--light'],\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  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    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n      )}\n      getRootRef={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(styles['BaseGallery__bullets'], stylesBullets[bullets])}\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    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","Touch","calcMax","calcMin","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","stylesBullets","dark","light","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","isDraggableProp","isDraggable","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","useRef","layoutState","useState","shiftState","setShiftState","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","baseClassName","className","onStartX","style","noSlideClick","div","key","ref","el","aria-hidden","onClick","size"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasAlign, HasRef, HasRootRef } from '../../types';
+import { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';
 import { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
 import { TouchEvent, TouchEventHandler } from '../Touch/Touch';
 export interface GallerySlidesState {
@@ -21,7 +21,7 @@ export interface LayoutState {
     slides: GallerySlidesState[];
     isFullyVisible: boolean;
 }
-export interface BaseGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>, HasAlign, HasRootRef<HTMLDivElement>, HasRef<HTMLElement> {
+export interface BaseGalleryProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>, HasAlign, HasRef<HTMLElement> {
     slideWidth?: string | number;
     slideIndex?: number;
     onDragStart?: TouchEventHandler;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/BaseGallery/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport { TouchEvent, TouchEventHandler } from '../Touch/Touch';\n\nexport interface GallerySlidesState {\n  coordX: number;\n  width: number;\n}\n\nexport interface ShiftingState {\n  deltaX: number;\n  shiftX: number;\n  animation?: boolean;\n  dragging: boolean;\n}\n\nexport interface LayoutState {\n  containerWidth: number;\n  viewportOffsetWidth: number;\n  layerWidth: number;\n  min?: number;\n  max: number;\n  slides: GallerySlidesState[];\n  isFullyVisible: boolean;\n}\n\nexport interface BaseGalleryProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>,\n    HasAlign,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLElement> {\n  slideWidth?: string | number;\n  slideIndex?: number;\n  onDragStart?: TouchEventHandler;\n  onDragEnd?(e: TouchEvent, targetIndex: number): void;\n  onChange?(current: number): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку влево\n   */\n  onPrevClick?(event: React.MouseEvent): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку вправо\n   */\n  onNextClick?(event: React.MouseEvent): void;\n  bullets?: 'dark' | 'light' | false;\n  isDraggable?: boolean;\n  showArrows?: boolean;\n  hasPointer?: boolean;\n  arrowSize?: ScrollArrowProps['size'];\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../../../src/components/BaseGallery/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport { TouchEvent, TouchEventHandler } from '../Touch/Touch';\n\nexport interface GallerySlidesState {\n  coordX: number;\n  width: number;\n}\n\nexport interface ShiftingState {\n  deltaX: number;\n  shiftX: number;\n  animation?: boolean;\n  dragging: boolean;\n}\n\nexport interface LayoutState {\n  containerWidth: number;\n  viewportOffsetWidth: number;\n  layerWidth: number;\n  min?: number;\n  max: number;\n  slides: GallerySlidesState[];\n  isFullyVisible: boolean;\n}\n\nexport interface BaseGalleryProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>,\n    HasAlign,\n    HasRef<HTMLElement> {\n  slideWidth?: string | number;\n  slideIndex?: number;\n  onDragStart?: TouchEventHandler;\n  onDragEnd?(e: TouchEvent, targetIndex: number): void;\n  onChange?(current: number): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку влево\n   */\n  onPrevClick?(event: React.MouseEvent): void;\n  /**\n   * Будет вызвано при клике на кнопку-стрелку вправо\n   */\n  onNextClick?(event: React.MouseEvent): void;\n  bullets?: 'dark' | 'light' | false;\n  isDraggable?: boolean;\n  showArrows?: boolean;\n  hasPointer?: boolean;\n  arrowSize?: ScrollArrowProps['size'];\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/dist/components/Button/Button.d.ts

@@ -11,10 +11,11 @@ export interface VKUIButtonProps extends HasAlign {
     after?: React.ReactNode;
     loading?: boolean;
     disableSpinnerAnimation?: boolean;
+    rounded?: boolean;
 }
 export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
  */
-export declare const Button: ({ size, mode, appearance, stretched, align, children, before, after, getRootRef, loading, onClick, stopPropagation, className, disableSpinnerAnimation, ...restProps }: ButtonProps) => React.JSX.Element;
+export declare const Button: ({ size, mode, appearance, stretched, align, children, before, after, getRootRef, loading, onClick, stopPropagation, className, disableSpinnerAnimation, rounded, ...restProps }: ButtonProps) => React.JSX.Element;