@vkontakte/vkui 6.4.0 → 6.5.0

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

@@ -1,159 +1,58 @@
-.Group {
-  color: var(--vkui--color_text_primary);
-  padding-block: 8px;
-}
+/* stylelint-disable selector-max-universal */
 
-.Group__header:empty {
-  display: none;
-}
+/*
+ * Автоопределение mode:
+ *
+ * - sizeX="compact" (mobile)  -> mode="plain"
+ * - sizeX="regular" (desktop) -> mode="card"
+ */
 
-.Group--mode-plain:not(:first-of-type) > .Group__header {
-  -webkit-margin-before: -8px;
-          margin-block-start: -8px;
-}
+.Group {
+  --vkui_internal--Group_padding_size: 0;
 
-@media (max-width: 767.9px) {
-  .Group--sizeX-none.Group--mode-none:not(:first-of-type) > .Group__header {
-    -webkit-margin-before: -8px;
-            margin-block-start: -8px;
-  }
+  color: var(--vkui--color_text_primary);
+  padding-block: var(--vkui--spacing_size_m);
 }
 
-.Group--mode-card > .Group__header {
-  -webkit-margin-before: -4px;
-          margin-block-start: -4px;
+.Group--padding-s {
+  --vkui_internal--Group_padding_size: var(--vkui--spacing_size_xs);
 }
 
-@media (min-width: 768px) {
-  .Group--sizeX-none.Group--mode-none > .Group__header {
-    -webkit-margin-before: -4px;
-            margin-block-start: -4px;
-  }
+.Group--padding-m {
+  --vkui_internal--Group_padding_size: var(--vkui--spacing_size_m);
 }
 
-.Group__separator--spacing,
-.Group__separator--separator {
-  display: none;
-}
+/* разделитель при mode="card" */
 
-.Group__separator--spacing {
+.Group--mode-card,
+.Group--sizeX-regular.Group--mode-none {
+  padding: var(--vkui_internal--Group_padding_size);
   position: relative;
-  box-sizing: border-box;
-}
-
-/* stylelint-disable-next-line selector-max-universal */
-
-.Group--mode-plain + * + .Group__separator--separator {
-  display: block;
-}
-
-@media (max-width: 767.9px) {
-  /* stylelint-disable-next-line selector-max-universal */
-  .Group--sizeX-none.Group--mode-none + * + .Group__separator--separator {
-    display: block;
-  }
-}
-
-.Group--mode-card + .Group__separator--spacing {
-  display: block;
-  block-size: 16px;
-  padding-block: 8px;
-  padding-inline: 0;
-}
-
-.Group--sizeX-compact.Group--mode-card + .Group__separator--spacing {
-  display: block;
-  block-size: 8px;
-  padding-block: 4px;
-}
-
-@media (min-width: 768px) {
-  .Group--sizeX-none.Group--mode-none + .Group__separator--spacing {
-    display: block;
-    block-size: 16px;
-    padding-block: 8px;
-    padding-inline: 0;
-  }
-}
-
-@media (max-width: 767.9px) {
-  .Group--sizeX-none.Group--mode-card + .Group__separator--spacing {
-    block-size: 8px;
-    padding-block: 4px;
-  }
-}
-
-.Group:last-of-type ~ .Group__separator {
-  display: none;
-}
-
-.Group:last-of-type ~ .Group__separator--force,
-.Group--mode-card:last-of-type + .Group__separator--spacing {
-  display: block;
-}
-
-@media (min-width: 768px) {
-  .Group--sizeX-none.Group--mode-none:last-of-type + .Group__separator--spacing {
-    display: block;
-  }
-}
-
-.Group--mode-card.Group--padding-s {
-  padding: 4px;
-}
-
-.Group--mode-card.Group--padding-m {
-  padding: 8px;
+  background: var(--vkui--color_background_content);
+  border-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
 @media (min-width: 768px) {
-  .Group--sizeX-none.Group--inside-modal.Group--padding-s,
-  .Group--sizeX-none.Group--mode-none.Group--padding-s {
-    padding: 4px;
-  }
-
-  .Group--sizeX-none.Group--inside-modal.Group--padding-m,
-  .Group--sizeX-none.Group--mode-none.Group--padding-m {
-    padding: 8px;
+  .Group--sizeX-none.Group--mode-none {
+    padding: var(--vkui_internal--Group_padding_size);
+    position: relative;
+    background: var(--vkui--color_background_content);
+    border-radius: var(--vkui--size_border_radius_paper--regular);
   }
 }
 
-.Group--sizeX-compact,
 .Group--sizeX-compact.Group--mode-card {
   padding-inline: 0;
-}
-
-@media (max-width: 767.9px) {
-  .Group--sizeX-none,
-  .Group--sizeX-none.Group--mode-card {
-    padding-inline: 0;
-  }
-}
-
-.Group--mode-card {
-  background: var(--vkui--color_background_content);
-  border-radius: var(--vkui--size_border_radius_paper--regular);
-  position: relative;
-}
-
-.Group--sizeX-compact.Group--mode-card {
   border-radius: var(--vkui--size_border_radius_promo--regular);
 }
 
 @media (max-width: 767.9px) {
   .Group--sizeX-none.Group--mode-card {
+    padding-inline: 0;
     border-radius: var(--vkui--size_border_radius_promo--regular);
   }
 }
 
-@media (min-width: 768px) {
-  .Group--sizeX-none.Group--mode-none {
-    background: var(--vkui--color_background_content);
-    border-radius: var(--vkui--size_border_radius_paper--regular);
-    position: relative;
-  }
-}
-
 .Group--sizeX-compact.Group--mode-card:first-of-type {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
@@ -170,7 +69,7 @@
   }
 }
 
-/**
+/*
  * Изменено с ::after на ::before
  * потому что при ::after абсолютно позиционированный элемент накладывается
  * поверх любого другого абсолютно позиционированного элемента внутри Group,
@@ -178,7 +77,8 @@
  * См. пример: Slider c пропом withTooltip
  */
 
-.Group--mode-card::before {
+.Group--mode-card::before,
+.Group--sizeX-regular.Group--mode-none::before {
   content: '';
   inset-inline-start: 0;
   inset-block-start: 0;
@@ -214,27 +114,158 @@
   }
 }
 
-.Group--mode-plain + .Group__separator + .Group__separator {
-  padding-block: 8px;
+/*
+ * Header
+ */
+
+.Group__header:empty {
+  display: none;
+}
+
+.Group--mode-plain:not(:first-of-type) > .Group__header,
+.Group--sizeX-compact.Group--mode-none:not(:first-of-type) > .Group__header {
+  -webkit-margin-before: calc(-1 * var(--vkui--spacing_size_m));
+          margin-block-start: calc(-1 * var(--vkui--spacing_size_m));
 }
 
 @media (max-width: 767.9px) {
-  .Group--sizeX-none.Group--mode-none + .Group__separator + .Group__separator {
-    padding-block: 8px;
+  .Group--sizeX-none.Group--mode-none:not(:first-of-type) > .Group__header {
+    -webkit-margin-before: calc(-1 * var(--vkui--spacing_size_m));
+            margin-block-start: calc(-1 * var(--vkui--spacing_size_m));
+  }
+}
+
+.Group--mode-card > .Group__header,
+.Group--sizeX-regular.Group--mode-none > .Group__header {
+  -webkit-margin-before: calc(-1 * var(--vkui--spacing_size_xs));
+          margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
+}
+
+@media (min-width: 768px) {
+  .Group--sizeX-none.Group--mode-none > .Group__header {
+    -webkit-margin-before: calc(-1 * var(--vkui--spacing_size_xs));
+            margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
   }
 }
 
+/*
+ * Description
+ */
+
 .Group__description {
   display: block;
-  padding-block: 4px 16px;
+  padding-block: var(--vkui--spacing_size_xs) var(--vkui--spacing_size_2xl);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   color: var(--vkui--color_text_secondary);
 }
 
+/*
+ * Separator (sibling)
+ *
+ * ⚠️ Находится за пределами Group
+ */
+
+.Group__separator-sibling {
+  --vkui_internal--Group__separator_hr: none;
+
+  position: relative;
+  box-sizing: border-box;
+}
+
+.Group__separator-sibling::before {
+  display: var(--vkui_internal--Group__separator_hr);
+  content: '';
+  block-size: var(--vkui--size_border--regular);
+  background: var(--vkui--color_separator_primary);
+}
+
+/* разделитель при mode="plain" */
+
+.Group--mode-plain + .Group__separator-sibling,
+.Group--sizeX-compact.Group--mode-none + .Group__separator-sibling {
+  --vkui_internal--Group__separator_hr: block;
+
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
+  padding-block: var(--vkui--spacing_size_m);
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none.Group--mode-none + .Group__separator-sibling {
+    --vkui_internal--Group__separator_hr: block;
+
+    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
+    padding-block: var(--vkui--spacing_size_m);
+  }
+}
+
+.Group--mode-plain:last-of-type + .Group__separator-sibling:not(.Group__separator-sibling--forced) {
+  display: none;
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none.Group--mode-none:last-of-type
+    + .Group__separator-sibling:not(.Group__separator-sibling--forced) {
+    display: none;
+  }
+}
+
+/* разделитель при mode="card" */
+
+.Group--mode-card + .Group__separator-sibling,
+.Group--sizeX-regular.Group--mode-none + .Group__separator-sibling {
+  block-size: var(--vkui--spacing_size_2xl);
+  padding-block: calc(var(--vkui--spacing_size_2xl) / 2);
+}
+
+@media (min-width: 768px) {
+  .Group--sizeX-none.Group--mode-none + .Group__separator-sibling {
+    block-size: var(--vkui--spacing_size_2xl);
+    padding-block: calc(var(--vkui--spacing_size_2xl) / 2);
+  }
+}
+
+.Group--sizeX-compact.Group--mode-card + .Group__separator-sibling {
+  block-size: var(--vkui--spacing_size_m);
+  padding-block: calc(var(--vkui--spacing_size_m) / 2);
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none.Group--mode-card + .Group__separator-sibling {
+    block-size: var(--vkui--spacing_size_m);
+    padding-block: calc(var(--vkui--spacing_size_m) / 2);
+  }
+}
+
+/*
+ * Group вложенный в ModalPage
+ *
+ * note: ModalPage форсирует mode="plain" для Group
+ */
+
+@media (min-width: 768px) {
+  .Group--mode-plain-inside-modal {
+    padding: var(--vkui--spacing_size_m);
+  }
+
+  .Group--mode-plain-inside-modal + .Group__separator-sibling {
+    padding-inline: calc(
+      var(--vkui--size_base_padding_horizontal--regular) + var(--vkui--spacing_size_m)
+    );
+  }
+}
+
+/*
+ * Group вложенный в Group
+ */
+
 .Group .Group {
   padding-inline: 0;
 }
 
+.Group .Group + .Group__separator-sibling {
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
+}
+
 .Group .Group:first-of-type {
   -webkit-padding-before: 0;
           padding-block-start: 0;
@@ -250,8 +281,6 @@
  * PanelHeader
  */
 
-/* stylelint-disable selector-max-universal */
-
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalPanelHeader--vkcom) ~ .Group:first-of-type,
@@ -261,5 +290,3 @@
   border-start-end-radius: 0;
   border-start-start-radius: 0;
 }
-
-/* stylelint-enable selector-max-universal */

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqBhE,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,GAAG,GAAG,GAAG,CAAC;IACtB;;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;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA2GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,kKAY1B,qBAAqB,KAAG,KAAK,CAAC,SAsJhC,CAAC"}
+{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqBhE,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,GAAG,GAAG,GAAG,CAAC;IACtB;;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;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAsGD;;GAEG;AACH,eAAO,MAAM,gBAAgB,kKAY1B,qBAAqB,KAAG,KAAK,CAAC,SAsJhC,CAAC"}

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js

@@ -37,7 +37,7 @@ import styles from './HorizontalScroll.module.css';
  * Константа взята из полифила (468), на дизайн-ревью уточнили до 250
  * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла
  */ const SCROLL_ONE_FRAME_TIME = 250;
-function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollToEndBorder, onScrollEnd, onScrollStart, initialScrollWidth, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, textDirection }) {
+function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollToEndBorder, onScrollEnd, onScrollStart, initialScrollWidth, scrollAnimationDuration, textDirection }) {
     if (!scrollElement || !getScrollPosition) {
         return;
     }
@@ -58,10 +58,6 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
     }
     const startTime = now();
     (function scroll() {
-        if (!scrollElement) {
-            onScrollEnd();
-            return;
-        }
         const time = now();
         const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);
         const value = easeInOutSine(elapsed);
@@ -84,9 +80,10 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
  */ export const HorizontalScroll = ({ children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'l', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, inline = false, ...restProps })=>{
     const [canScrollLeft, setCanScrollLeft] = React.useState(false);
     const [canScrollRight, setCanScrollRight] = React.useState(false);
-    const [directionRef, textDirection = 'ltr'] = useDirection();
-    const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;
-    const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;
+    const [directionRef, textDirection] = useDirection();
+    const direction = textDirection || 'ltr';
+    const setCanScrollStart = direction === 'ltr' ? setCanScrollLeft : setCanScrollRight;
+    const setCanScrollEnd = direction === 'ltr' ? setCanScrollRight : setCanScrollLeft;
     const isCustomScrollingRef = React.useRef(false);
     const scrollerRef = useExternRef(getRef, directionRef);
     const animationQueue = React.useRef([]);
@@ -102,7 +99,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
                 onScrollStart: ()=>isCustomScrollingRef.current = true,
                 initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,
                 scrollAnimationDuration,
-                textDirection
+                textDirection: direction
             }));
         if (animationQueue.current.length === 1) {
             animationQueue.current[0]();
@@ -110,7 +107,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
     }, [
         scrollerRef,
         scrollAnimationDuration,
-        textDirection,
+        direction,
         setCanScrollEnd
     ]);
     const scrollToLeft = React.useCallback(()=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } 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?: 'm' | 'l';\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   * TODO [>=7]: Сделать по умолчанию `true` (или удалить, применяя стили всегда)\n   */\n  inline?: 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 = SCROLL_ONE_FRAME_TIME,\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    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\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 = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  inline = 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 = 'ltr'] = useDirection<HTMLDivElement>();\n\n  const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n  const setCanScrollEnd = textDirection === '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,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, textDirection, 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  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n  React.useEffect(\n    function addScrollerRefToScrollEvent() {\n      if (!scrollerRef.current) {\n        return noop;\n      }\n\n      scrollEvent.add(scrollerRef.current);\n      return scrollEvent.remove;\n    },\n    [scrollEvent, scrollerRef],\n  );\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(\n    function addScrollerRefToWheelEvent() {\n      if (!scrollerRef.current || !scrollOnAnyWheel) {\n        return noop;\n      }\n\n      wheelEvent.add(scrollerRef.current);\n\n      return wheelEvent.remove;\n    },\n    [wheelEvent, scrollerRef, scrollOnAnyWheel],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        inline && styles['HorizontalScroll--inline'],\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useDirection","useEventListener","useExternRef","easeInOutSine","RootComponent","ScrollArrow","styles","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","inline","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","directionRef","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEffect","addScrollerRefToScrollEvent","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","baseClassName","onMouseEnter","undefined","data-testid","process","env","NODE_ENV","size","offsetY","direction","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } 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?: 'm' | 'l';\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   * TODO [>=7]: Сделать по умолчанию `true` (или удалить, применяя стили всегда)\n   */\n  inline?: 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 = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  inline = 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  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n  React.useEffect(\n    function addScrollerRefToScrollEvent() {\n      if (!scrollerRef.current) {\n        return noop;\n      }\n\n      scrollEvent.add(scrollerRef.current);\n      return scrollEvent.remove;\n    },\n    [scrollEvent, scrollerRef],\n  );\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(\n    function addScrollerRefToWheelEvent() {\n      if (!scrollerRef.current || !scrollOnAnyWheel) {\n        return noop;\n      }\n\n      wheelEvent.add(scrollerRef.current);\n\n      return wheelEvent.remove;\n    },\n    [wheelEvent, scrollerRef, scrollOnAnyWheel],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        inline && styles['HorizontalScroll--inline'],\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useDirection","useEventListener","useExternRef","easeInOutSine","RootComponent","ScrollArrow","styles","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","inline","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","directionRef","direction","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEffect","addScrollerRefToScrollEvent","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","baseClassName","onMouseEnter","undefined","data-testid","process","env","NODE_ENV","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';
 export type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };
-export declare const IMAGE_DEFAULT_SIZE = 48;
 export interface ImageProps extends Omit<ImageBaseProps, 'badge'> {
     /**
      * Размер закругления.

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

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/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;AAE5E,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/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"}

package/dist/cssm/components/Image/Image.js

@@ -4,7 +4,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { ImageBase } from '../ImageBase/ImageBase';
 import { ImageBadge } from './ImageBadge/ImageBadge';
 import styles from './Image.module.css';
-export const IMAGE_DEFAULT_SIZE = 48;
+const IMAGE_DEFAULT_SIZE = 48;
 const getBorderRadiusBySize = (size, borderRadius)=>{
     switch(borderRadius){
         case 's':

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\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\nexport const 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 = 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={{ ...borderStyles, ...style }}\n      className={classNames(\n        className,\n        styles['Image'],\n        borderStartStartRadius && styles['Image--borderStartStartRadius'],\n        borderStartEndRadius && styles['Image--borderStartEndRadius'],\n        borderEndStartRadius && styles['Image--borderEndStartRadius'],\n        borderEndEndRadius && styles['Image--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","ImageBase","ImageBadge","styles","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","displayName","Badge","Overlay"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,UAAU,QAA8B,0BAA0B;AAC3E,OAAOC,YAAY,qBAAqB;AAIxC,OAAO,MAAMC,qBAAqB,GAAG;AAyBrC,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,CAAC,EAAEJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAGT,CAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EACnB,GAAGC,WACQ;IACX,MAAMC,eAAepB,MAAMqB,OAAO,CAChC,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,KAACL;QACE,GAAGiB,SAAS;QACbD,WAAWA;QACXX,MAAMA;QACNS,OAAO;YAAE,GAAGI,YAAY;YAAE,GAAGJ,KAAK;QAAC;QACnCC,WAAWhB,WACTgB,WACAb,MAAM,CAAC,QAAQ,EACfQ,0BAA0BR,MAAM,CAAC,gCAAgC,EACjES,wBAAwBT,MAAM,CAAC,8BAA8B,EAC7DU,wBAAwBV,MAAM,CAAC,8BAA8B,EAC7DW,sBAAsBX,MAAM,CAAC,4BAA4B;;AAIjE,EAAE;AAEFO,MAAMW,WAAW,GAAG;AAEpBX,MAAMY,KAAK,GAAGpB;AACdQ,MAAMY,KAAK,CAACD,WAAW,GAAG;AAE1BX,MAAMa,OAAO,GAAGtB,UAAUsB,OAAO;AACjCb,MAAMa,OAAO,CAACF,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\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 = 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={{ ...borderStyles, ...style }}\n      className={classNames(\n        className,\n        styles['Image'],\n        borderStartStartRadius && styles['Image--borderStartStartRadius'],\n        borderStartEndRadius && styles['Image--borderStartEndRadius'],\n        borderEndStartRadius && styles['Image--borderEndStartRadius'],\n        borderEndEndRadius && styles['Image--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","ImageBase","ImageBadge","styles","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","displayName","Badge","Overlay"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,UAAU,QAA8B,0BAA0B;AAC3E,OAAOC,YAAY,qBAAqB;AAIxC,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,CAAC,EAAEJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAGT,CAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EACnB,GAAGC,WACQ;IACX,MAAMC,eAAepB,MAAMqB,OAAO,CAChC,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,KAACL;QACE,GAAGiB,SAAS;QACbD,WAAWA;QACXX,MAAMA;QACNS,OAAO;YAAE,GAAGI,YAAY;YAAE,GAAGJ,KAAK;QAAC;QACnCC,WAAWhB,WACTgB,WACAb,MAAM,CAAC,QAAQ,EACfQ,0BAA0BR,MAAM,CAAC,gCAAgC,EACjES,wBAAwBT,MAAM,CAAC,8BAA8B,EAC7DU,wBAAwBV,MAAM,CAAC,8BAA8B,EAC7DW,sBAAsBX,MAAM,CAAC,4BAA4B;;AAIjE,EAAE;AAEFO,MAAMW,WAAW,GAAG;AAEpBX,MAAMY,KAAK,GAAGpB;AACdQ,MAAMY,KAAK,CAACD,WAAW,GAAG;AAE1BX,MAAMa,OAAO,GAAGtB,UAAUsB,OAAO;AACjCb,MAAMa,OAAO,CAACF,WAAW,GAAG"}

package/dist/cssm/components/ImageBase/validators.js

@@ -51,7 +51,7 @@ export function validateFallbackIcon(imageSize, iconProp) {
     return validateIconComponentSizeByImageSize(imageSize, iconProp, getFallbackIconSizeByImageBaseSize, warnImageBase);
 }
 const mapOfExpectedSize = new Set(imageBaseSizes);
-const arrayOfSizes = Object.keys(mapOfExpectedSize).map((str)=>Number(str));
+const arrayOfSizes = Array.from(mapOfExpectedSize).map((str)=>Number(str));
 const maxSize = arrayOfSizes.reduce((maxSize, size)=>size > maxSize ? size : maxSize, 0);
 export function validateSize(imageSize) {
     if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n * Icon20TextHeading1Outline -> 20\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n\n  const match = /Icon(\\d+)/.exec(displayName);\n\n  return match ? Number(match[1]) : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp): void {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","match","exec","Number","parseIconSizeByWidthProp","width","size","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,qBAAqB;AAC9C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,YAAY;AACnB,SAASC,cAAc,QAAQ,UAAU;AAEzC;;;;;;;CAOC,GACD,SAASC,2BAA2BC,WAAoB;IACtD,IAAI,OAAOA,gBAAgB,UAAU;QACnC,OAAO;IACT;IAEA,MAAMC,QAAQ,YAAYC,IAAI,CAACF;IAE/B,OAAOC,QAAQE,OAAOF,KAAK,CAAC,EAAE,IAAI;AACpC;AAEA,SAASG,yBAAyBC,KAAc;IAC9C,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,UAAU;QAC1D,OAAO;IACT;IACA,MAAMC,OAAOH,OAAOE;IACpB,OAAOC,OAAO,IAAIA,OAAO;AAC3B;AAEA,SAASC,sBAAsBC,OAAoB;IACjD,OAAOA,QAAQC,IAAI,CAACT,WAAW,IAAI;AACrC;AAEA,SAASU,oBAAoBF,OAAoB;IAC/C,OAAOA,QAAQG,KAAK,CAACN,KAAK,IAAI;AAChC;AAEA,SAASO,qBAAqBJ,OAAoB;IAChD,MAAMK,oBAAoBd,2BAA2BQ,sBAAsBC;IAC3E,MAAMM,cAAcV,yBAAyBM,oBAAoBF;IACjE,OAAOM,cAAcA,cAAcD;AACrC;AAYA,SAASE,qCACPC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC;IAEnC,MAAMC,WAAWR,qBAAqBK,SAASI,KAAK;IAEpD,IAAID,aAAa,MAAM;QACrB;IACF;IAEA,MAAME,SAASJ,WAAWF;IAE1B,IAAIM,WAAWF,YAAaE,WAAWJ,WAAWK,QAAQ,IAAIH,YAAYE,QAAS;QACjF;IACF;IAEA,MAAME,WAAWjB,sBAAsBU,SAASI,KAAK;IACrD,MAAMI,cAAcD,WAAW,CAAC,EAAEP,SAASS,IAAI,CAAC,GAAG,EAAEF,SAAS,IAAI,CAAC,GAAGP,SAASS,IAAI;IAEnFP,OACE,CAAC,SAAS,EAAEM,YAAY,gDAAgD,EAAET,UAAU,wBAAwB,EAAEC,SAASS,IAAI,CAAC,+BAA+B,EAAEJ,OAAO,oDAAoD,EAAEE,SAAS,QAAQ,EAAEF,OAAO,UAAU,EAAEA,OAAO,IAAI,CAAC,EAC5Q;AAEJ;AAEA,MAAMK,gBAAgBjC,SAAS;AAE/B,OAAO,SAASkC,qBAAqBZ,SAAiB,EAAEC,QAAkB;IACxE,OAAOF,qCACLC,WACAC,UACArB,oCACA+B;AAEJ;AAEA,MAAME,oBAAoB,IAAIC,IAAYhC;AAE1C,MAAMiC,eAAeC,OAAOC,IAAI,CAACJ,mBAAmBK,GAAG,CAAC,CAACC,MAAQhC,OAAOgC;AACxE,MAAMC,UAAUL,aAAaM,MAAM,CAAC,CAACD,SAAS9B,OAAUA,OAAO8B,UAAU9B,OAAO8B,SAAU;AAE1F,OAAO,SAASE,aAAatB,SAAiB;IAC5C,IAAIA,YAAYoB,WAAWP,kBAAkBU,GAAG,CAACvB,YAAY;QAC3D;IACF;IACAW,cACE,CAAC,QAAQ,EAAEX,UAAU,0FAA0F,EAAEe,aAAaS,IAAI,CAChI,OACA,CAAC,EACH;AAEJ;AAEA,MAAMC,qBAAqB/C,SAAS;AAEpC,OAAO,SAASgD,kBAAkB1B,SAAiB,EAAEC,QAAkB;IACrE,IAAID,YAAY,MAAMC,UAAU;QAC9B,OAAOwB,mBAAmB,yCAAyC;IACrE;IACA1B,qCACEC,WACAC,UACAtB,iCACA8C;AAEJ;AAEA,MAAME,uBAAuBjD,SAAS;AAEtC,OAAO,SAASkD,oBAAoB5B,SAAiB,EAAEC,QAAkB;IACvEF,qCACEC,WACAC,UACApB,mCACA8C;AAEJ"}
+{"version":3,"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/**\n * Пример,\n *\n * Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n * Icon20TextHeading1Outline -> 20\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number | null {\n  if (typeof displayName !== 'string') {\n    return null;\n  }\n\n  const match = /Icon(\\d+)/.exec(displayName);\n\n  return match ? Number(match[1]) : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number | null {\n  if (typeof width !== 'string' && typeof width !== 'number') {\n    return null;\n  }\n  const size = Number(width);\n  return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string | null {\n  return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number | string | null {\n  return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number | null {\n  const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n  const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n  return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n  name: string;\n  value: JSX.Element;\n}\n\ninterface SelectorFn {\n  (imageSize: number): number;\n  MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n  imageSize: number,\n  iconProp: IconProp,\n  selectorFn: SelectorFn,\n  logger: ReturnType<typeof warnOnce>,\n) {\n  const iconSize = getIconSizeByElement(iconProp.value);\n\n  if (iconSize === null) {\n    return;\n  }\n\n  const result = selectorFn(imageSize);\n\n  if (result === iconSize || (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n    return;\n  }\n\n  const iconName = getElementDisplayName(iconProp.value);\n  const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n  logger(\n    `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n    'log',\n  );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp): void {\n  return validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getFallbackIconSizeByImageBaseSize,\n    warnImageBase,\n  );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Array.from(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n  if (imageSize > maxSize || mapOfExpectedSize.has(imageSize)) {\n    return;\n  }\n  warnImageBase(\n    `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n      ' | ',\n    )}`,\n    'log',\n  );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n  if (imageSize < 24 && iconProp) {\n    return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n  }\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getBadgeIconSizeByImageBaseSize,\n    warnImageBaseBadge,\n  );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n  validateIconComponentSizeByImageSize(\n    imageSize,\n    iconProp,\n    getOverlayIconSizeByImageBaseSize,\n    warnImageBaseOverlay,\n  );\n}\n"],"names":["warnOnce","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","imageBaseSizes","parseIconSizeByDisplayName","displayName","match","exec","Number","parseIconSizeByWidthProp","width","size","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","validateFallbackIcon","mapOfExpectedSize","Set","arrayOfSizes","Array","from","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","warnImageBaseOverlay","validateOverlayIcon"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,qBAAqB;AAC9C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,YAAY;AACnB,SAASC,cAAc,QAAQ,UAAU;AAEzC;;;;;;;CAOC,GACD,SAASC,2BAA2BC,WAAoB;IACtD,IAAI,OAAOA,gBAAgB,UAAU;QACnC,OAAO;IACT;IAEA,MAAMC,QAAQ,YAAYC,IAAI,CAACF;IAE/B,OAAOC,QAAQE,OAAOF,KAAK,CAAC,EAAE,IAAI;AACpC;AAEA,SAASG,yBAAyBC,KAAc;IAC9C,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,UAAU;QAC1D,OAAO;IACT;IACA,MAAMC,OAAOH,OAAOE;IACpB,OAAOC,OAAO,IAAIA,OAAO;AAC3B;AAEA,SAASC,sBAAsBC,OAAoB;IACjD,OAAOA,QAAQC,IAAI,CAACT,WAAW,IAAI;AACrC;AAEA,SAASU,oBAAoBF,OAAoB;IAC/C,OAAOA,QAAQG,KAAK,CAACN,KAAK,IAAI;AAChC;AAEA,SAASO,qBAAqBJ,OAAoB;IAChD,MAAMK,oBAAoBd,2BAA2BQ,sBAAsBC;IAC3E,MAAMM,cAAcV,yBAAyBM,oBAAoBF;IACjE,OAAOM,cAAcA,cAAcD;AACrC;AAYA,SAASE,qCACPC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC;IAEnC,MAAMC,WAAWR,qBAAqBK,SAASI,KAAK;IAEpD,IAAID,aAAa,MAAM;QACrB;IACF;IAEA,MAAME,SAASJ,WAAWF;IAE1B,IAAIM,WAAWF,YAAaE,WAAWJ,WAAWK,QAAQ,IAAIH,YAAYE,QAAS;QACjF;IACF;IAEA,MAAME,WAAWjB,sBAAsBU,SAASI,KAAK;IACrD,MAAMI,cAAcD,WAAW,CAAC,EAAEP,SAASS,IAAI,CAAC,GAAG,EAAEF,SAAS,IAAI,CAAC,GAAGP,SAASS,IAAI;IAEnFP,OACE,CAAC,SAAS,EAAEM,YAAY,gDAAgD,EAAET,UAAU,wBAAwB,EAAEC,SAASS,IAAI,CAAC,+BAA+B,EAAEJ,OAAO,oDAAoD,EAAEE,SAAS,QAAQ,EAAEF,OAAO,UAAU,EAAEA,OAAO,IAAI,CAAC,EAC5Q;AAEJ;AAEA,MAAMK,gBAAgBjC,SAAS;AAE/B,OAAO,SAASkC,qBAAqBZ,SAAiB,EAAEC,QAAkB;IACxE,OAAOF,qCACLC,WACAC,UACArB,oCACA+B;AAEJ;AAEA,MAAME,oBAAoB,IAAIC,IAAYhC;AAE1C,MAAMiC,eAAeC,MAAMC,IAAI,CAACJ,mBAAmBK,GAAG,CAAC,CAACC,MAAQhC,OAAOgC;AACvE,MAAMC,UAAUL,aAAaM,MAAM,CAAC,CAACD,SAAS9B,OAAUA,OAAO8B,UAAU9B,OAAO8B,SAAU;AAE1F,OAAO,SAASE,aAAatB,SAAiB;IAC5C,IAAIA,YAAYoB,WAAWP,kBAAkBU,GAAG,CAACvB,YAAY;QAC3D;IACF;IACAW,cACE,CAAC,QAAQ,EAAEX,UAAU,0FAA0F,EAAEe,aAAaS,IAAI,CAChI,OACA,CAAC,EACH;AAEJ;AAEA,MAAMC,qBAAqB/C,SAAS;AAEpC,OAAO,SAASgD,kBAAkB1B,SAAiB,EAAEC,QAAkB;IACrE,IAAID,YAAY,MAAMC,UAAU;QAC9B,OAAOwB,mBAAmB,yCAAyC;IACrE;IACA1B,qCACEC,WACAC,UACAtB,iCACA8C;AAEJ;AAEA,MAAME,uBAAuBjD,SAAS;AAEtC,OAAO,SAASkD,oBAAoB5B,SAAiB,EAAEC,QAAkB;IACvEF,qCACEC,WACAC,UACApB,mCACA8C;AAEJ"}

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

@@ -1,5 +1,6 @@
 .List {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
 }
 
 .List__placeholder {