@vkontakte/vkui 7.1.3 → 7.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldClearButton.d.ts","sourceRoot":"","sources":["../../../src/components/FormFieldClearButton/FormFieldClearButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,yCAI9B,yBAAyB,KAAG,KAAK,CAAC,SAoBpC,CAAC"}
+{"version":3,"file":"FormFieldClearButton.d.ts","sourceRoot":"","sources":["../../../src/components/FormFieldClearButton/FormFieldClearButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,GAAI,sCAIlC,yBAAyB,KAAG,KAAK,CAAC,SAoBpC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"FormLayoutGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASxE,MAAM,WAAW,oBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,cAAc;IAChB,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,oGASzB,oBAAoB,KAAG,KAAK,CAAC,SA0C/B,CAAC"}
+{"version":3,"file":"FormLayoutGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASxE,MAAM,WAAW,oBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,cAAc;IAChB,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,iGAS7B,oBAAoB,KAAG,KAAK,CAAC,SA0C/B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"FormStatus.d.ts","sourceRoot":"","sources":["../../../src/components/FormStatus/FormStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,6DAOpB,eAAe,KAAG,KAAK,CAAC,SAc1B,CAAC"}
+{"version":3,"file":"FormStatus.d.ts","sourceRoot":"","sources":["../../../src/components/FormStatus/FormStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,0DAOxB,eAAe,KAAG,KAAK,CAAC,SAc1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,kGASjB,YAAY,KAAG,KAAK,CAAC,SAwDvB,CAAC"}
+{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,+FASrB,YAAY,KAAG,KAAK,CAAC,SAwDvB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../src/components/Gradient/Gradient.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS7D,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,+BAIlB,aAAa,KAAG,KAAK,CAAC,SAYxB,CAAC"}
+{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../src/components/Gradient/Gradient.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS7D,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,4BAItB,aAAa,KAAG,KAAK,CAAC,SAYxB,CAAC"}

package/dist/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridAvatarBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,KAAK,mBAAmB,EAAoB,MAAM,2BAA2B,CAAC;AAGlG,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,CAAC;AAEvD,eAAO,MAAM,eAAe,gCAGzB,oBAAoB,KAAG,KAAK,CAAC,SAQ/B,CAAC"}
+{"version":3,"file":"GridAvatarBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,KAAK,mBAAmB,EAAoB,MAAM,2BAA2B,CAAC;AAGlG,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,CAAC;AAEvD,eAAO,MAAM,eAAe,GAAI,6BAG7B,oBAAoB,KAAG,KAAK,CAAC,SAQ/B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU3E,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,YAAY;IACvF,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,iBAAiB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAwCD;;GAEG;AACH,eAAO,MAAM,MAAM,0KAehB,WAAW,KAAG,KAAK,CAAC,SA8CtB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU3E,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,YAAY;IACvF,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,iBAAiB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAwCD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,uKAepB,WAAW,KAAG,KAAK,CAAC,SA8CtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCell.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAuB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAMpE,eAAO,MAAM,+BAA+B,gCAAgC,CAAC;AAe7E,KAAK,mBAAmB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,kBAAkB,CAAC,EAC/E,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACpC;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,iJAcxB,mBAAmB,KAAG,KAAK,CAAC,SAuC9B,CAAC"}
+{"version":3,"file":"HorizontalCell.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAuB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAMpE,eAAO,MAAM,+BAA+B,gCAAgC,CAAC;AAe7E,KAAK,mBAAmB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,kBAAkB,CAAC,EAC/E,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACpC;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,8IAc5B,mBAAmB,KAAG,KAAK,CAAC,SAuC9B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCellShowMore.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAQ9E,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,MAAM,GAAG,kBAAkB,CAAC,EACrE,MAAM,CAAC,WAAW,CAAC,EACnB,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC7C;;;;OAIG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;SAGK;IACL,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,6FAUhC,2BAA2B,KAAG,KAAK,CAAC,SA4BtC,CAAC"}
+{"version":3,"file":"HorizontalCellShowMore.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAQ9E,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,MAAM,GAAG,kBAAkB,CAAC,EACrE,MAAM,CAAC,WAAW,CAAC,EACnB,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC7C;;;;OAIG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;SAGK;IACL,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,GAAI,0FAUpC,2BAA2B,KAAG,KAAK,CAAC,SA4BtC,CAAC"}

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

@@ -31,9 +31,21 @@ export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDiv
      * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента
      */
     nextButtonTestId?: string;
+    /**
+     * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`
+     */
+    ContentWrapperComponent?: React.ElementType;
+    /**
+     * `ref` для обертки над контентом, прокинутым в `children`
+     */
+    contentWrapperRef?: React.Ref<HTMLElement>;
+    /**
+     * Специфичный `className` для обертки над контентом, прокинутым в `children`
+     */
+    contentWrapperClassName?: string;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, prevButtonTestId, nextButtonTestId, ...restProps }: HorizontalScrollProps) => React.ReactNode;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, prevButtonTestId, nextButtonTestId, ContentWrapperComponent, contentWrapperRef, contentWrapperClassName, ...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;AAO/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,SA0IhC,CAAC"}
+{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/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;IAC1B;;OAEG;IACH,uBAAuB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC5C;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3C;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AA6GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,gQAiB9B,qBAAqB,KAAG,KAAK,CAAC,SA+IhC,CAAC"}

package/dist/components/HorizontalScroll/HorizontalScroll.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames, noop } from "@vkontakte/vkjs";
 import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer.js";
-import { useDirection } from "../../hooks/useDirection.js";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { easeInOutSine } from "../../lib/fx.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
@@ -47,8 +47,13 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
     /**
    * крайнее значение сдвига
    */ const extremeScrollLeft = (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);
-    let startScrollLeft = roundUpElementScrollLeft(scrollElement);
-    let endScrollLeft = getScrollPosition(startScrollLeft);
+    const startScrollLeft = roundUpElementScrollLeft(scrollElement);
+    const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);
+    let endScrollLeft = getScrollPosition(remappedStartScrollLeft);
+    const diff = endScrollLeft - remappedStartScrollLeft;
+    if (textDirection === 'rtl') {
+        endScrollLeft = startScrollLeft - diff;
+    }
     onScrollStart();
     /**
    * Если окончание прокрутки вышло за ноль
@@ -81,7 +86,8 @@ 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, prevButtonTestId, nextButtonTestId } = _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, // ContentWrapper
+    ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName } = _param, restProps = _object_without_properties(_param, [
         "children",
         "getScrollToLeft",
         "getScrollToRight",
@@ -92,16 +98,17 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         "getRef",
         "scrollOnAnyWheel",
         "prevButtonTestId",
-        "nextButtonTestId"
+        "nextButtonTestId",
+        "ContentWrapperComponent",
+        "contentWrapperRef",
+        "contentWrapperClassName"
     ]);
-    const [canScrollLeft, setCanScrollLeft] = React.useState(false);
-    const [canScrollRight, setCanScrollRight] = React.useState(false);
-    const [directionRef, textDirection] = useDirection();
-    const direction = textDirection || 'ltr';
-    const setCanScrollStart = direction === 'ltr' ? setCanScrollLeft : setCanScrollRight;
-    const setCanScrollEnd = direction === 'ltr' ? setCanScrollRight : setCanScrollLeft;
+    const [canScrollStart, setCanScrollStart] = React.useState(false);
+    const [canScrollEnd, setCanScrollEnd] = React.useState(false);
+    const direction = useConfigDirection();
+    const isRtl = direction === 'rtl';
     const isCustomScrollingRef = React.useRef(false);
-    const scrollerRef = useExternRef(getRef, directionRef);
+    const scrollerRef = useExternRef(getRef);
     const animationQueue = React.useRef([]);
     const hasPointer = useAdaptivityHasPointer();
     const scrollTo = React.useCallback((getScrollPosition)=>{
@@ -129,7 +136,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         direction,
         setCanScrollEnd
     ]);
-    const scrollToLeft = React.useCallback(()=>{
+    const scrollToStart = React.useCallback(()=>{
         const getScrollPosition = getScrollToLeft !== null && getScrollToLeft !== void 0 ? getScrollToLeft : (i)=>i - scrollerRef.current.offsetWidth;
         scrollTo(getScrollPosition);
     }, [
@@ -137,7 +144,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         scrollTo,
         scrollerRef
     ]);
-    const scrollToRight = React.useCallback(()=>{
+    const scrollToEnd = React.useCallback(()=>{
         const getScrollPosition = getScrollToRight !== null && getScrollToRight !== void 0 ? getScrollToRight : (i)=>i + scrollerRef.current.offsetWidth;
         scrollTo(getScrollPosition);
     }, [
@@ -148,15 +155,15 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
     const calculateArrowsVisibility = React.useCallback(()=>{
         if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
             const scrollElement = scrollerRef.current;
-            setCanScrollStart(scrollElement.scrollLeft !== 0);
+            const scrollLeft = scrollElement.scrollLeft;
+            setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);
             setCanScrollEnd(Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth < scrollElement.scrollWidth);
         }
     }, [
         showArrows,
         hasPointer,
         scrollerRef,
-        setCanScrollStart,
-        setCanScrollEnd
+        isRtl
     ]);
     React.useEffect(calculateArrowsVisibility, [
         calculateArrowsVisibility,
@@ -197,10 +204,10 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         scrollerRef
     ]);
     return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, restProps), {
-        baseClassName: classNames("vkuiHorizontalScroll__host", 'vkuiInternalHorizontalScroll', showArrows === 'always' && "vkuiHorizontalScroll__withConstArrows"),
+        baseClassName: classNames("vkuiHorizontalScroll__host", 'vkuiInternalHorizontalScroll', showArrows === 'always' && "vkuiHorizontalScroll__withConstArrows", isRtl && "vkuiHorizontalScroll__rtl"),
         onMouseEnter: calculateArrowsVisibility,
         children: [
-            showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ _jsx(ScrollArrow, {
+            showArrows && (hasPointer || hasPointer === undefined) && canScrollStart && /*#__PURE__*/ _jsx(ScrollArrow, {
                 "data-testid": prevButtonTestId,
                 size: arrowSize,
                 offsetY: arrowOffsetY,
@@ -208,9 +215,9 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
                 "aria-hidden": true,
                 tabIndex: -1,
                 className: classNames("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowLeft"),
-                onClick: scrollToLeft
+                onClick: scrollToStart
             }),
-            showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ _jsx(ScrollArrow, {
+            showArrows && (hasPointer || hasPointer === undefined) && canScrollEnd && /*#__PURE__*/ _jsx(ScrollArrow, {
                 "data-testid": nextButtonTestId,
                 size: arrowSize,
                 offsetY: arrowOffsetY,
@@ -218,13 +225,14 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
                 "aria-hidden": true,
                 tabIndex: -1,
                 className: classNames("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowRight"),
-                onClick: scrollToRight
+                onClick: scrollToEnd
             }),
             /*#__PURE__*/ _jsx("div", {
                 className: "vkuiHorizontalScroll__in",
                 ref: scrollerRef,
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: "vkuiHorizontalScroll__inWrapper",
+                children: /*#__PURE__*/ _jsx(ContentWrapperComponent, {
+                    className: classNames("vkuiHorizontalScroll__inWrapper", contentWrapperClassName),
+                    ref: contentWrapperRef,
                     children: children
                 })
             })

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, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\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  useIsomorphicLayoutEffect(\n    function addWheelEventHandler() {\n      const scrollEl = scrollerRef.current;\n      if (!scrollEl) {\n        return noop;\n      }\n      /**\n       * Прокрутка с помощью любого колеса мыши\n       */\n      const onWheel = (e: WheelEvent) => {\n        scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n        e.preventDefault();\n      };\n\n      const listenerOptions = { passive: false };\n\n      if (scrollOnAnyWheel) {\n        scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n      }\n      scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n      return () => {\n        if (scrollOnAnyWheel) {\n          // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n          scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n        }\n        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n        scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n      };\n    },\n    [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\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        />\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        />\n      )}\n      <div className={styles.in} ref={scrollerRef}>\n        <div className={styles.inWrapper}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useDirection","useExternRef","easeInOutSine","useIsomorphicLayoutEffect","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","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","baseClassName","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\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   * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`\n   */\n  ContentWrapperComponent?: React.ElementType;\n  /**\n   * `ref` для обертки над контентом, прокинутым в `children`\n   */\n  contentWrapperRef?: React.Ref<HTMLElement>;\n  /**\n   * Специфичный `className` для обертки над контентом, прокинутым в `children`\n   */\n  contentWrapperClassName?: 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  const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n  let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n  const diff = endScrollLeft - remappedStartScrollLeft;\n  if (textDirection === 'rtl') {\n    endScrollLeft = startScrollLeft - diff;\n  }\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  // ContentWrapper\n  ContentWrapperComponent = 'div',\n  contentWrapperRef,\n  contentWrapperClassName,\n  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\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 scrollToStart = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToEnd = 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      const scrollLeft = scrollElement.scrollLeft;\n\n      setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, hasPointer, scrollerRef, isRtl]);\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  useIsomorphicLayoutEffect(\n    function addWheelEventHandler() {\n      const scrollEl = scrollerRef.current;\n      if (!scrollEl) {\n        return noop;\n      }\n      /**\n       * Прокрутка с помощью любого колеса мыши\n       */\n      const onWheel = (e: WheelEvent) => {\n        scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n        e.preventDefault();\n      };\n\n      const listenerOptions = { passive: false };\n\n      if (scrollOnAnyWheel) {\n        scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n      }\n      scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n      return () => {\n        if (scrollOnAnyWheel) {\n          // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n          scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n        }\n        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n        scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n      };\n    },\n    [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles.withConstArrows,\n        isRtl && styles.rtl,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollStart && (\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={scrollToStart}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollEnd && (\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={scrollToEnd}\n        />\n      )}\n      <div className={styles.in} ref={scrollerRef}>\n        <ContentWrapperComponent\n          className={classNames(styles.inWrapper, contentWrapperClassName)}\n          ref={contentWrapperRef}\n        >\n          {children}\n        </ContentWrapperComponent>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useConfigDirection","useExternRef","easeInOutSine","useIsomorphicLayoutEffect","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","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","baseClassName","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AASpE,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,sCAAuC,eAAe,KAAG,KAAK,CAAC,SAgCrF,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AASpE,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,mCAAmC,eAAe,KAAG,KAAK,CAAC,SAgCrF,CAAC"}

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

@@ -67,6 +67,11 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
      * см. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming
      */
     elementTiming?: string;
+    /**
+     * Пользовательское значения стиля filter
+     * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter)
+     */
+    filter?: React.CSSProperties['filter'];
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase

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":"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;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;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;CAsK5C,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;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACxC;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;CA4K5C,CAAC"}

package/dist/components/ImageBase/ImageBase.js

@@ -49,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', objectPosition, keepAspectRatio = false, getRootRef, elementTiming } = _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, filter, keepAspectRatio = false, getRootRef, elementTiming } = _param, restProps = _object_without_properties(_param, [
         "alt",
         "crossOrigin",
         "decoding",
@@ -74,6 +74,7 @@ const sizeToNumber = (size)=>{
         "withTransparentBackground",
         "objectFit",
         "objectPosition",
+        "filter",
         "keepAspectRatio",
         "getRootRef",
         "elementTiming"
@@ -142,8 +143,9 @@ const sizeToNumber = (size)=>{
         }), [
         size
     ]);
-    const imgStyles = objectPosition ? {
-        '--vkui_internal--ImageBase_object_position': objectPosition
+    const imgStyles = objectPosition || filter ? {
+        '--vkui_internal--ImageBase_object_position': objectPosition,
+        '--vkui_internal--ImageBase_object_filter': filter
     } : undefined;
     const keepAspectRationStyles = keepAspectRatio ? {
         width: widthImg || width,
@@ -165,7 +167,7 @@ const sizeToNumber = (size)=>{
                 hasSrc && /*#__PURE__*/ _jsx("img", _object_spread({
                     ref: imgRef,
                     alt: alt,
-                    className: classNames("vkuiImageBase__img", getObjectFitClassName(objectFit), objectPosition && "vkuiImageBase__withObjectPosition", keepAspectRatio && "vkuiImageBase__imgKeepRatio"),
+                    className: classNames("vkuiImageBase__img", getObjectFitClassName(objectFit), objectPosition && "vkuiImageBase__withObjectPosition", filter && "vkuiImageBase__withFilter", keepAspectRatio && "vkuiImageBase__imgKeepRatio"),
                     crossOrigin: crossOrigin,
                     decoding: decoding,
                     loading: loading,

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

@@ -1 +1 @@
-{"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   * см. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming\n   */\n  elementTiming?: string;\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  elementTiming,\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            // @ts-expect-error: TS2322 отсутствует в @types/react\n            elementtiming={elementTiming} // eslint-disable-line react/no-unknown-property\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","elementTiming","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","elementtiming","div","aria-hidden","displayName","Badge","Overlay","FloatElement"],"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   * см. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming\n   */\n  elementTiming?: string;\n  /**\n   * Пользовательское значения стиля filter\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter)\n   */\n  filter?: React.CSSProperties['filter'];\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  filter,\n  keepAspectRatio = false,\n  getRootRef,\n  elementTiming,\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:\n    | CSSCustomProperties<React.CSSProperties['objectPosition'] | React.CSSProperties['filter']>\n    | undefined =\n    objectPosition || filter\n      ? {\n          '--vkui_internal--ImageBase_object_position': objectPosition,\n          '--vkui_internal--ImageBase_object_filter': filter,\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              filter && styles.withFilter,\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            // @ts-expect-error: TS2322 отсутствует в @types/react\n            elementtiming={elementTiming} // eslint-disable-line react/no-unknown-property\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","filter","keepAspectRatio","getRootRef","elementTiming","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","elementtiming","div","aria-hidden","displayName","Badge","Overlay","FloatElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAuBvE,eAAO,MAAM,aAAa,WAChB,uBAAuB,GAAG,SAAS,eAC9B,MAAM,cACP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KACjC,CAAC,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAYtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,SAE3D,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAuBvE,eAAO,MAAM,aAAa,GACxB,QAAQ,uBAAuB,GAAG,SAAS,EAC3C,aAAa,MAAM,EACnB,YAAY,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KACjC,CAAC,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAYtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,CAAC,SAE3D,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,gCAAgC,EAChC,mCAAmC,EACpC,MAAM,SAAS,CAAC;AAejB,MAAM,MAAM,qBAAqB,GAC7B,gCAAgC,GAChC,mCAAmC,CAAC;AAsDxC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6B5D,CAAC"}
+{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EACV,gCAAgC,EAChC,mCAAmC,EACpC,MAAM,SAAS,CAAC;AAejB,MAAM,MAAM,qBAAqB,GAC7B,gCAAgC,GAChC,mCAAmC,CAAC;AAsDxC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+B5D,CAAC"}

package/dist/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js

@@ -5,7 +5,6 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
-import { useAdaptivityHasPointer } from "../../../hooks/useAdaptivityHasPointer.js";
 import { useColorScheme } from "../../../hooks/useColorScheme.js";
 import { useExternRef } from "../../../hooks/useExternRef.js";
 import { useFocusVisible } from "../../../hooks/useFocusVisible.js";
@@ -13,7 +12,7 @@ import { useFocusVisibleClassName } from "../../../hooks/useFocusVisibleClassNam
 import { clickByKeyboardHandler } from "../../../lib/utils.js";
 import { ImageBaseContext } from "../context.js";
 import { validateOverlayIcon } from "../validators.js";
-import { useNonInteractiveOverlayProps } from "./hooks.js";
+import { useCalculatedDefaultVisibility, useNonInteractiveOverlayProps } from "./hooks.js";
 function DevelopmentCheck({ children }) {
     const { size } = React.useContext(ImageBaseContext);
     if (process.env.NODE_ENV === 'development') {
@@ -80,10 +79,10 @@ const ImageBaseOverlayNonInteractive = (_param)=>{
         "visibility"
     ]);
     const colorScheme = useColorScheme();
-    const hasPointer = useAdaptivityHasPointer();
     const theme = themeProp !== null && themeProp !== void 0 ? themeProp : colorScheme;
-    const visibility = visibilityProp !== null && visibilityProp !== void 0 ? visibilityProp : hasPointer ? 'on-hover' : 'always';
     const commonClassNames = classNames("vkuiImageBaseOverlay__host", theme === 'light' && "vkuiImageBaseOverlay__themeLight", theme === 'dark' && "vkuiImageBaseOverlay__themeDark", className);
+    const defaultVisibility = useCalculatedDefaultVisibility();
+    const visibility = visibilityProp !== null && visibilityProp !== void 0 ? visibilityProp : defaultVisibility;
     const commonProps = {
         className: commonClassNames,
         overlayShown: visibility === 'always'

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useColorScheme } from '../../../hooks/useColorScheme';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { clickByKeyboardHandler } from '../../../lib/utils';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useNonInteractiveOverlayProps } from './hooks';\nimport type {\n  ImageBaseOverlayInteractiveProps,\n  ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseOverlayInteractiveProps, 'children'>) {\n  const { size } = React.useContext(ImageBaseContext);\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return null;\n}\n\nexport type ImageBaseOverlayProps =\n  | ImageBaseOverlayInteractiveProps\n  | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n  children,\n  className,\n  getRootRef,\n  overlayShown,\n  ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n\n  return (\n    <>\n      <div\n        {...restProps}\n        tabIndex={0}\n        role=\"button\"\n        className={classNames(\n          styles.clickable,\n          (focusVisible || overlayShown) && styles.visible,\n          focusVisibleClassNames,\n          className,\n        )}\n        ref={getRootRef}\n        onKeyDown={clickByKeyboardHandler}\n        {...focusEvents}\n      >\n        {children}\n      </div>\n      {process.env.NODE_ENV === 'development' && <DevelopmentCheck>{children}</DevelopmentCheck>}\n    </>\n  );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n  className,\n  getRootRef,\n  overlayShown: overlayShownProps,\n  ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n  const rootRef = useExternRef(getRootRef);\n  const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n  return (\n    <div\n      {...restProps}\n      ref={rootRef}\n      className={classNames((overlayShown || overlayShownProps) && styles.visible, className)}\n      onClick={onOverlayClick}\n    />\n  );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const colorScheme = useColorScheme();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? colorScheme;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  const commonClassNames = classNames(\n    styles.host,\n    theme === 'light' && styles.themeLight,\n    theme === 'dark' && styles.themeDark,\n    className,\n  );\n\n  const commonProps = {\n    className: commonClassNames,\n    overlayShown: visibility === 'always',\n  };\n\n  // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n  if (!restProps.onClick) {\n    return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n  }\n\n  return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["React","classNames","useAdaptivityHasPointer","useColorScheme","useExternRef","useFocusVisible","useFocusVisibleClassName","clickByKeyboardHandler","ImageBaseContext","validateOverlayIcon","useNonInteractiveOverlayProps","DevelopmentCheck","children","size","useContext","process","env","NODE_ENV","name","value","ImageBaseOverlayInteractive","className","getRootRef","overlayShown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","div","tabIndex","role","ref","onKeyDown","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","shown","onClick","onOverlayClick","ImageBaseOverlay","theme","themeProp","visibility","visibilityProp","colorScheme","hasPointer","commonClassNames","commonProps","displayName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,4CAAyC;AACjF,SAASC,cAAc,QAAQ,mCAAgC;AAC/D,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,sBAAsB,QAAQ,wBAAqB;AAC5D,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,mBAAmB,QAAQ,mBAAgB;AACpD,SAASC,6BAA6B,QAAQ,aAAU;AAOxD,SAASC,iBAAiB,EAAEC,QAAQ,EAAsD;IACxF,MAAM,EAAEC,IAAI,EAAE,GAAGb,MAAMc,UAAU,CAACN;IAElC,IAAIO,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZH,oBAAoBI,MAAM;gBAAEK,MAAM;gBAAYC,OAAOP;YAAS;QAChE;IACF;IAEA,OAAO;AACT;AAMA,MAAMQ,8BAA8B;QAAC,EACnCR,QAAQ,EACRS,SAAS,EACTC,UAAU,EACVC,YAAY,EAEkD,WAD3DC;QAJHZ;QACAS;QACAC;QACAC;;IAGA,MAAyClB,mBAAAA,mBAAnC,EAAEoB,YAAY,EAAkB,GAAGpB,kBAAhBqB,yCAAgBrB;QAAjCoB;;IACR,MAAME,yBAAyBrB,yBAAyB;QAAEmB;QAAcG,MAAM;IAAS;IAEvF,qBACE;;0BACE,KAACC,mFACKL;gBACJM,UAAU;gBACVC,MAAK;gBACLV,WAAWpB,8CAET,AAACwB,CAAAA,gBAAgBF,YAAW,sCAC5BI,wBACAN;gBAEFW,KAAKV;gBACLW,WAAW1B;gBACPmB;0BAEHd;;YAEFG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BAAiB,KAACN;0BAAkBC;;;;AAGpE;AAEA,MAAMsB,iCAAiC;QAAC,EACtCb,SAAS,EACTC,UAAU,EACVC,cAAcY,iBAAiB,EAEkC,WAD9DX;QAHHH;QACAC;QACAC;;IAGA,MAAMa,UAAUhC,aAAakB;IAC7B,MAAM,EAAEe,OAAOd,YAAY,EAAEe,SAASC,cAAc,EAAE,GAAG7B,8BAA8B0B;IAEvF,qBACE,KAACP,+CACKL;QACJQ,KAAKI;QACLf,WAAWpB,WAAW,AAACsB,CAAAA,gBAAgBY,iBAAgB,sCAAsBd;QAC7EiB,SAASC;;AAGf;AAEA;;CAEC,GACD,OAAO,MAAMC,mBAAoD;QAAC,EAChEnB,SAAS,EACToB,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAEJ,WADnBpB;QAHHH;QACAoB;QACAE;;IAGA,MAAME,cAAc1C;IACpB,MAAM2C,aAAa5C;IACnB,MAAMuC,QAAQC,sBAAAA,uBAAAA,YAAaG;IAC3B,MAAMF,aAAaC,2BAAAA,4BAAAA,iBAAmBE,aAAa,aAAa;IAEhE,MAAMC,mBAAmB9C,yCAEvBwC,UAAU,+CACVA,UAAU,6CACVpB;IAGF,MAAM2B,cAAc;QAClB3B,WAAW0B;QACXxB,cAAcoB,eAAe;IAC/B;IAEA,qEAAqE;IACrE,IAAI,CAACnB,UAAUc,OAAO,EAAE;QACtB,qBAAO,KAACJ,mDAAmCV,WAAewB;IAC5D;IAEA,qBAAO,KAAC5B,gDAAgCI,WAAewB;AACzD,EAAE;AAEFR,iBAAiBS,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useColorScheme } from '../../../hooks/useColorScheme';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { clickByKeyboardHandler } from '../../../lib/utils';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useCalculatedDefaultVisibility, useNonInteractiveOverlayProps } from './hooks';\nimport type {\n  ImageBaseOverlayInteractiveProps,\n  ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseOverlayInteractiveProps, 'children'>) {\n  const { size } = React.useContext(ImageBaseContext);\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return null;\n}\n\nexport type ImageBaseOverlayProps =\n  | ImageBaseOverlayInteractiveProps\n  | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n  children,\n  className,\n  getRootRef,\n  overlayShown,\n  ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n\n  return (\n    <>\n      <div\n        {...restProps}\n        tabIndex={0}\n        role=\"button\"\n        className={classNames(\n          styles.clickable,\n          (focusVisible || overlayShown) && styles.visible,\n          focusVisibleClassNames,\n          className,\n        )}\n        ref={getRootRef}\n        onKeyDown={clickByKeyboardHandler}\n        {...focusEvents}\n      >\n        {children}\n      </div>\n      {process.env.NODE_ENV === 'development' && <DevelopmentCheck>{children}</DevelopmentCheck>}\n    </>\n  );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n  className,\n  getRootRef,\n  overlayShown: overlayShownProps,\n  ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n  const rootRef = useExternRef(getRootRef);\n  const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n  return (\n    <div\n      {...restProps}\n      ref={rootRef}\n      className={classNames((overlayShown || overlayShownProps) && styles.visible, className)}\n      onClick={onOverlayClick}\n    />\n  );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const colorScheme = useColorScheme();\n\n  const theme = themeProp ?? colorScheme;\n\n  const commonClassNames = classNames(\n    styles.host,\n    theme === 'light' && styles.themeLight,\n    theme === 'dark' && styles.themeDark,\n    className,\n  );\n\n  const defaultVisibility = useCalculatedDefaultVisibility();\n  const visibility = visibilityProp ?? defaultVisibility;\n\n  const commonProps = {\n    className: commonClassNames,\n    overlayShown: visibility === 'always',\n  };\n\n  // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n  if (!restProps.onClick) {\n    return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n  }\n\n  return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["React","classNames","useColorScheme","useExternRef","useFocusVisible","useFocusVisibleClassName","clickByKeyboardHandler","ImageBaseContext","validateOverlayIcon","useCalculatedDefaultVisibility","useNonInteractiveOverlayProps","DevelopmentCheck","children","size","useContext","process","env","NODE_ENV","name","value","ImageBaseOverlayInteractive","className","getRootRef","overlayShown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","div","tabIndex","role","ref","onKeyDown","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","shown","onClick","onOverlayClick","ImageBaseOverlay","theme","themeProp","visibility","visibilityProp","colorScheme","commonClassNames","defaultVisibility","commonProps","displayName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,cAAc,QAAQ,mCAAgC;AAC/D,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,sBAAsB,QAAQ,wBAAqB;AAC5D,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,mBAAmB,QAAQ,mBAAgB;AACpD,SAASC,8BAA8B,EAAEC,6BAA6B,QAAQ,aAAU;AAOxF,SAASC,iBAAiB,EAAEC,QAAQ,EAAsD;IACxF,MAAM,EAAEC,IAAI,EAAE,GAAGb,MAAMc,UAAU,CAACP;IAElC,IAAIQ,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZJ,oBAAoBK,MAAM;gBAAEK,MAAM;gBAAYC,OAAOP;YAAS;QAChE;IACF;IAEA,OAAO;AACT;AAMA,MAAMQ,8BAA8B;QAAC,EACnCR,QAAQ,EACRS,SAAS,EACTC,UAAU,EACVC,YAAY,EAEkD,WAD3DC;QAJHZ;QACAS;QACAC;QACAC;;IAGA,MAAyCnB,mBAAAA,mBAAnC,EAAEqB,YAAY,EAAkB,GAAGrB,kBAAhBsB,yCAAgBtB;QAAjCqB;;IACR,MAAME,yBAAyBtB,yBAAyB;QAAEoB;QAAcG,MAAM;IAAS;IAEvF,qBACE;;0BACE,KAACC,mFACKL;gBACJM,UAAU;gBACVC,MAAK;gBACLV,WAAWpB,8CAET,AAACwB,CAAAA,gBAAgBF,YAAW,sCAC5BI,wBACAN;gBAEFW,KAAKV;gBACLW,WAAW3B;gBACPoB;0BAEHd;;YAEFG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BAAiB,KAACN;0BAAkBC;;;;AAGpE;AAEA,MAAMsB,iCAAiC;QAAC,EACtCb,SAAS,EACTC,UAAU,EACVC,cAAcY,iBAAiB,EAEkC,WAD9DX;QAHHH;QACAC;QACAC;;IAGA,MAAMa,UAAUjC,aAAamB;IAC7B,MAAM,EAAEe,OAAOd,YAAY,EAAEe,SAASC,cAAc,EAAE,GAAG7B,8BAA8B0B;IAEvF,qBACE,KAACP,+CACKL;QACJQ,KAAKI;QACLf,WAAWpB,WAAW,AAACsB,CAAAA,gBAAgBY,iBAAgB,sCAAsBd;QAC7EiB,SAASC;;AAGf;AAEA;;CAEC,GACD,OAAO,MAAMC,mBAAoD;QAAC,EAChEnB,SAAS,EACToB,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAEJ,WADnBpB;QAHHH;QACAoB;QACAE;;IAGA,MAAME,cAAc3C;IAEpB,MAAMuC,QAAQC,sBAAAA,uBAAAA,YAAaG;IAE3B,MAAMC,mBAAmB7C,yCAEvBwC,UAAU,+CACVA,UAAU,6CACVpB;IAGF,MAAM0B,oBAAoBtC;IAC1B,MAAMkC,aAAaC,2BAAAA,4BAAAA,iBAAkBG;IAErC,MAAMC,cAAc;QAClB3B,WAAWyB;QACXvB,cAAcoB,eAAe;IAC/B;IAEA,qEAAqE;IACrE,IAAI,CAACnB,UAAUc,OAAO,EAAE;QACtB,qBAAO,KAACJ,mDAAmCV,WAAewB;IAC5D;IAEA,qBAAO,KAAC5B,gDAAgCI,WAAewB;AACzD,EAAE;AAEFR,iBAAiBS,WAAW,GAAG"}

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

@@ -3,4 +3,5 @@ export declare function useNonInteractiveOverlayProps(rootRef: React.RefObject<H
     shown: boolean;
     onClick: (event: React.MouseEvent) => void;
 };
+export declare function useCalculatedDefaultVisibility(): "always" | "on-hover";
 //# sourceMappingURL=hooks.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseOverlay/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;qBAIhE,KAAK,CAAC,UAAU;EAiBzC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseOverlay/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;qBAIhE,KAAK,CAAC,UAAU;EAiBzC;AAeD,wBAAgB,8BAA8B,0BAa7C"}