@vkontakte/vkui 7.1.3 → 7.2.0

package/src/components/Search/Search.module.css

@@ -5,6 +5,11 @@
   -webkit-tap-highlight-color: transparent;
 
   --vkui_internal--search_height: var(--vkui--size_search_height--regular);
+  --vkui_internal--search_shift_direction: 1;
+}
+
+.rtl {
+  --vkui_internal--search_shift_direction: -1;
 }
 
 .withPadding {
@@ -31,14 +36,14 @@
   display: flex;
   flex-grow: 2;
   flex-basis: 0%;
-  block-size: var(--vkui_internal--search_height);
-  background-color: var(--vkui--color_search_field_background);
-  border-radius: var(--vkui--size_border_radius--regular);
   /**
    * Костыль для PanelHeader. Необходимо для растягивания на всю ширину.
   */
   inline-size: 10000px;
+  block-size: var(--vkui_internal--search_height);
   overflow: hidden;
+  background-color: var(--vkui--color_search_field_background);
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .field:hover {
@@ -51,40 +56,40 @@
 
 .label {
   position: absolute;
-  cursor: text;
   inset: 0;
+  cursor: text;
   opacity: 0;
 }
 
 .input {
-  padding-inline-start: 12px;
-  color: var(--vkui--color_icon_medium);
+  position: relative;
   display: flex;
-  justify-content: flex-start;
   align-items: center;
+  justify-content: flex-start;
   inline-size: calc(100% - 1px);
   block-size: 100%;
+  padding-inline-start: 12px;
+  color: var(--vkui--color_icon_medium);
   border-radius: inherit;
-  position: relative;
 }
 
 .nativeInput {
   position: absolute;
   inset: 0;
-  block-size: 100%;
-  appearance: none; /* не используем textfield из-за бага в iOS 15.1 http://www.openradar.me/FB9744107 */
-  border: 0;
-  margin: 0;
-  padding: 0;
-  padding-inline-start: 36px;
   box-sizing: border-box;
-  border-radius: inherit;
-  max-inline-size: 100%;
   flex-grow: 1;
-  min-inline-size: 0;
   inline-size: stretch; /* автопрефиксер добавит фолбеки https://caniuse.com/mdn-css_properties_width_stretch */
-  background-color: transparent;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  block-size: 100%;
+  padding: 0;
+  padding-inline-start: 36px;
+  margin: 0;
   color: var(--vkui--color_text_primary);
+  appearance: none; /* не используем textfield из-за бага в iOS 15.1 http://www.openradar.me/FB9744107 */
+  background-color: transparent;
+  border: 0;
+  border-radius: inherit;
 }
 
 .nativeInput::-webkit-search-decoration,
@@ -104,9 +109,9 @@
 }
 
 .disabled {
-  opacity: var(--vkui--opacity_disable_accessibility);
   pointer-events: none;
   cursor: default;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .nativeInput:disabled {
@@ -129,16 +134,23 @@
   align-items: center;
   justify-content: center;
   color: var(--vkui--color_icon_secondary);
-  transition: transform 0.3s var(--vkui--animation_easing_platform);
   /* Используем translate3d, чтобы поправить дергание при наведении в Safari */
-  transform: translate3d(100%, 0, 0);
+  transform: translate3d(calc(var(--vkui_internal--search_shift_direction) * 100%), 0, 0);
+  transition: transform 0.3s var(--vkui--animation_easing_platform);
 
   --vkui_internal--search_icon_size: calc(var(--vkui_internal--search_height) + 4px);
 }
 
 .hasIcon .controls {
   /* Исключаем параметр icon из расчёта, чтобы он оставался видимым */
-  transform: translate3d(calc(100% - var(--vkui_internal--search_icon_size)), 0, 0);
+  transform: translate3d(
+    calc(
+      var(--vkui_internal--search_shift_direction) *
+        calc(100% - var(--vkui_internal--search_icon_size))
+    ),
+    0,
+    0
+  );
 }
 
 .hasValue .controls {
@@ -146,10 +158,10 @@
 }
 
 .icon {
-  inline-size: var(--vkui_internal--search_icon_size);
   display: flex;
   align-items: center;
   justify-content: center;
+  inline-size: var(--vkui_internal--search_icon_size);
   block-size: 100%;
   border-radius: var(--vkui--size_border_radius--regular);
 }
@@ -166,8 +178,8 @@
   flex-basis: 0%;
   min-inline-size: 0;
   max-inline-size: min-content;
-  transition: flex-grow 0.3s var(--vkui--animation_easing_platform);
   pointer-events: none;
+  transition: flex-grow 0.3s var(--vkui--animation_easing_platform);
 }
 
 .focused .after,
@@ -178,11 +190,11 @@
 
 .after::before,
 .after::after {
-  content: '';
-  flex-shrink: 0;
   display: block;
+  flex-shrink: 0;
   inline-size: 4px;
   block-size: 100%;
+  content: '';
 }
 
 .withPadding .after::after {
@@ -191,15 +203,15 @@
 
 .afterTextClip {
   display: block;
+  overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 .findButton {
+  inline-size: initial;
   min-inline-size: initial;
   max-inline-size: initial;
-  inline-size: initial;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

package/src/components/Search/Search.tsx

@@ -6,6 +6,7 @@ import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { useBooleanState } from '../../hooks/useBooleanState';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -38,6 +39,10 @@ export interface SearchProps
   defaultValue?: string;
   iconLabel?: string;
   clearLabel?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки очистки
+   */
+  clearButtonTestId?: string;
   /**
    * Удаляет отступы у компонента
    */
@@ -50,6 +55,10 @@ export interface SearchProps
    * Коллбэк для кнопки Найти
    */
   onFindButtonClick?: React.MouseEventHandler<HTMLElement>;
+  /**
+   * Передает атрибут `data-testid` для кнопки поиска
+   */
+  findButtonTestId?: string;
 }
 
 /**
@@ -69,12 +78,16 @@ export const Search = ({
   onChange,
   iconLabel,
   clearLabel = 'Очистить',
+  clearButtonTestId,
   noPadding,
   getRootRef,
   findButtonText = 'Найти',
+  findButtonTestId,
   onFindButtonClick,
   ...inputProps
 }: SearchProps): React.ReactNode => {
+  const direction = useConfigDirection();
+  const isRtl = direction === 'rtl';
   const inputRef = useExternRef(getRef);
   const {
     value: isFocused,
@@ -172,6 +185,7 @@ export const Search = ({
         iconProp && styles.hasIcon,
         inputProps.disabled && styles.disabled,
         !noPadding && styles.withPadding,
+        isRtl && styles.rtl,
         className,
       )}
       ref={getRootRef}
@@ -211,6 +225,7 @@ export const Search = ({
             className={styles.icon}
             tabIndex={hasValue ? undefined : -1}
             disabled={inputProps.disabled}
+            data-testid={clearButtonTestId}
           >
             <VisuallyHidden>{clearLabel}</VisuallyHidden>
             {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}
@@ -223,6 +238,7 @@ export const Search = ({
               focusVisibleMode="inside"
               onClick={onFindButtonClick}
               tabIndex={hasValue ? undefined : -1}
+              data-testid={findButtonTestId}
             >
               {findButtonText}
             </Button>

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));
@@ -47,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;
 }
 
@@ -66,8 +67,8 @@
 }
 
 .text {
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .subtitle,
@@ -79,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,
@@ -109,18 +110,19 @@
 
 .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));
 }
 
@@ -136,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 {