@vkontakte/vkui 7.0.0 → 7.1.0

package/dist/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -23,9 +23,17 @@ export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDiv
      * По умолчанию прокручивается как любой горизонтальный контент через shift.
      */
     scrollOnAnyWheel?: boolean;
+    /**
+     * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента
+     */
+    prevButtonTestId?: string;
+    /**
+     * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента
+     */
+    nextButtonTestId?: string;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => React.ReactNode;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, prevButtonTestId, nextButtonTestId, ...restProps }: HorizontalScrollProps) => React.ReactNode;
 //# sourceMappingURL=HorizontalScroll.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAmBhF,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAsGD;;GAEG;AACH,eAAO,MAAM,gBAAgB,0JAW1B,qBAAqB,KAAG,KAAK,CAAC,SA2IhC,CAAC"}
+{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAmBhF,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAsGD;;GAEG;AACH,eAAO,MAAM,gBAAgB,8LAa1B,qBAAqB,KAAG,KAAK,CAAC,SA2IhC,CAAC"}

package/dist/components/HorizontalScroll/HorizontalScroll.js

@@ -80,7 +80,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */ export const HorizontalScroll = (_param)=>{
-    var { children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false } = _param, restProps = _object_without_properties(_param, [
+    var { children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId } = _param, restProps = _object_without_properties(_param, [
         "children",
         "getScrollToLeft",
         "getScrollToRight",
@@ -89,7 +89,9 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         "arrowOffsetY",
         "scrollAnimationDuration",
         "getRef",
-        "scrollOnAnyWheel"
+        "scrollOnAnyWheel",
+        "prevButtonTestId",
+        "nextButtonTestId"
     ]);
     const [canScrollLeft, setCanScrollLeft] = React.useState(false);
     const [canScrollRight, setCanScrollRight] = React.useState(false);
@@ -188,7 +190,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         onMouseEnter: calculateArrowsVisibility,
         children: [
             showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ _jsx(ScrollArrow, {
-                "data-testid": process.env.NODE_ENV === 'test' ? 'ScrollArrowLeft' : undefined,
+                "data-testid": prevButtonTestId,
                 size: arrowSize,
                 offsetY: arrowOffsetY,
                 direction: "left",
@@ -199,7 +201,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
                 onWheel: onArrowWheel
             }),
             showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ _jsx(ScrollArrow, {
-                "data-testid": process.env.NODE_ENV === 'test' ? 'ScrollArrowRight' : undefined,
+                "data-testid": nextButtonTestId,
                 size: arrowSize,
                 offsetY: arrowOffsetY,
                 direction: "right",

package/dist/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToEndBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n  textDirection: 'ltr' | 'rtl';\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: ScrollArrowProps['size'];\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n  return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToEndBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration,\n  textDirection,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * крайнее значение сдвига\n   */\n  const extremeScrollLeft =\n    (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n  let startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  let endScrollLeft = getScrollPosition(startScrollLeft);\n\n  onScrollStart();\n\n  /**\n   * Если окончание прокрутки вышло за ноль\n   */\n  if (startScrollLeft * endScrollLeft < 0) {\n    endScrollLeft = 0;\n  }\n\n  if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n    onScrollToEndBorder();\n    endScrollLeft = extremeScrollLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n    scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n    const scrollEnd =\n      textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n    if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'm',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n  const [directionRef, textDirection] = useDirection<HTMLDivElement>();\n  const direction = textDirection || 'ltr';\n  const setCanScrollStart = direction === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n  const setCanScrollEnd = direction === 'ltr' ? setCanScrollRight : setCanScrollLeft;\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef, directionRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToEndBorder: () => setCanScrollEnd(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n          textDirection: direction,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollStart(scrollElement.scrollLeft !== 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  const _onWheel = React.useCallback(\n    (e: React.WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n    },\n    [scrollerRef],\n  );\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onScrollWheel = React.useCallback(\n    (e: React.WheelEvent) => {\n      _onWheel(e);\n      e.preventDefault();\n    },\n    [_onWheel],\n  );\n\n  const onArrowWheel = React.useCallback(\n    (e: React.WheelEvent) => {\n      if (e.deltaX || (e.deltaY && scrollOnAnyWheel)) {\n        _onWheel(e);\n      }\n    },\n    [_onWheel, scrollOnAnyWheel],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles.withConstArrows,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrowLeft' : undefined}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowLeft)}\n          onClick={scrollToLeft}\n          onWheel={onArrowWheel}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrowRight' : undefined}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowRight)}\n          onClick={scrollToRight}\n          onWheel={onArrowWheel}\n        />\n      )}\n      <div\n        className={styles.in}\n        ref={scrollerRef}\n        onScroll={calculateArrowsVisibility}\n        onWheel={scrollOnAnyWheel ? onScrollWheel : undefined}\n      >\n        <div className={styles.inWrapper}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useDirection","useExternRef","easeInOutSine","RootComponent","ScrollArrow","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","endScrollLeft","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","directionRef","direction","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","useEffect","_onWheel","e","scrollBy","left","deltaX","deltaY","behavior","onScrollWheel","preventDefault","onArrowWheel","baseClassName","onMouseEnter","undefined","data-testid","process","env","NODE_ENV","size","offsetY","aria-hidden","tabIndex","className","onClick","onWheel","div","ref","onScroll"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToEndBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n  textDirection: 'ltr' | 'rtl';\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: ScrollArrowProps['size'];\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента\n   */\n  prevButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента\n   */\n  nextButtonTestId?: string;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n  return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToEndBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration,\n  textDirection,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * крайнее значение сдвига\n   */\n  const extremeScrollLeft =\n    (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n  let startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  let endScrollLeft = getScrollPosition(startScrollLeft);\n\n  onScrollStart();\n\n  /**\n   * Если окончание прокрутки вышло за ноль\n   */\n  if (startScrollLeft * endScrollLeft < 0) {\n    endScrollLeft = 0;\n  }\n\n  if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n    onScrollToEndBorder();\n    endScrollLeft = extremeScrollLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n    scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n    const scrollEnd =\n      textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n    if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'm',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  prevButtonTestId,\n  nextButtonTestId,\n  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n  const [directionRef, textDirection] = useDirection<HTMLDivElement>();\n  const direction = textDirection || 'ltr';\n  const setCanScrollStart = direction === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n  const setCanScrollEnd = direction === 'ltr' ? setCanScrollRight : setCanScrollLeft;\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef, directionRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToEndBorder: () => setCanScrollEnd(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n          textDirection: direction,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollStart(scrollElement.scrollLeft !== 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  const _onWheel = React.useCallback(\n    (e: React.WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n    },\n    [scrollerRef],\n  );\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onScrollWheel = React.useCallback(\n    (e: React.WheelEvent) => {\n      _onWheel(e);\n      e.preventDefault();\n    },\n    [_onWheel],\n  );\n\n  const onArrowWheel = React.useCallback(\n    (e: React.WheelEvent) => {\n      if (e.deltaX || (e.deltaY && scrollOnAnyWheel)) {\n        _onWheel(e);\n      }\n    },\n    [_onWheel, scrollOnAnyWheel],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles.withConstArrows,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          data-testid={prevButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowLeft)}\n          onClick={scrollToLeft}\n          onWheel={onArrowWheel}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          data-testid={nextButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowRight)}\n          onClick={scrollToRight}\n          onWheel={onArrowWheel}\n        />\n      )}\n      <div\n        className={styles.in}\n        ref={scrollerRef}\n        onScroll={calculateArrowsVisibility}\n        onWheel={scrollOnAnyWheel ? onScrollWheel : undefined}\n      >\n        <div className={styles.inWrapper}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useDirection","useExternRef","easeInOutSine","RootComponent","ScrollArrow","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","endScrollLeft","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","directionRef","direction","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","useEffect","_onWheel","e","scrollBy","left","deltaX","deltaY","behavior","onScrollWheel","preventDefault","onArrowWheel","baseClassName","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","onWheel","div","ref","onScroll"],"mappings":"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"}

package/dist/components/Image/Image.d.ts

@@ -30,5 +30,6 @@ export interface ImageProps extends Omit<ImageBaseProps, 'badge'> {
 export declare const Image: React.FC<ImageProps> & {
     Badge: typeof ImageBadge;
     Overlay: typeof ImageBase.Overlay;
+    FloatElement: typeof ImageBase.FloatElement;
 };
 //# sourceMappingURL=Image.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAI5E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC/B;;OAEG;IACH,sBAAsB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACzC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACtC;AAqED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,OAAO,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;CA2DnC,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAI5E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC/B;;OAEG;IACH,sBAAsB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACzC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACtC;AAqED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,OAAO,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,SAAS,CAAC,YAAY,CAAC;CA2D7C,CAAC"}

package/dist/components/Image/Image.js

@@ -110,5 +110,7 @@ Image.Badge = ImageBadge;
 Image.Badge.displayName = 'Image.Badge';
 Image.Overlay = ImageBase.Overlay;
 Image.Overlay.displayName = 'Image.Overlay';
+Image.FloatElement = ImageBase.FloatElement;
+Image.FloatElement.displayName = 'Image.FloatElement';
 
 //# sourceMappingURL=Image.js.map

package/dist/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { type CSSCustomProperties } from '../../types';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nconst IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами начала блока и строки\n   */\n  borderStartStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной начала блока и стороной конца строки\n   */\n  borderStartEndRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной конца блока и стороной начала строки\n   */\n  borderEndStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами конца блока и строки\n   */\n  borderEndEndRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\nconst getBorderRadiusBySizeInPx = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: ImageProps['borderRadius'],\n) => {\n  if (!borderRadius) {\n    return undefined;\n  }\n\n  return `${getBorderRadiusBySize(size, borderRadius)}px`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image: React.FC<ImageProps> & {\n  Badge: typeof ImageBadge;\n  Overlay: typeof ImageBase.Overlay;\n} = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius = 'm',\n  borderStartStartRadius,\n  borderStartEndRadius,\n  borderEndStartRadius,\n  borderEndEndRadius,\n  style,\n  className,\n  objectFit = 'cover',\n  ...restProps\n}: ImageProps) => {\n  const borderStyles: CSSCustomProperties<string | undefined> = React.useMemo(\n    () => ({\n      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),\n      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartStartRadius,\n      ),\n      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartEndRadius,\n      ),\n      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndStartRadius,\n      ),\n      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndEndRadius,\n      ),\n    }),\n    [\n      borderRadius,\n      borderStartStartRadius,\n      borderStartEndRadius,\n      borderEndStartRadius,\n      borderEndEndRadius,\n      size,\n    ],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      objectFit={objectFit}\n      size={size}\n      style={mergeStyle(borderStyles, style)}\n      className={classNames(\n        className,\n        styles.host,\n        borderStartStartRadius && styles.borderStartStartRadius,\n        borderStartEndRadius && styles.borderStartEndRadius,\n        borderEndStartRadius && styles.borderEndStartRadius,\n        borderEndEndRadius && styles.borderEndEndRadius,\n      )}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n"],"names":["React","classNames","mergeStyle","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","displayName","Badge","Overlay"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAK3E,MAAMC,qBAAqB;AAyB3B,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA,MAAME,4BAA4B,CAChCF,MACAC;IAEA,IAAI,CAACA,cAAc;QACjB,OAAOE;IACT;IAEA,OAAO,GAAGJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAGT;QAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EAER,WADRC;QATHZ;QACAC;QACAI;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAwDpB,MAAMqB,OAAO,CACzE,IAAO,CAAA;YACL,wCAAwCZ,0BAA0BF,MAAMC;YACxE,oDAAoDC,0BAClDF,MACAK;YAEF,kDAAkDH,0BAChDF,MACAM;YAEF,kDAAkDJ,0BAChDF,MACAO;YAEF,gDAAgDL,0BAC9CF,MACAQ;QAEJ,CAAA,GACA;QACEP;QACAI;QACAC;QACAC;QACAC;QACAR;KACD;IAGH,qBACE,KAACJ,mDACKgB;QACJD,WAAWA;QACXX,MAAMA;QACNS,OAAOd,WAAWkB,cAAcJ;QAChCC,WAAWhB,WACTgB,8BAEAL,+DACAC,2DACAC,2DACAC;;AAIR,EAAE;AAEFJ,MAAMW,WAAW,GAAG;AAEpBX,MAAMY,KAAK,GAAGnB;AACdO,MAAMY,KAAK,CAACD,WAAW,GAAG;AAE1BX,MAAMa,OAAO,GAAGrB,UAAUqB,OAAO;AACjCb,MAAMa,OAAO,CAACF,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { type CSSCustomProperties } from '../../types';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nconst IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами начала блока и строки\n   */\n  borderStartStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной начала блока и стороной конца строки\n   */\n  borderStartEndRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной конца блока и стороной начала строки\n   */\n  borderEndStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами конца блока и строки\n   */\n  borderEndEndRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\nconst getBorderRadiusBySizeInPx = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: ImageProps['borderRadius'],\n) => {\n  if (!borderRadius) {\n    return undefined;\n  }\n\n  return `${getBorderRadiusBySize(size, borderRadius)}px`;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image: React.FC<ImageProps> & {\n  Badge: typeof ImageBadge;\n  Overlay: typeof ImageBase.Overlay;\n  FloatElement: typeof ImageBase.FloatElement;\n} = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius = 'm',\n  borderStartStartRadius,\n  borderStartEndRadius,\n  borderEndStartRadius,\n  borderEndEndRadius,\n  style,\n  className,\n  objectFit = 'cover',\n  ...restProps\n}: ImageProps) => {\n  const borderStyles: CSSCustomProperties<string | undefined> = React.useMemo(\n    () => ({\n      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),\n      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartStartRadius,\n      ),\n      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartEndRadius,\n      ),\n      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndStartRadius,\n      ),\n      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndEndRadius,\n      ),\n    }),\n    [\n      borderRadius,\n      borderStartStartRadius,\n      borderStartEndRadius,\n      borderEndStartRadius,\n      borderEndEndRadius,\n      size,\n    ],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      objectFit={objectFit}\n      size={size}\n      style={mergeStyle(borderStyles, style)}\n      className={classNames(\n        className,\n        styles.host,\n        borderStartStartRadius && styles.borderStartStartRadius,\n        borderStartEndRadius && styles.borderStartEndRadius,\n        borderEndStartRadius && styles.borderEndStartRadius,\n        borderEndEndRadius && styles.borderEndEndRadius,\n      )}\n    />\n  );\n};\n\nImage.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n\nImage.FloatElement = ImageBase.FloatElement;\nImage.FloatElement.displayName = 'Image.FloatElement';\n"],"names":["React","classNames","mergeStyle","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","displayName","Badge","Overlay","FloatElement"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAK3E,MAAMC,qBAAqB;AAyB3B,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA,MAAME,4BAA4B,CAChCF,MACAC;IAEA,IAAI,CAACA,cAAc;QACjB,OAAOE;IACT;IAEA,OAAO,GAAGJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAIT;QAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EAER,WADRC;QATHZ;QACAC;QACAI;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAwDpB,MAAMqB,OAAO,CACzE,IAAO,CAAA;YACL,wCAAwCZ,0BAA0BF,MAAMC;YACxE,oDAAoDC,0BAClDF,MACAK;YAEF,kDAAkDH,0BAChDF,MACAM;YAEF,kDAAkDJ,0BAChDF,MACAO;YAEF,gDAAgDL,0BAC9CF,MACAQ;QAEJ,CAAA,GACA;QACEP;QACAI;QACAC;QACAC;QACAC;QACAR;KACD;IAGH,qBACE,KAACJ,mDACKgB;QACJD,WAAWA;QACXX,MAAMA;QACNS,OAAOd,WAAWkB,cAAcJ;QAChCC,WAAWhB,WACTgB,8BAEAL,+DACAC,2DACAC,2DACAC;;AAIR,EAAE;AAEFJ,MAAMW,WAAW,GAAG;AAEpBX,MAAMY,KAAK,GAAGnB;AACdO,MAAMY,KAAK,CAACD,WAAW,GAAG;AAE1BX,MAAMa,OAAO,GAAGrB,UAAUqB,OAAO;AACjCb,MAAMa,OAAO,CAACF,WAAW,GAAG;AAE5BX,MAAMc,YAAY,GAAGtB,UAAUsB,YAAY;AAC3Cd,MAAMc,YAAY,CAACH,WAAW,GAAG"}

package/dist/components/ImageBase/ImageBase.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';
 import { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
+import { type FloatElementIndentation, type FloatElementPlacement, ImageBaseFloatElement, type ImageBaseFloatElementProps } from './ImageBaseFloatElement/ImageBaseFloatElement';
 import { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
 import type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';
-export type { ImageBaseSize, ImageBaseExpectedIconProps, ImageBaseBadgeProps, ImageBaseOverlayProps, ImageBaseContextProps, };
+export type { ImageBaseSize, ImageBaseExpectedIconProps, ImageBaseBadgeProps, ImageBaseOverlayProps, ImageBaseContextProps, ImageBaseFloatElementProps, FloatElementPlacement, FloatElementIndentation, };
 export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, } from './helpers';
 export { ImageBaseContext };
 export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, AnchorHTMLAttributesOnly, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {
@@ -52,6 +53,11 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
      * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)
      */
     objectFit?: React.CSSProperties['objectFit'];
+    /**
+     * Пользовательское значения стиля object-position
+     * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position)
+     */
+    objectPosition?: React.CSSProperties['objectPosition'];
     /**
      * Флаг для сохранения пропорций картинки.
      * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки
@@ -64,5 +70,6 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
 export declare const ImageBase: React.FC<ImageBaseProps> & {
     Badge: typeof ImageBaseBadge;
     Overlay: typeof ImageBaseOverlay;
+    FloatElement: typeof ImageBaseFloatElement;
 };
 //# sourceMappingURL=ImageBase.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,GACtB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAO5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA8BD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,KAAK,EAAE,OAAO,cAAc,CAAC;IAC7B,OAAO,EAAE,OAAO,gBAAgB,CAAC;CAkIlC,CAAC"}
+{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EACV,wBAAwB,EAExB,MAAM,EACN,UAAU,EACV,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,qBAAqB,EACrB,KAAK,0BAA0B,EAChC,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,EACrB,uBAAuB,GACxB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAO5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACvD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA8BD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,KAAK,EAAE,OAAO,cAAc,CAAC;IAC7B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,YAAY,EAAE,OAAO,qBAAqB,CAAC;CAmK5C,CAAC"}

package/dist/components/ImageBase/ImageBase.js

@@ -3,13 +3,16 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { minOr } from "../../lib/comparing.js";
 import { getFetchPriorityProp } from "../../lib/utils.js";
 import { Clickable } from "../Clickable/Clickable.js";
 import { ImageBaseBadge } from "./ImageBaseBadge/ImageBaseBadge.js";
+import { ImageBaseFloatElement } from "./ImageBaseFloatElement/ImageBaseFloatElement.js";
 import { ImageBaseOverlay } from "./ImageBaseOverlay/ImageBaseOverlay.js";
 import { ImageBaseContext } from "./context.js";
 import { validateFallbackIcon, validateSize } from "./validators.js";
@@ -46,7 +49,7 @@ const sizeToNumber = (size)=>{
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */ export const ImageBase = (_param)=>{
-    var { alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, fetchPriority, getRef, size: sizeProp, width: widthImg, height: heightImg, widthSize, heightSize, noBorder = false, fallbackIcon: fallbackIconProp, children, onLoad, onError, withTransparentBackground, objectFit = 'cover', keepAspectRatio = false } = _param, restProps = _object_without_properties(_param, [
+    var { alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, fetchPriority, getRef, size: sizeProp, width: widthImg, height: heightImg, widthSize, heightSize, noBorder = false, fallbackIcon: fallbackIconProp, children, onLoad, onError, withTransparentBackground, objectFit = 'cover', objectPosition, keepAspectRatio = false, getRootRef } = _param, restProps = _object_without_properties(_param, [
         "alt",
         "crossOrigin",
         "decoding",
@@ -70,16 +73,21 @@ const sizeToNumber = (size)=>{
         "onError",
         "withTransparentBackground",
         "objectFit",
-        "keepAspectRatio"
+        "objectPosition",
+        "keepAspectRatio",
+        "getRootRef"
     ]);
     const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : minOr([
         sizeToNumber(widthSize),
         sizeToNumber(heightSize)
     ], defaultSize);
+    const wrapperRef = useExternRef(getRootRef);
     const width = widthSize !== null && widthSize !== void 0 ? widthSize : keepAspectRatio ? undefined : size;
     const height = heightSize !== null && heightSize !== void 0 ? heightSize : keepAspectRatio ? undefined : size;
     const [loaded, setLoaded] = React.useState(false);
     const [failed, setFailed] = React.useState(false);
+    const mouseOverHandlersRef = useRef([]);
+    const mouseOutHandlersRef = useRef([]);
     const hasSrc = src || srcSet;
     const needShowFallbackIcon = (failed || !hasSrc) && /*#__PURE__*/ React.isValidElement(fallbackIconProp);
     const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;
@@ -120,30 +128,48 @@ const sizeToNumber = (size)=>{
         imgRef,
         loaded
     ]);
+    const onMouseOver = ()=>{
+        mouseOverHandlersRef.current.forEach((fn)=>fn());
+    };
+    const onMouseOut = ()=>{
+        mouseOutHandlersRef.current.forEach((fn)=>fn());
+    };
+    const contextValue = React.useMemo(()=>({
+            size,
+            onMouseOverHandlers: mouseOverHandlersRef.current,
+            onMouseOutHandlers: mouseOutHandlersRef.current
+        }), [
+        size
+    ]);
+    const imgStyles = objectPosition ? {
+        '--vkui_internal--ImageBase_object_position': objectPosition
+    } : undefined;
+    const keepAspectRationStyles = keepAspectRatio ? {
+        width: widthImg || width,
+        height: heightImg || height
+    } : undefined;
     return /*#__PURE__*/ _jsx(ImageBaseContext.Provider, {
-        value: {
-            size
-        },
+        value: contextValue,
         children: /*#__PURE__*/ _jsxs(Clickable, _object_spread_props(_object_spread({
             baseStyle: {
                 width,
                 height
             },
-            baseClassName: classNames("vkuiImageBase__host", loaded && "vkuiImageBase__loaded", withTransparentBackground && "vkuiImageBase__transparentBackground")
+            baseClassName: classNames("vkuiImageBase__host", loaded && "vkuiImageBase__loaded", withTransparentBackground && "vkuiImageBase__transparentBackground"),
+            getRootRef: wrapperRef,
+            onMouseOver: onMouseOver,
+            onMouseOut: onMouseOut
         }, restProps), {
             children: [
                 hasSrc && /*#__PURE__*/ _jsx("img", _object_spread({
                     ref: imgRef,
                     alt: alt,
-                    className: classNames("vkuiImageBase__img", getObjectFitClassName(objectFit), keepAspectRatio && "vkuiImageBase__imgKeepRatio"),
+                    className: classNames("vkuiImageBase__img", getObjectFitClassName(objectFit), objectPosition && "vkuiImageBase__withObjectPosition", keepAspectRatio && "vkuiImageBase__imgKeepRatio"),
                     crossOrigin: crossOrigin,
                     decoding: decoding,
                     loading: loading,
                     referrerPolicy: referrerPolicy,
-                    style: keepAspectRatio ? {
-                        width: widthImg || width,
-                        height: heightImg || height
-                    } : undefined,
+                    style: mergeStyle(keepAspectRationStyles, imgStyles),
                     sizes: sizes,
                     src: src,
                     srcSet: srcSet,
@@ -174,5 +200,7 @@ ImageBase.Badge = ImageBaseBadge;
 ImageBase.Badge.displayName = 'ImageBase.Badge';
 ImageBase.Overlay = ImageBaseOverlay;
 ImageBase.Overlay.displayName = 'ImageBase.Overlay';
+ImageBase.FloatElement = ImageBaseFloatElement;
+ImageBase.FloatElement.displayName = 'ImageBase.FloatElement';
 
 //# sourceMappingURL=ImageBase.js.map

package/dist/components/ImageBase/ImageBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles.imgObjectFitContain;\n    case 'cover':\n      return styles.imgObjectFitCover;\n    case 'none':\n      return styles.imgObjectFitNone;\n    case 'scale-down':\n      return styles.imgObjectFitScaleDown;\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  keepAspectRatio = false,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles.img,\n              getObjectFitClassName(objectFit),\n              keepAspectRatio && styles.imgKeepRatio,\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={\n              keepAspectRatio\n                ? {\n                    width: widthImg || width,\n                    height: heightImg || height,\n                  }\n                : undefined\n            }\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n        {children && <div className={styles.children}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles.border} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["React","classNames","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseStyle","baseClassName","img","ref","className","style","div","aria-hidden","displayName","Badge","Overlay"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type {\n  AnchorHTMLAttributesOnly,\n  CSSCustomProperties,\n  HasRef,\n  HasRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport {\n  type FloatElementIndentation,\n  type FloatElementPlacement,\n  ImageBaseFloatElement,\n  type ImageBaseFloatElementProps,\n} from './ImageBaseFloatElement/ImageBaseFloatElement';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n  ImageBaseFloatElementProps,\n  FloatElementPlacement,\n  FloatElementIndentation,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Пользовательское значения стиля object-position\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position)\n   */\n  objectPosition?: React.CSSProperties['objectPosition'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles.imgObjectFitContain;\n    case 'cover':\n      return styles.imgObjectFitCover;\n    case 'none':\n      return styles.imgObjectFitNone;\n    case 'scale-down':\n      return styles.imgObjectFitScaleDown;\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n  FloatElement: typeof ImageBaseFloatElement;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  objectPosition,\n  keepAspectRatio = false,\n  getRootRef,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n  const wrapperRef = useExternRef(getRootRef);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const mouseOverHandlersRef = useRef<VoidFunction[]>([]);\n  const mouseOutHandlersRef = useRef<VoidFunction[]>([]);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  const onMouseOver = () => {\n    mouseOverHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const onMouseOut = () => {\n    mouseOutHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      onMouseOverHandlers: mouseOverHandlersRef.current,\n      onMouseOutHandlers: mouseOutHandlersRef.current,\n    }),\n    [size],\n  );\n\n  const imgStyles: CSSCustomProperties<string | number> | undefined = objectPosition\n    ? {\n        '--vkui_internal--ImageBase_object_position': objectPosition,\n      }\n    : undefined;\n\n  const keepAspectRationStyles = keepAspectRatio\n    ? {\n        width: widthImg || width,\n        height: heightImg || height,\n      }\n    : undefined;\n\n  return (\n    <ImageBaseContext.Provider value={contextValue}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        getRootRef={wrapperRef}\n        onMouseOver={onMouseOver}\n        onMouseOut={onMouseOut}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles.img,\n              getObjectFitClassName(objectFit),\n              objectPosition && styles.withObjectPosition,\n              keepAspectRatio && styles.imgKeepRatio,\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={mergeStyle(keepAspectRationStyles, imgStyles)}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n        {children && <div className={styles.children}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles.border} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n\nImageBase.FloatElement = ImageBaseFloatElement;\nImageBase.FloatElement.displayName = 'ImageBase.FloatElement';\n"],"names":["useRef","React","classNames","mergeStyle","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseFloatElement","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","objectPosition","keepAspectRatio","getRootRef","restProps","wrapperRef","loaded","setLoaded","useState","failed","setFailed","mouseOverHandlersRef","mouseOutHandlersRef","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","imgStyles","keepAspectRationStyles","Provider","baseStyle","baseClassName","img","ref","className","style","div","aria-hidden","displayName","Badge","Overlay","FloatElement"],"mappings":"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"}

package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributesWithRootRef } from '../../../types';
+export type FloatElementPlacement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'middle-start' | 'middle' | 'middle-end';
+export type FloatElementIndentation = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | number | string;
+export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    /**
+     * Позиция компонента относительно родителя
+     */
+    placement: FloatElementPlacement;
+    /**
+     * Отступ компонента от края контейнера по горизонтали
+     */
+    inlineIndent?: FloatElementIndentation;
+    /**
+     * Отступ компонента от края контейнера по вертикали
+     */
+    blockIndent?: FloatElementIndentation;
+    /**
+     * Режим отображения компонента:
+     *
+     * - `"always"`: Всегда
+     * - `"on-hover"`: При наведении на картинку
+     */
+    visibility?: 'always' | 'on-hover';
+}
+export declare const ImageBaseFloatElement: {
+    ({ placement, visibility, style, className, inlineIndent, blockIndent, ...restProps }: ImageBaseFloatElementProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ImageBaseFloatElement.d.ts.map

package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBaseFloatElement.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAMhE,MAAM,MAAM,qBAAqB,GAC7B,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,uBAAuB,GAC/B,KAAK,GACL,IAAI,GACJ,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,CAAC;AAsCX,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC3F;;OAEG;IACH,SAAS,EAAE,qBAAqB,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;CACpC;AAED,eAAO,MAAM,qBAAqB;2FAQ/B,0BAA0B;;CAgE5B,CAAC"}

package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.js

@@ -0,0 +1,96 @@
+'use client';
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useIsomorphicLayoutEffect } from "../../../lib/useIsomorphicLayoutEffect.js";
+import { RootComponent } from "../../RootComponent/RootComponent.js";
+import { ImageBaseContext } from "../context.js";
+import { mutableRemoveElement, resolveIndent } from "./helpers.js";
+const positionPlacementClassNames = {
+    'top-start': "vkuiImageBaseFloatElement__placementTopStart",
+    'top': "vkuiImageBaseFloatElement__placementTop",
+    'top-end': "vkuiImageBaseFloatElement__placementTopEnd",
+    'bottom-start': "vkuiImageBaseFloatElement__placementBottomStart",
+    'bottom': "vkuiImageBaseFloatElement__placementBottom",
+    'bottom-end': "vkuiImageBaseFloatElement__placementBottomEnd",
+    'middle-start': "vkuiImageBaseFloatElement__placementMiddleStart",
+    'middle': "vkuiImageBaseFloatElement__placementMiddle",
+    'middle-end': "vkuiImageBaseFloatElement__placementMiddleEnd"
+};
+const inlineIndentClassNames = {
+    '2xs': "vkuiImageBaseFloatElement__inlineIndent2xs",
+    'xs': "vkuiImageBaseFloatElement__inlineIndentXs",
+    's': "vkuiImageBaseFloatElement__inlineIndentS",
+    'm': "vkuiImageBaseFloatElement__inlineIndentM",
+    'l': "vkuiImageBaseFloatElement__inlineIndentL",
+    'xl': "vkuiImageBaseFloatElement__inlineIndentXl",
+    '2xl': "vkuiImageBaseFloatElement__inlineIndent2xl",
+    '3xl': "vkuiImageBaseFloatElement__inlineIndent3xl",
+    '4xl': "vkuiImageBaseFloatElement__inlineIndent4xl"
+};
+const blockIndentClassNames = {
+    '2xs': "vkuiImageBaseFloatElement__blockIndent2xs",
+    'xs': "vkuiImageBaseFloatElement__blockIndentXs",
+    's': "vkuiImageBaseFloatElement__blockIndentS",
+    'm': "vkuiImageBaseFloatElement__blockIndentM",
+    'l': "vkuiImageBaseFloatElement__blockIndentL",
+    'xl': "vkuiImageBaseFloatElement__blockIndentXl",
+    '2xl': "vkuiImageBaseFloatElement__blockIndent2xl",
+    '3xl': "vkuiImageBaseFloatElement__blockIndent3xl",
+    '4xl': "vkuiImageBaseFloatElement__blockIndent4xl"
+};
+export const ImageBaseFloatElement = (_param)=>{
+    var { placement, visibility = 'always', style, className, inlineIndent, blockIndent } = _param, restProps = _object_without_properties(_param, [
+        "placement",
+        "visibility",
+        "style",
+        "className",
+        "inlineIndent",
+        "blockIndent"
+    ]);
+    const [hidden, setHidden] = React.useState(visibility !== 'always');
+    const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);
+    useIsomorphicLayoutEffect(function resetHidden() {
+        setHidden(visibility === 'on-hover');
+    }, [
+        visibility
+    ]);
+    useIsomorphicLayoutEffect(function addMouseHandlers() {
+        if (visibility === 'on-hover') {
+            const onMouseOver = ()=>setHidden(false);
+            const onMouseOut = ()=>setHidden(true);
+            onMouseOverHandlers.push(onMouseOver);
+            onMouseOutHandlers.push(onMouseOut);
+            return ()=>{
+                mutableRemoveElement(onMouseOverHandlers, onMouseOver);
+                mutableRemoveElement(onMouseOutHandlers, onMouseOut);
+            };
+        }
+        return;
+    }, [
+        visibility
+    ]);
+    const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] = React.useMemo(()=>{
+        const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(inlineIndent, '--vkui_internal--FloatElement_horizontal_indent', inlineIndentClassNames);
+        const [blockIndentStyle, blockIndentClassName] = resolveIndent(blockIndent, '--vkui_internal--FloatElement_vertical_indent', blockIndentClassNames);
+        return [
+            inlineIndentStyle,
+            blockIndentStyle,
+            inlineIndentClassName,
+            blockIndentClassName
+        ];
+    }, [
+        inlineIndent,
+        blockIndent
+    ]);
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        style: _object_spread({}, style, inlineIndentStyle, blockIndentStyle),
+        className: classNames("vkuiImageBaseFloatElement__host", hidden && "vkuiImageBaseFloatElement__hidden", positionPlacementClassNames[placement], inlineIndentClassName, blockIndentClassName, className)
+    }));
+};
+ImageBaseFloatElement.displayName = 'ImageBaseFloatElement';
+
+//# sourceMappingURL=ImageBaseFloatElement.js.map

package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport { type HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport { mutableRemoveElement, resolveIndent } from './helpers';\nimport styles from './ImageBaseFloatElement.module.css';\n\nexport type FloatElementPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'middle-start'\n  | 'middle'\n  | 'middle-end';\n\nexport type FloatElementIndentation =\n  | '2xs'\n  | 'xs'\n  | 's'\n  | 'm'\n  | 'l'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl'\n  | number\n  | string;\n\nconst positionPlacementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n  'middle-start': styles.placementMiddleStart,\n  'middle': styles.placementMiddle,\n  'middle-end': styles.placementMiddleEnd,\n};\n\nconst inlineIndentClassNames = {\n  '2xs': styles.inlineIndent2xs,\n  'xs': styles.inlineIndentXs,\n  's': styles.inlineIndentS,\n  'm': styles.inlineIndentM,\n  'l': styles.inlineIndentL,\n  'xl': styles.inlineIndentXl,\n  '2xl': styles.inlineIndent2xl,\n  '3xl': styles.inlineIndent3xl,\n  '4xl': styles.inlineIndent4xl,\n};\n\nconst blockIndentClassNames = {\n  '2xs': styles.blockIndent2xs,\n  'xs': styles.blockIndentXs,\n  's': styles.blockIndentS,\n  'm': styles.blockIndentM,\n  'l': styles.blockIndentL,\n  'xl': styles.blockIndentXl,\n  '2xl': styles.blockIndent2xl,\n  '3xl': styles.blockIndent3xl,\n  '4xl': styles.blockIndent4xl,\n};\n\nexport interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позиция компонента относительно родителя\n   */\n  placement: FloatElementPlacement;\n  /**\n   * Отступ компонента от края контейнера по горизонтали\n   */\n  inlineIndent?: FloatElementIndentation;\n  /**\n   * Отступ компонента от края контейнера по вертикали\n   */\n  blockIndent?: FloatElementIndentation;\n  /**\n   * Режим отображения компонента:\n   *\n   * - `\"always\"`: Всегда\n   * - `\"on-hover\"`: При наведении на картинку\n   */\n  visibility?: 'always' | 'on-hover';\n}\n\nexport const ImageBaseFloatElement = ({\n  placement,\n  visibility = 'always',\n  style,\n  className,\n  inlineIndent,\n  blockIndent,\n  ...restProps\n}: ImageBaseFloatElementProps) => {\n  const [hidden, setHidden] = React.useState(visibility !== 'always');\n  const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);\n\n  useIsomorphicLayoutEffect(\n    function resetHidden() {\n      setHidden(visibility === 'on-hover');\n    },\n    [visibility],\n  );\n\n  useIsomorphicLayoutEffect(\n    function addMouseHandlers() {\n      if (visibility === 'on-hover') {\n        const onMouseOver = () => setHidden(false);\n        const onMouseOut = () => setHidden(true);\n\n        onMouseOverHandlers.push(onMouseOver);\n        onMouseOutHandlers.push(onMouseOut);\n\n        return () => {\n          mutableRemoveElement(onMouseOverHandlers, onMouseOver);\n          mutableRemoveElement(onMouseOutHandlers, onMouseOut);\n        };\n      }\n      return;\n    },\n    [visibility],\n  );\n\n  const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =\n    React.useMemo(() => {\n      const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(\n        inlineIndent,\n        '--vkui_internal--FloatElement_horizontal_indent',\n        inlineIndentClassNames,\n      );\n      const [blockIndentStyle, blockIndentClassName] = resolveIndent(\n        blockIndent,\n        '--vkui_internal--FloatElement_vertical_indent',\n        blockIndentClassNames,\n      );\n\n      return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];\n    }, [inlineIndent, blockIndent]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        ...inlineIndentStyle,\n        ...blockIndentStyle,\n      }}\n      className={classNames(\n        styles.host,\n        hidden && styles.hidden,\n        positionPlacementClassNames[placement],\n        inlineIndentClassName,\n        blockIndentClassName,\n        className,\n      )}\n    />\n  );\n};\n\nImageBaseFloatElement.displayName = 'ImageBaseFloatElement';\n"],"names":["React","classNames","useIsomorphicLayoutEffect","RootComponent","ImageBaseContext","mutableRemoveElement","resolveIndent","positionPlacementClassNames","inlineIndentClassNames","blockIndentClassNames","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo","displayName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,eAAY;AA2BhE,MAAMC,8BAA8B;IAClC,WAAW;IACX,KAAK;IACL,SAAS;IACT,cAAc;IACd,QAAQ;IACR,YAAY;IACZ,cAAc;IACd,QAAQ;IACR,YAAY;AACd;AAEA,MAAMC,yBAAyB;IAC7B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAEA,MAAMC,wBAAwB;IAC5B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAwBA,OAAO,MAAMC,wBAAwB;QAAC,EACpCC,SAAS,EACTC,aAAa,QAAQ,EACrBC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,WAAW,EAEgB,WADxBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,QAAQC,UAAU,GAAGnB,MAAMoB,QAAQ,CAACR,eAAe;IAC1D,MAAM,EAAES,mBAAmB,EAAEC,kBAAkB,EAAE,GAAGtB,MAAMuB,UAAU,CAACnB;IAErEF,0BACE,SAASsB;QACPL,UAAUP,eAAe;IAC3B,GACA;QAACA;KAAW;IAGdV,0BACE,SAASuB;QACP,IAAIb,eAAe,YAAY;YAC7B,MAAMc,cAAc,IAAMP,UAAU;YACpC,MAAMQ,aAAa,IAAMR,UAAU;YAEnCE,oBAAoBO,IAAI,CAACF;YACzBJ,mBAAmBM,IAAI,CAACD;YAExB,OAAO;gBACLtB,qBAAqBgB,qBAAqBK;gBAC1CrB,qBAAqBiB,oBAAoBK;YAC3C;QACF;QACA;IACF,GACA;QAACf;KAAW;IAGd,MAAM,CAACiB,mBAAmBC,kBAAkBC,uBAAuBC,qBAAqB,GACtFhC,MAAMiC,OAAO,CAAC;QACZ,MAAM,CAACJ,mBAAmBE,sBAAsB,GAAGzB,cACjDS,cACA,mDACAP;QAEF,MAAM,CAACsB,kBAAkBE,qBAAqB,GAAG1B,cAC/CU,aACA,iDACAP;QAGF,OAAO;YAACoB;YAAmBC;YAAkBC;YAAuBC;SAAqB;IAC3F,GAAG;QAACjB;QAAcC;KAAY;IAEhC,qBACE,KAACb,uDACKc;QACJJ,OAAO,mBACFA,OACAgB,mBACAC;QAELhB,WAAWb,8CAETiB,+CACAX,2BAA2B,CAACI,UAAU,EACtCoB,uBACAC,sBACAlB;;AAIR,EAAE;AAEFJ,sBAAsBwB,WAAW,GAAG"}