@vkontakte/vkui 7.1.2 → 7.2.0

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -1,10 +1,10 @@
 .host {
+  box-sizing: border-box;
   block-size: 30px;
   padding: 2px;
-  border-radius: var(--vkui--size_border_radius--regular);
-  background-color: var(--vkui--color_background_secondary);
-  box-sizing: border-box;
   font-family: var(--vkui--font_family_base);
+  background-color: var(--vkui--color_background_secondary);
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .sizeL {
@@ -14,24 +14,33 @@
 .in {
   position: relative;
   display: flex;
-  block-size: 100%;
   inline-size: 100%;
-  transition: all 100ms ease-out;
+  block-size: 100%;
   border-radius: inherit;
+  transition: all 100ms ease-out;
 }
 
 .slider {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
+  inline-size: calc(100% / var(--vkui_internal--SegmentedControl_options));
   background-color: var(--vkui--color_segmented_control);
-  transition: transform 150ms;
-  transform-origin: 0 0;
   border-radius: inherit;
   box-shadow:
     inset 0 0 0 0.5px var(--vkui--color_image_border_alpha),
     0 3px 8px rgba(0, 0, 0, 0.12),
     0 3px 1px rgba(0, 0, 0, 0.04);
+  transform: translateX(calc(var(--vkui_internal--SegmentedControl_actual_index) * 100%));
+  transform-origin: 0 0;
+  transition: transform 150ms;
+
+  --vkui_internal--SegmentedControl_actual_index: 0;
+  --vkui_internal--SegmentedControl_options: 0;
+}
+
+.rtl .slider {
+  transform: translateX(calc(-1 * var(--vkui_internal--SegmentedControl_actual_index) * 100%));
 }
 
 /**

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -3,11 +3,12 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useTabsNavigation } from '../../hooks/useTabsNavigation';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import {
   SegmentedControlOption,
@@ -60,6 +61,8 @@ export const SegmentedControl = ({
   ...restProps
 }: SegmentedControlProps): React.ReactNode => {
   const id = React.useId();
+  const direction = useConfigDirection();
+  const isRtl = direction === 'rtl';
 
   const [value, onChange] = useCustomEnsuredControl({
     onChange: onChangeProp,
@@ -69,7 +72,7 @@ export const SegmentedControl = ({
 
   const { sizeY = 'none' } = useAdaptivity();
 
-  const { tabsRef } = useTabsNavigation(role === 'tablist');
+  const { tabsRef } = useTabsNavigation(role === 'tablist', isRtl);
 
   const actualIndex = options.findIndex((option) => option.value === value);
 
@@ -79,7 +82,10 @@ export const SegmentedControl = ({
     }
   }, [actualIndex]);
 
-  const translateX = `translateX(${100 * actualIndex}%)`;
+  const sliderStyle: CSSCustomProperties = {
+    '--vkui_internal--SegmentedControl_actual_index': String(actualIndex),
+    '--vkui_internal--SegmentedControl_options': String(options.length),
+  };
 
   return (
     <RootComponent
@@ -88,19 +94,11 @@ export const SegmentedControl = ({
         styles.host,
         sizeY !== 'compact' && sizeYClassNames[sizeY],
         size === 'l' && styles.sizeL,
+        isRtl && styles.rtl,
       )}
     >
       <div role={role} ref={tabsRef} className={styles.in}>
-        {actualIndex > -1 && (
-          <div
-            aria-hidden
-            className={styles.slider}
-            style={{
-              width: `${100 / options.length}%`,
-              transform: translateX,
-            }}
-          />
-        )}
+        {actualIndex > -1 && <div aria-hidden className={styles.slider} style={sliderStyle} />}
         {options.map(({ label, before, ...optionProps }) => {
           const selected = value === optionProps.value;
           const onSelect = () => onChange(optionProps.value);

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.module.css

@@ -1,19 +1,19 @@
 .host {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
   block-size: 100%;
+  color: var(--vkui--color_text_primary);
+  appearance: none;
+  cursor: pointer;
+  user-select: none;
+  background: transparent;
   border: 0;
   border-radius: inherit;
-  background: transparent;
-  color: var(--vkui--color_text_primary);
   transition: color 100ms ease-out;
-  user-select: none;
-  box-sizing: border-box;
-  cursor: pointer;
-  appearance: none;
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
 }
 
 .hover {

package/src/components/Select/Select.module.css

@@ -1,35 +1,35 @@
 .host {
   position: relative;
-  cursor: pointer;
   box-sizing: border-box;
   font-family: var(--vkui--font_family_base);
+  cursor: pointer;
 }
 
 .el {
-  display: block;
   position: absolute;
-  appearance: none;
-  border: 0;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_form_field_side);
+  display: block;
   inline-size: 100%;
   block-size: 100%;
-  opacity: 0;
-  z-index: var(--vkui_internal--z_index_form_field_side);
-  font-size: var(--vkui--font_paragraph--font_size--regular);
   font-family: inherit;
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  appearance: none;
+  border: 0;
+  opacity: 0;
 }
 
 .container {
-  align-self: center;
+  position: relative;
+  z-index: var(--vkui_internal--z_index_form_field_element);
+  box-sizing: border-box;
   flex-grow: 1;
   flex-shrink: 1;
+  align-self: center;
   padding-inline: 12px 0;
-  color: var(--vkui--color_text_primary);
-  box-sizing: border-box;
-  position: relative;
-  z-index: var(--vkui_internal--z_index_form_field_element);
   overflow: hidden;
+  color: var(--vkui--color_text_primary);
 }
 
 .hasBefore .container {
@@ -56,8 +56,8 @@
 
 .host:not(.multiline) .title {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .empty .title {

package/src/components/SelectionControl/SelectionControl.module.css

@@ -1,11 +1,11 @@
 .host {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  min-block-size: var(--vkui--size_field_height--regular);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   font-family: var(--vkui--font_family_base);
-  min-block-size: var(--vkui--size_field_height--regular);
-  box-sizing: border-box;
 }
 
 /**

package/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.module.css

@@ -1,10 +1,10 @@
 .host {
   flex-grow: 1;
-  color: var(--vkui--color_text_primary);
   min-inline-size: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
-  word-break: break-word;
   margin-block: var(--vkui--spacing_size_xl);
   margin-inline-start: 12px;
+  color: var(--vkui--color_text_primary);
+  word-break: break-word;
 }
 
 .host:first-child {
@@ -12,15 +12,15 @@
 }
 
 .description {
-  color: var(--vkui--color_text_secondary);
   display: block;
   margin-block-start: 2px;
+  color: var(--vkui--color_text_secondary);
 }
 
 .titleLayout {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
 .title {
@@ -28,8 +28,8 @@
 }
 
 .titleAfter {
-  margin-inline-start: 4px;
   flex-shrink: 0;
+  margin-inline-start: 4px;
   color: var(--vkui--color_icon_tertiary);
 }
 

package/src/components/Separator/Separator.module.css

@@ -25,19 +25,19 @@
 
 .sized.directionHorizontal {
   display: flex;
-  block-size: var(--vkui_internal--spacing_size);
   align-items: var(--vkui_internal--separator_align, center);
+  block-size: var(--vkui_internal--spacing_size);
 }
 
 .sized.directionVertical {
-  inline-size: var(--vkui_internal--spacing_size);
   justify-content: var(--vkui_internal--separator_align, center);
+  inline-size: var(--vkui_internal--spacing_size);
 }
 
 .in {
   margin: 0;
-  background: currentColor;
   color: inherit;
+  background: currentColor;
   border: 0;
 }
 

package/src/components/SimpleCell/SimpleCell.module.css

@@ -4,10 +4,10 @@
   display: flex;
   align-items: center;
   min-block-size: 48px;
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
+  color: var(--vkui--color_text_primary);
   white-space: nowrap;
   text-decoration: none;
-  color: var(--vkui--color_text_primary);
-  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .mult {
@@ -25,6 +25,7 @@
 .before {
   display: flex;
   align-items: center;
+  align-self: stretch;
   padding-block: var(--vkui--spacing_size_s);
   padding-inline-end: var(--vkui_internal--SimpleCell-before-inline-padding-end);
   color: var(--vkui_internal--icon_color, var(--vkui--color_icon_accent));
@@ -32,6 +33,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .before > :global(.vkuiIcon) {
+  box-sizing: content-box;
   padding-inline-end: var(--vkui--spacing_size_xs);
 }
 
@@ -46,12 +48,12 @@
 
 .middle {
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   justify-content: center;
-  padding-block: var(--vkui--spacing_size_l);
-  max-inline-size: 100%;
-  flex-grow: 1;
   min-inline-size: 0;
+  max-inline-size: 100%;
+  padding-block: var(--vkui--spacing_size_l);
   overflow: hidden;
 }
 
@@ -65,8 +67,8 @@
 }
 
 .text {
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .subtitle,
@@ -78,15 +80,15 @@
   display: flex;
   align-content: flex-start;
   align-items: center;
-  max-inline-size: 100%;
   justify-content: flex-start;
+  max-inline-size: 100%;
 }
 
 .children {
-  color: inherit;
-  text-overflow: ellipsis;
-  overflow: hidden;
   display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
 }
 
 .mult .children,
@@ -108,23 +110,25 @@
 
 .indicator {
   flex-shrink: 0;
-  color: var(--vkui--color_text_secondary);
   min-inline-size: 0;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
   padding-inline-start: var(--vkui--spacing_size_xl);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--vkui--color_text_secondary);
+  white-space: nowrap;
 }
 
 .after {
-  flex-shrink: 0;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
+  align-self: stretch;
   color: var(--vkui_internal--icon_color, var(--vkui--color_icon_accent));
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .after > :global(.vkuiIcon) {
+  box-sizing: content-box;
   padding-inline-start: var(--vkui--spacing_size_m);
 }
 
@@ -134,8 +138,8 @@
 }
 
 .chevronIcon {
-  color: var(--vkui--color_icon_tertiary);
   padding-inline-start: var(--vkui--spacing_size_xl);
+  color: var(--vkui--color_icon_tertiary);
 }
 
 /**

package/src/components/SimpleGrid/SimpleGrid.module.css

@@ -3,13 +3,13 @@
   --vkui_internal--min_col_width: 0;
 
   display: grid;
-  gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap);
   grid-template-columns: repeat(var(--vkui_internal--grid_columns), minmax(0, 1fr));
+  gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap);
 }
 
 .marginAuto {
-  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
   margin-block: var(--vkui--size_base_padding_vertical--regular);
+  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .marginAutoInline {

package/src/components/Skeleton/Skeleton.module.css

@@ -4,14 +4,14 @@
   --vkui_internal--skeleton_animation_duration: 1.5s;
   --vkui_internal--skeleton_gradient_left: 0;
 
-  display: inline-flex;
   position: relative;
+  display: inline-flex;
   inline-size: 100%;
   max-inline-size: 100%;
-  line-height: 1;
-  border-radius: 6px;
   overflow: hidden;
+  line-height: 1;
   background-color: var(--vkui_internal--skeleton_color_from);
+  border-radius: 6px;
 }
 
 /* Если скелетон находится внутри другого скелетона он меняет цвет */
@@ -27,11 +27,11 @@
 
 .host::before {
   position: absolute;
-  inset-inline-start: var(--vkui_internal--skeleton_gradient_left);
   inset-block-start: 0;
-  content: ' ';
+  inset-inline-start: var(--vkui_internal--skeleton_gradient_left);
   inline-size: 100vw;
   block-size: 100%;
+  content: ' ';
   background-image: linear-gradient(
     90deg,
     var(--vkui_internal--skeleton_color_from),
@@ -40,10 +40,10 @@
   );
   transform: translateX(-100vw);
   animation-name: animation-skeleton;
-  animation-direction: normal /*rtl:reverse*/;
   animation-duration: 1.5s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
+  animation-direction: normal /*rtl:reverse*/;
 }
 
 @keyframes animation-skeleton {
@@ -53,17 +53,17 @@
 }
 
 .disableAnimation::before {
+  background-image: none;
   /**
    * Safari тратит время не пересчет анимации даже если элемент скрыт
    * Для повышения производительности анимацию необходимо выключить
    */
   animation-name: none;
-  background-image: none;
 }
 
 @media (--reduce-motion) {
   .host::before {
-    animation-name: none;
     background-image: none;
+    animation-name: none;
   }
 }

package/src/components/Slider/Slider.module.css

@@ -1,7 +1,10 @@
 .host {
   position: relative;
-  cursor: pointer;
   block-size: var(--vkui_internal--slider_thumb_size);
+  cursor: pointer;
+
+  --vkui_internal--Slider_start_value: 0;
+  --vkui_internal--Slider_end_value: 0;
 }
 
 .disabled {
@@ -24,15 +27,21 @@
 }
 
 .trackFill {
-  inline-size: auto;
+  inline-size: calc(var(--vkui_internal--Slider_start_value) * 1%);
   background: var(--vkui--color_background_accent);
 }
 
+.multiple .trackFill {
+  inset-inline-start: calc(var(--vkui_internal--Slider_start_value) * 1%);
+  inset-inline-end: calc((100 - var(--vkui_internal--Slider_end_value)) * 1%);
+  inline-size: auto;
+}
+
 .thumbs {
-  isolation: isolate;
   position: relative;
-  margin-inline: calc(var(--vkui_internal--slider_thumb_size) / 2);
   block-size: 100%;
+  margin-inline: calc(var(--vkui_internal--slider_thumb_size) / 2);
+  isolation: isolate;
 }
 
 .thumb {
@@ -40,6 +49,18 @@
   transform: translate(-50%, -50%);
 }
 
+.rtl .thumb {
+  transform: translate(50%, -50%);
+}
+
+.thumbStart {
+  inset-inline-start: calc(var(--vkui_internal--Slider_start_value) * 1%);
+}
+
+.thumbEnd {
+  inset-inline-start: calc(var(--vkui_internal--Slider_end_value) * 1%);
+}
+
 .sizeL {
   --vkui_internal--slider_thumb_size: 28px;
 }

package/src/components/Slider/Slider.tsx

@@ -3,9 +3,11 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
+import { mergeStyle } from '../../helpers/mergeStyle';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
 import { type CustomTouchEvent, type CustomTouchEventHandler, Touch } from '../Touch/Touch';
 import { SliderThumb } from './SliderThumb/SliderThumb';
 import {
@@ -101,9 +103,12 @@ export const Slider = ({
   onChange,
   withTooltip,
   size = 'l',
+  style: styleProp,
   ...restProps
 }: SliderProps | SliderMultipleProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
+  const direction = useConfigDirection();
+  const isRtl = direction === 'rtl';
 
   const isControlled = valueProp !== undefined;
   const [localValue, setValue] = React.useState(defaultValue);
@@ -163,7 +168,10 @@ export const Slider = ({
     // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.
     const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);
 
-    const nextStartX = event.startX - nextContainerX;
+    let nextStartX = event.startX - nextContainerX;
+    if (isRtl) {
+      nextStartX = nextContainerWidth - nextStartX;
+    }
     const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);
     const nextDragging = snapDirection(value, nextValue, foundDraggingType);
 
@@ -205,7 +213,7 @@ export const Slider = ({
     const { startX, containerWidth, dragging } = gesture;
 
     const { shiftX = 0 } = event;
-    const nextStartX = startX + shiftX;
+    const nextStartX = startX + (isRtl ? -shiftX : shiftX);
     const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);
 
     changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);
@@ -231,6 +239,11 @@ export const Slider = ({
     );
   };
 
+  const style: CSSCustomProperties = {
+    '--vkui_internal--Slider_start_value': String(startValueInPercent),
+    '--vkui_internal--Slider_end_value': String(endReversedValueInPercent),
+  };
+
   return (
     <Touch
       data-value={multiple ? `${startValue},${endValue}` : startValue}
@@ -240,27 +253,23 @@ export const Slider = ({
         disabled && styles.disabled,
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         sizeClassNames[size],
+        multiple && styles.multiple,
+        isRtl && styles.rtl,
         className,
       )}
+      style={mergeStyle(styleProp, style)}
+      getRootRef={getRootRef}
       onStart={disabled ? undefined : handlePointerStart}
       onMove={disabled ? undefined : handlePointerMove}
       onEnd={disabled ? undefined : handlePointerEnd}
     >
       <div className={styles.track} />
-      <div
-        className={styles.trackFill}
-        style={
-          multiple
-            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }
-            : { width: `${startValueInPercent}%` }
-        }
-      />
+      <div className={styles.trackFill} />
       <div ref={thumbsContainerRef} className={styles.thumbs}>
         <SliderThumb
           data-type="start"
-          className={styles.thumb}
+          className={classNames(styles.thumb, styles.thumbStart)}
           style={{
-            left: `${startValueInPercent}%`,
             // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.
             zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,
           }}
@@ -284,8 +293,7 @@ export const Slider = ({
         {multiple && (
           <SliderThumb
             data-type="end"
-            className={styles.thumb}
-            style={{ left: `${endReversedValueInPercent}%` }}
+            className={classNames(styles.thumb, styles.thumbEnd)}
             withTooltip={withTooltip}
             inputProps={{
               'data-type': 'end',

package/src/components/Slider/SliderThumb/SliderThumb.module.css

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   inline-size: var(--vkui_internal--slider_thumb_size);
   block-size: var(--vkui_internal--slider_thumb_size);
-  border-radius: 50%;
-  border: var(--vkui--size_border--regular) solid var(--vkui--color_separator_primary_alpha);
+  user-select: none;
   background-color: var(--vkui--color_background_contrast);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_separator_primary_alpha);
+  border-radius: 50%;
   box-shadow: var(--vkui--elevation3);
-  user-select: none;
   transition: background-color 0.15s ease-out;
 }
 
@@ -29,14 +29,14 @@
  * Задаём ширину и высоту родителя, чтобы скринридер правильно выделял элемент (скопировано с MUI).
  */
 .nativeInput {
-  direction: ltr;
   position: absolute;
   inline-size: 100%;
   block-size: 100%;
-  margin: -1px;
   padding: 0;
-  border: 0 none;
-  clip: rect(0, 0, 0, 0);
+  margin: -1px;
   overflow: hidden;
   white-space: nowrap;
+  border: 0 none;
+  clip: rect(0, 0, 0, 0);
+  direction: ltr;
 }

package/src/components/Slider/SliderThumb/SliderThumb.tsx

@@ -118,11 +118,11 @@ export const SliderThumb = ({
         <TooltipBase
           appearance="neutral"
           getRootRef={refs.setFloating}
-          style={convertFloatingDataToReactCSSProperties(
-            floatingPositionStrategy,
-            floatingDataX,
-            floatingDataY,
-          )}
+          style={convertFloatingDataToReactCSSProperties({
+            strategy: floatingPositionStrategy,
+            x: floatingDataX,
+            y: floatingDataY,
+          })}
           arrowProps={{
             coords: arrowCoords,
             placement: resolvedPlacement,