@vkontakte/vkui 7.1.3 → 7.2.0

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

@@ -1,29 +1,29 @@
 .host {
   position: relative;
-  display: flex;
   box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
   min-block-size: var(--vkui--size_field_height--regular);
   font-family: var(--vkui--font_family_base);
-  -webkit-tap-highlight-color: transparent;
-  isolation: isolate;
   border-radius: var(--vkui--size_border_radius--regular);
-  inline-size: 100%;
+  isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .scrollContainer {
   display: flex;
-  inline-size: 100%;
   align-items: flex-start;
   justify-content: flex-start;
-  overflow-y: auto;
+  inline-size: 100%;
   min-block-size: inherit;
+  overflow-y: auto;
 }
 
 .content {
-  min-block-size: inherit;
   display: flex;
   flex-grow: 1;
   min-inline-size: 0;
+  min-block-size: inherit;
 }
 
 .sizeYCompact {
@@ -39,26 +39,26 @@
 /* stylelint-disable-next-line selector-max-universal */
 
 .host > * {
-  border-radius: inherit;
   z-index: var(--vkui_internal--z_index_form_field_element);
+  border-radius: inherit;
 }
 
 .iconWrapper {
-  flex-shrink: 0;
-  block-size: 100%;
-  display: flex;
   position: -webkit-sticky;
   position: sticky;
   inset-block-start: 0;
+  display: flex;
+  flex-shrink: 0;
+  block-size: 100%;
 }
 
 .before,
 .after {
   display: flex;
-  align-items: center;
   align-content: center;
-  justify-content: center;
+  align-items: center;
   align-self: center;
+  justify-content: center;
   min-inline-size: var(--vkui--size_field_height--regular);
   color: var(--vkui--color_icon_secondary);
 }
@@ -92,17 +92,17 @@
 }
 
 .border {
-  pointer-events: none;
   position: absolute;
-  z-index: var(--vkui_internal--z_index_form_field_border);
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_form_field_border);
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
-  box-sizing: border-box;
-  transform-origin: left top;
+  pointer-events: none;
   border: var(--vkui--size_border--regular) solid transparent;
   border-radius: inherit;
+  transform-origin: left top;
 }
 
 .modeDefault > .border {
@@ -118,8 +118,8 @@
 }
 
 .modeDefault.hover > .border {
-  border-color: var(--vkui--color_field_border_alpha--hover);
   z-index: var(--vkui_internal--z_index_form_field_border_hover);
+  border-color: var(--vkui--color_field_border_alpha--hover);
 }
 
 /**
@@ -145,8 +145,8 @@
 :global(.vkuiInternalFormItem--status-error) .focusVisible > .border,
 .statusError.modeDefault > .border,
 .statusError.focusVisible > .border {
-  border-color: var(--vkui--color_stroke_negative);
   z-index: var(--vkui_internal--z_index_form_field_status);
+  border-color: var(--vkui--color_stroke_negative);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -165,8 +165,8 @@
 :global(.vkuiInternalFormItem--status-valid) .focusVisible > .border,
 .statusValid.modeDefault > .border,
 .statusValid.focusVisible > .border {
-  border-color: var(--vkui--color_stroke_positive);
   z-index: var(--vkui_internal--z_index_form_field_status);
+  border-color: var(--vkui--color_stroke_positive);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -179,9 +179,9 @@
 /* [end] */
 
 .disabled {
-  opacity: var(--vkui--opacity_disable_accessibility);
-  cursor: default;
   pointer-events: none;
+  cursor: default;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 /**
@@ -217,8 +217,8 @@
 
 :global(.vkuiInternalFormLayoutGroup--segmented) .host {
   z-index: auto;
-  isolation: auto;
   border-radius: 0;
+  isolation: auto;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

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

@@ -12,27 +12,27 @@
 }
 
 .removable {
-  max-inline-size: 100%;
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0;
-  padding: 0;
   min-inline-size: 1px;
+  max-inline-size: 100%;
+  padding: 0;
   overflow: hidden;
 }
 
 .top {
-  padding-block: var(--vkui--spacing_size_2xs) var(--vkui--spacing_size_m);
-  color: var(--vkui--color_text_subhead);
   display: flex;
   align-items: flex-end;
+  padding-block: var(--vkui--spacing_size_2xs) var(--vkui--spacing_size_m);
+  color: var(--vkui--color_text_subhead);
 }
 
 .label,
 .aside {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .label {
@@ -40,9 +40,9 @@
 }
 
 .aside {
-  color: var(--vkui--color_text_tertiary);
   -webkit-margin-start: auto;
           margin-inline-start: auto;
+  color: var(--vkui--color_text_tertiary);
 }
 
 .aside:not(:only-child) {
@@ -55,15 +55,15 @@
 }
 
 .labelRequired {
-  color: var(--vkui--color_text_negative);
   -webkit-margin-start: 3px;
           margin-inline-start: 3px;
+  color: var(--vkui--color_text_negative);
 }
 
 .bottom {
-  color: var(--vkui--color_text_secondary);
   -webkit-padding-before: var(--vkui--spacing_size_m);
           padding-block-start: var(--vkui--spacing_size_m);
+  color: var(--vkui--color_text_secondary);
 }
 
 .statusError .bottom {
@@ -109,12 +109,12 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormLayoutGroup--mode-horizontal) .host {
-  max-inline-size: 100%;
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0;
-  padding: 0;
   min-inline-size: 1px;
+  max-inline-size: 100%;
+  padding: 0;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

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

@@ -1,16 +1,16 @@
 .host {
-  border: 0;
+  min-inline-size: auto;
   padding: 0;
   margin: 0;
-  min-inline-size: auto;
+  border: 0;
 }
 
 .modeHorizontal {
   display: flex;
-  padding-block: var(--vkui--size_form_item_padding_vertical--regular);
-  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   flex-wrap: wrap;
   align-items: flex-start;
+  padding-block: var(--vkui--size_form_item_padding_vertical--regular);
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .removable {
@@ -26,8 +26,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .modeHorizontal :global(.vkuiInternalFormItem--withTop) ~ .offset {
-  order: -1;
   display: block;
+  order: -1;
   min-inline-size: 100%;
   block-size: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
 }

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

@@ -5,8 +5,8 @@
 .in {
   display: flex;
   flex-flow: column wrap;
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
   overflow: hidden;
   border-radius: inherit;
 }
@@ -16,8 +16,8 @@
   block-size: calc(50% - var(--vkui_internal--grid_avatar_image_offset) / 2);
   -webkit-margin-end: var(--vkui_internal--grid_avatar_image_offset);
           margin-inline-end: var(--vkui_internal--grid_avatar_image_offset);
-  background-size: cover;
   background-position: center;
+  background-size: cover;
 }
 
 .item:only-child {

package/dist/cssm/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.module.css

@@ -1,9 +1,9 @@
 .host {
-  inset-inline-end: 0;
   inset-block-end: 0;
+  inset-inline-end: 0;
 }
 
 .shifted {
-  inset-inline-end: -2px;
   inset-block-end: -2px;
+  inset-inline-end: -2px;
 }

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

@@ -12,9 +12,9 @@
   --vkui_internal--Group_padding_block: var(--vkui--spacing_size_m);
   --vkui_internal--Group_card_mode_padding_size: 0;
 
-  color: var(--vkui--color_text_primary);
   padding-block: var(--vkui_internal--Group_padding_block);
   padding-inline: var(--vkui_internal--Group_padding_inline);
+  color: var(--vkui--color_text_primary);
 }
 
 .paddingS {
@@ -65,16 +65,16 @@
 .sizeXCompact.modeCard:first-of-type {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
-  border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
   border-end-start-radius: var(--vkui--size_border_radius_promo--regular);
+  border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
 }
 
 @media (max-width: 767.9px) {
   .sizeXNone.modeCard:first-of-type {
     border-start-start-radius: 0;
     border-start-end-radius: 0;
-    border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
     border-end-start-radius: var(--vkui--size_border_radius_promo--regular);
+    border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
   }
 }
 
@@ -88,27 +88,27 @@
 
 .modeCard::before,
 .sizeXRegular.modeNone::before {
-  content: '';
-  inset-inline-start: 0;
+  position: absolute;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
-  position: absolute;
-  border-radius: inherit;
   pointer-events: none;
+  content: '';
+  border-radius: inherit;
   box-shadow: inset 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_separator_primary);
 }
 
 @media (min-width: 768px) {
   .sizeXNone.modeNone::before {
-    content: '';
-    inset-inline-start: 0;
+    position: absolute;
     inset-block-start: 0;
+    inset-inline-start: 0;
     inline-size: 100%;
     block-size: 100%;
-    position: absolute;
-    border-radius: inherit;
     pointer-events: none;
+    content: '';
+    border-radius: inherit;
     box-shadow: inset 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha);
   }
 }
@@ -183,11 +183,11 @@
 
 .separatorSibling::before {
   display: var(--vkui_internal--Group__separator_hr);
-  content: '';
   block-size: var(--vkui--size_border--regular);
-  background: var(--vkui--color_separator_primary);
   -webkit-margin-after: calc(-1 * var(--vkui--size_border--regular));
           margin-block-end: calc(-1 * var(--vkui--size_border--regular));
+  content: '';
+  background: var(--vkui--color_separator_primary);
 }
 
 /* разделитель при mode="plain" */
@@ -196,16 +196,16 @@
 .sizeXCompact.modeNone + .separatorSibling {
   --vkui_internal--Group__separator_hr: block;
 
-  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   padding-block: var(--vkui--spacing_size_m);
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 @media (max-width: 767.9px) {
   .sizeXNone.modeNone + .separatorSibling {
     --vkui_internal--Group__separator_hr: block;
 
-    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
     padding-block: var(--vkui--spacing_size_m);
+    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   }
 }
 
@@ -323,6 +323,6 @@
 :global(.vkuiInternalPanelHeader--vkcom) + * .host:first-of-type {
   position: relative;
   inset-block-start: -1px;
-  border-start-end-radius: 0;
   border-start-start-radius: 0;
+  border-start-end-radius: 0;
 }

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

@@ -17,10 +17,10 @@
 
 .before {
   align-self: center;
-  -webkit-margin-end: var(--vkui--spacing_size_m);
-          margin-inline-end: var(--vkui--spacing_size_m);
   -webkit-margin-before: var(--vkui--spacing_size_2xs);
           margin-block-start: var(--vkui--spacing_size_2xs);
+  -webkit-margin-end: var(--vkui--spacing_size_m);
+          margin-inline-end: var(--vkui--spacing_size_m);
 }
 
 .beforeWithSubtitle {
@@ -66,14 +66,14 @@
 
 .contentIn,
 .subtitle {
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 .contentMultiline {
-  white-space: initial;
   word-break: break-word;
+  white-space: initial;
 }
 
 .subtitle {
@@ -86,10 +86,10 @@
 }
 
 .indicator {
-  color: var(--vkui--color_text_secondary);
+  flex-shrink: 0;
   -webkit-margin-start: var(--vkui--spacing_size_xs);
           margin-inline-start: var(--vkui--spacing_size_xs);
-  flex-shrink: 0;
+  color: var(--vkui--color_text_secondary);
 }
 
 .host:not(.pi) .indicator {

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

@@ -9,8 +9,8 @@
 
 .body {
   max-inline-size: inherit;
-  text-decoration: none;
   font-family: inherit;
+  text-decoration: none;
 }
 
 /* Перебиваем селектор в Tappable--sizeX-(compact|none) */
@@ -21,9 +21,9 @@
 
 .content {
   max-inline-size: inherit;
+  text-overflow: ellipsis;
   color: var(--vkui--color_text_primary);
   word-break: break-word;
-  text-overflow: ellipsis;
 }
 
 .subtitle {
@@ -101,8 +101,8 @@
 
 .host:first-child::before,
 .host:last-child::after {
-  content: '';
   min-inline-size: var(--vkui_internal--side_cell_gap);
+  content: '';
 }
 
 .sized:first-child,

package/dist/cssm/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css

@@ -7,16 +7,16 @@
 }
 
 .host:last-child::after {
-  content: '';
   min-inline-size: var(--vkui_internal--side_cell_gap);
+  content: '';
 }
 
 .body {
   box-sizing: content-box;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   padding-block: 4px;
   padding-inline: var(--vkui--spacing_size_s);
 }

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

@@ -3,7 +3,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";
@@ -45,8 +45,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();
     /**
    * Если окончание прокрутки вышло за ноль
@@ -78,15 +83,14 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
- */ export const HorizontalScroll = ({ children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId, ...restProps })=>{
-    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;
+ */ export const HorizontalScroll = ({ children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId, // ContentWrapper
+ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, ...restProps })=>{
+    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)=>{
@@ -111,7 +115,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         direction,
         setCanScrollEnd
     ]);
-    const scrollToLeft = React.useCallback(()=>{
+    const scrollToStart = React.useCallback(()=>{
         const getScrollPosition = getScrollToLeft ?? ((i)=>i - scrollerRef.current.offsetWidth);
         scrollTo(getScrollPosition);
     }, [
@@ -119,7 +123,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         scrollTo,
         scrollerRef
     ]);
-    const scrollToRight = React.useCallback(()=>{
+    const scrollToEnd = React.useCallback(()=>{
         const getScrollPosition = getScrollToRight ?? ((i)=>i + scrollerRef.current.offsetWidth);
         scrollTo(getScrollPosition);
     }, [
@@ -130,15 +134,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,
@@ -180,10 +184,10 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
     ]);
     return /*#__PURE__*/ _jsxs(RootComponent, {
         ...restProps,
-        baseClassName: classNames(styles.host, 'vkuiInternalHorizontalScroll', showArrows === 'always' && styles.withConstArrows),
+        baseClassName: classNames(styles.host, 'vkuiInternalHorizontalScroll', showArrows === 'always' && styles.withConstArrows, isRtl && styles.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,
@@ -191,9 +195,9 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
                 "aria-hidden": true,
                 tabIndex: -1,
                 className: classNames(styles.arrow, styles.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,
@@ -201,13 +205,14 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
                 "aria-hidden": true,
                 tabIndex: -1,
                 className: classNames(styles.arrow, styles.arrowRight),
-                onClick: scrollToRight
+                onClick: scrollToEnd
             }),
             /*#__PURE__*/ _jsx("div", {
                 className: styles.in,
                 ref: scrollerRef,
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: styles.inWrapper,
+                children: /*#__PURE__*/ _jsx(ContentWrapperComponent, {
+                    className: classNames(styles.inWrapper, contentWrapperClassName),
+                    ref: contentWrapperRef,
                     children: children
                 })
             })