@vkontakte/vkui 6.7.0 → 6.7.2

package/src/components/CustomSelect/CustomSelect.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames, debounce } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { useDOM } from '../../lib/dom';
 import type { Placement } from '../../lib/floating';
 import { defaultFilterFn, type FilterFn } from '../../lib/select';
@@ -12,24 +13,21 @@ import {
   CustomSelectDropdown,
   type CustomSelectDropdownProps,
 } from '../CustomSelectDropdown/CustomSelectDropdown';
+import {
+  CustomSelectOption,
+  type CustomSelectOptionProps,
+} from '../CustomSelectOption/CustomSelectOption';
 import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import type { FormFieldProps } from '../FormField/FormField';
 import type { NativeSelectProps } from '../NativeSelect/NativeSelect';
 import type { SelectType } from '../Select/Select';
 import { Footnote } from '../Typography/Footnote/Footnote';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import {
   CustomSelectClearButton,
   type CustomSelectClearButtonProps,
 } from './CustomSelectClearButton';
 import { CustomSelectInput, type CustomSelectInputProps } from './CustomSelectInput';
-import {
-  calculateInputValueFromOptions,
-  defaultRenderOptionFn,
-  findIndexAfter,
-  findIndexBefore,
-  findSelectedIndex,
-} from './helpers';
-import type { CustomSelectOptionInterface, CustomSelectRenderOption } from './types';
 import styles from './CustomSelect.module.css';
 
 const sizeYClassNames = {
@@ -37,6 +35,32 @@ const sizeYClassNames = {
   compact: styles['CustomSelect--sizeY-compact'],
 };
 
+const findIndexAfter = (options: CustomSelectOptionInterface[] = [], startIndex = -1) => {
+  if (startIndex >= options.length - 1) {
+    return -1;
+  }
+  return options.findIndex((option, i) => i > startIndex && !option.disabled);
+};
+
+const findIndexBefore = (
+  options: CustomSelectOptionInterface[] = [],
+  endIndex: number = options.length,
+) => {
+  let result = -1;
+  if (endIndex <= 0) {
+    return result;
+  }
+  for (let i = endIndex - 1; i >= 0; i--) {
+    let option = options[i];
+
+    if (!option.disabled) {
+      result = i;
+      break;
+    }
+  }
+  return result;
+};
+
 const warn = warnOnce('CustomSelect');
 
 const checkOptionsValueType = <T extends CustomSelectOptionInterface>(options: T[]) => {
@@ -48,10 +72,33 @@ const checkOptionsValueType = <T extends CustomSelectOptionInterface>(options: T
   }
 };
 
+function defaultRenderOptionFn<T extends CustomSelectOptionInterface>({
+  option,
+  ...props
+}: CustomSelectRenderOption<T>): React.ReactNode {
+  return <CustomSelectOption {...props} />;
+}
+
 const handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {
   e.preventDefault();
 };
 
+function findSelectedIndex<T extends CustomSelectOptionInterface>(
+  options: T[] = [],
+  value: SelectValue,
+  withClear: boolean,
+) {
+  if (withClear && value === '') {
+    return -1;
+  }
+  return (
+    options.findIndex((item) => {
+      value = typeof item.value === 'number' ? Number(value) : value;
+      return item.value === value;
+    }) ?? -1
+  );
+}
+
 const filter = <T extends CustomSelectOptionInterface>(
   options: SelectProps<T>['options'],
   inputValue: string,
@@ -62,7 +109,21 @@ const filter = <T extends CustomSelectOptionInterface>(
     : options;
 };
 
-export type { CustomSelectClearButtonProps, CustomSelectOptionInterface, CustomSelectRenderOption };
+type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];
+
+export interface CustomSelectOptionInterface {
+  value: SelectValue;
+  label: React.ReactElement | string;
+  disabled?: boolean;
+  [index: string]: any;
+}
+
+export interface CustomSelectRenderOption<T extends CustomSelectOptionInterface>
+  extends CustomSelectOptionProps {
+  option: T;
+}
+
+export type { CustomSelectClearButtonProps };
 
 export interface SelectProps<
   OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface,
@@ -220,18 +281,14 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);
   const selectElRef = useExternRef(getRef);
   const optionsWrapperRef = React.useRef<HTMLDivElement>(null);
-  const selectInputRef = useExternRef(getSelectInputRef);
 
   const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);
   const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
+  const [inputValue, setInputValue] = React.useState('');
   const [nativeSelectValue, setNativeSelectValue] = React.useState(
     () => props.value ?? defaultValue ?? (allowClearButton ? '' : undefined),
   );
 
-  const [inputValue, setInputValue] = React.useState(() =>
-    calculateInputValueFromOptions(optionsProp, nativeSelectValue),
-  );
-
   const [popperPlacement, setPopperPlacement] = React.useState<Placement>(popupDirection);
   const [options, setOptions] = React.useState(optionsProp);
   const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number | undefined>(
@@ -370,6 +427,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const close = React.useCallback(() => {
     resetKeyboardInput();
 
+    setInputValue('');
     setOpened(false);
     resetFocusedOption();
     onClose?.();
@@ -379,8 +437,8 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     (index: number) => {
       const item = options[index];
 
-      close();
       setNativeSelectValue(item?.value);
+      close();
 
       const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =
         isControlledOutside &&
@@ -416,15 +474,12 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     close();
     const event = new Event('focusout', { bubbles: true });
     selectElRef.current?.dispatchEvent(event);
-
-    setInputValue(calculateInputValueFromOptions(optionsProp, nativeSelectValue));
-  }, [close, selectElRef, optionsProp, nativeSelectValue]);
+  }, [close, selectElRef]);
 
   const onFocus = React.useCallback(() => {
     const event = new Event('focusin', { bubbles: true });
     selectElRef.current?.dispatchEvent(event);
-    selectInputRef.current?.select();
-  }, [selectElRef, selectInputRef]);
+  }, [selectElRef]);
 
   const onClick = React.useCallback(() => {
     if (opened) {
@@ -454,40 +509,27 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   );
 
   React.useEffect(
-    function filterOptions() {
+    function updateOptionsAndSelectedOptionIndex() {
+      const value = props.value ?? nativeSelectValue ?? defaultValue;
+
       const options =
         searchable && inputValue !== undefined
           ? filter(optionsProp, inputValue, filterFn)
           : optionsProp;
 
       setOptions(options);
+      setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));
     },
-    [filterFn, inputValue, optionsProp, searchable],
-  );
-
-  const selectValue = props.value ?? nativeSelectValue ?? defaultValue;
-  React.useEffect(
-    function updateSelectedOptionIndexOnValueChange() {
-      setSelectedOptionIndex(findSelectedIndex(options, selectValue, allowClearButton));
-    },
-    [selectValue, allowClearButton, options],
-  );
-
-  const prevSelectValueRef = React.useRef(selectValue);
-  React.useEffect(
-    function updateInputValueOnSelectValueChange() {
-      if (prevSelectValueRef.current === selectValue) {
-        return;
-      }
-      setInputValue(calculateInputValueFromOptions(optionsProp, selectValue));
-    },
-    [selectValue, optionsProp],
-  );
-  React.useEffect(
-    function updatePrevSelectValue() {
-      prevSelectValueRef.current = selectValue;
-    },
-    [selectValue],
+    [
+      filterFn,
+      inputValue,
+      nativeSelectValue,
+      optionsProp,
+      defaultValue,
+      props.value,
+      searchable,
+      allowClearButton,
+    ],
   );
 
   const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
@@ -671,6 +713,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     }
   }, [emptyText, options, renderDropdown, renderOption]);
 
+  const selectInputRef = useExternRef(getSelectInputRef);
   const focusOnInputTimerRef = React.useRef<ReturnType<typeof setTimeout>>();
   const focusOnInput = React.useCallback(() => {
     clearTimeout(focusOnInputTimerRef.current);
@@ -772,9 +815,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
     // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
     const isInputFocused = document && document.activeElement === selectInputRef.current;
-    const clickTarget = e.target as HTMLElement;
-    const inputClicked = selectInputRef.current?.contains(clickTarget);
-    if (isInputFocused && !inputClicked) {
+    if (isInputFocused) {
       e.preventDefault();
     }
   };
@@ -789,6 +830,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const selectInputAriaProps: React.HTMLAttributes<HTMLElement> = {
     'role': 'combobox',
     'aria-controls': popupAriaId,
+    'aria-owns': popupAriaId,
     'aria-expanded': opened,
     'aria-activedescendant':
       ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,
@@ -797,6 +839,8 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     'aria-autocomplete': 'none',
   };
 
+  const focusWithin = useFocusWithin(handleRootRef);
+
   return (
     <div
       className={classNames(
@@ -809,6 +853,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       onClick={passClickAndFocusToInputOnClick}
       onMouseDown={preventInputBlurWhenClickInsideFocusedSelectArea}
     >
+      {focusWithin && selected && !opened && (
+        <VisuallyHidden aria-live="polite">{selected.label}</VisuallyHidden>
+      )}
       <CustomSelectInput
         autoComplete="off"
         autoCapitalize="none"
@@ -820,7 +867,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         onFocus={onFocus}
         onBlur={onBlur}
         className={openedClassNames}
-        searchable={searchable}
+        readOnly={!searchable}
         fetching={fetching}
         value={inputValue}
         onKeyUp={handleKeyUp}
@@ -830,8 +877,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         before={before}
         after={afterIcons}
         selectType={selectType}
-        selectedOptionLabel={selected?.label}
-      />
+      >
+        {selected?.label}
+      </CustomSelectInput>
       <select
         ref={selectElRef}
         name={name}

package/src/components/CustomSelect/CustomSelectInput.module.css

@@ -2,10 +2,11 @@
   position: relative;
 }
 
-.CustomSelectInput__input {
+.CustomSelectInput__el {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_form_field_element);
   inline-size: 100%;
   block-size: var(--vkui--size_field_height--regular);
   line-height: var(--vkui--size_field_height--regular);
@@ -15,90 +16,63 @@
   box-sizing: border-box;
   box-shadow: none;
   appearance: none;
-  color: inherit;
+  color: var(--vkui--color_text_primary);
   padding-block: 0;
   padding-inline: 12px;
   background: transparent;
-  /*
-   * По типy option.label может принимать React-компонент,
-   * но React-компонент нельзя отрендерить как value в input.
-   * Поэтому мы всегда стараемся прятать input и поверх рисовать конейнер,
-   * в который можно положить label как строку или как React-компонент.
-   * В то же время у input в value лежит текстовое представление
-   * React компонента специально для скринридера.
-   */
-  opacity: 0;
-}
-
-/*
- * Но в режиме searchable, в фокусе мы наоборот, намеренно показываем
- * input и прячем декоративный label, так как нам важно дать пользователю
- * возможность изменить значение input для поиска.
- * А пользователям скринридера надо дать возможность прочитать выбранное значение.
- */
-.CustomSelectInput__input:not(:read-only):focus {
-  opacity: 1;
 }
 
-.CustomSelectInput__input:read-only:not(:disabled) {
+.CustomSelectInput__el--cursor-pointer {
   cursor: pointer;
 }
 
-.CustomSelectInput--sizeY-compact .CustomSelectInput__input {
+.CustomSelectInput--sizeY-compact .CustomSelectInput__el {
   block-size: var(--vkui--size_field_height--compact);
 }
 
 @media (--sizeY-compact) {
-  .CustomSelectInput--sizeY-none .CustomSelectInput__input {
+  .CustomSelectInput--sizeY-none .CustomSelectInput__el {
     block-size: var(--vkui--size_field_height--compact);
   }
 }
 
-.CustomSelectInput--hasBefore .CustomSelectInput__input {
+.CustomSelectInput--hasBefore .CustomSelectInput__el {
   padding-inline-start: 0;
 }
 
-.CustomSelectInput--hasAfter .CustomSelectInput__input {
+.CustomSelectInput--hasAfter .CustomSelectInput__el {
   padding-inline-end: 0;
 }
 
-.CustomSelectInput__input::placeholder {
-  color: var(--vkui--color_text_secondary);
-  /* Для Firefox: взято из Input.module.css */
-  opacity: 1;
+.CustomSelectInput__el:disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
-.CustomSelectInput__label-wrapper {
+.CustomSelectInput__container {
+  z-index: var(--vkui_internal--z_index_form_field_element);
   inline-size: 100%;
   max-block-size: 100%;
   padding-inline: 12px 0;
+  color: var(--vkui--color_text_primary);
   box-sizing: border-box;
   overflow: hidden;
   pointer-events: none;
 }
 
-.CustomSelectInput__input:focus:not(:read-only) ~ .CustomSelectInput__label-wrapper {
-  display: none;
-}
-
-.CustomSelectInput__input:disabled ~ .CustomSelectInput__label-wrapper {
-  opacity: var(--vkui--opacity_disable_accessibility);
-}
-
-.CustomSelectInput--hasBefore .CustomSelectInput__label-wrapper {
+.CustomSelectInput--hasBefore .CustomSelectInput__container {
   padding-inline-start: 0;
 }
 
-.CustomSelectInput--multiline .CustomSelectInput__label-wrapper {
+.CustomSelectInput--multiline .CustomSelectInput__container {
   padding-block: 12px;
 }
 
-.CustomSelectInput--sizeY-compact.CustomSelectInput--multiline .CustomSelectInput__label-wrapper {
+.CustomSelectInput--sizeY-compact.CustomSelectInput--multiline .CustomSelectInput__container {
   padding-block: 8px;
 }
 
 @media (--sizeY-compact) {
-  .CustomSelectInput--sizeY-none.CustomSelectInput--multiline .CustomSelectInput__label-wrapper {
+  .CustomSelectInput--sizeY-none.CustomSelectInput--multiline .CustomSelectInput__container {
     padding-block: 8px;
   }
 }
@@ -110,34 +84,40 @@
   align-items: center;
   flex: 1;
   overflow: hidden;
-  color: var(--vkui--color_text_primary);
-}
-
-.CustomSelectInput--empty .CustomSelectInput__label-wrapper {
-  color: var(--vkui--color_text_secondary);
 }
 
 .CustomSelectInput--hasBefore .CustomSelectInput__input-group {
   border-radius: 0;
 }
 
-.CustomSelectInput__label {
+.CustomSelectInput__title {
   display: block;
 }
 
-.CustomSelectInput:not(.CustomSelectInput--multiline) .CustomSelectInput__label {
+.CustomSelectInput:not(.CustomSelectInput--multiline) .CustomSelectInput__title {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.CustomSelectInput--align-right .CustomSelectInput__label,
-.CustomSelectInput--align-right .CustomSelectInput__input {
+.CustomSelectInput--empty .CustomSelectInput__title {
+  color: var(--vkui--color_text_secondary);
+}
+
+/* Для доступности placeholder в инпуте задан, но визуально не виден, потому что
+ * для комфортного управления видом плейсходера мы рендерим его отдельно, так же как и лэйбл
+ */
+.CustomSelectInput__el::placeholder {
+  opacity: 0;
+}
+
+.CustomSelectInput--align-right .CustomSelectInput__title,
+.CustomSelectInput--align-right .CustomSelectInput__el {
   text-align: end;
 }
 
-.CustomSelectInput--align-center .CustomSelectInput__label,
-.CustomSelectInput--align-center .CustomSelectInput__input {
+.CustomSelectInput--align-center .CustomSelectInput__title,
+.CustomSelectInput--align-center .CustomSelectInput__el {
   text-align: center;
 }
 
@@ -146,6 +126,6 @@
  * CalendarHeader
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalCalendarHeader__picker) .CustomSelectInput__label-wrapper {
+:global(.vkuiInternalCalendarHeader__picker) .CustomSelectInput__container {
   padding-inline-end: 4px;
 }

package/src/components/CustomSelect/CustomSelectInput.tsx

@@ -2,12 +2,14 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getFormFieldModeFromSelectType } from '../../lib/select';
 import type { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormField, type FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
 import { SelectTypography } from '../SelectTypography/SelectTypography';
+import { Text } from '../Typography/Text/Text';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './CustomSelectInput.module.css';
 
@@ -26,8 +28,6 @@ export interface CustomSelectInputProps
   multiline?: boolean;
   labelTextTestId?: string;
   fetching?: boolean;
-  searchable?: boolean;
-  selectedOptionLabel?: React.ReactElement | string;
 }
 
 /**
@@ -43,35 +43,42 @@ export const CustomSelectInput = ({
   before,
   after,
   status,
-  selectedOptionLabel,
+  children,
+  placeholder,
   selectType = 'default',
   multiline,
   disabled,
   fetching,
   labelTextTestId,
-  searchable,
-  ...restInputProps
+  ...restProps
 }: CustomSelectInputProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
-  const handleRootRef = useExternRef(getRootRef);
+  const title = children || placeholder;
+  const showLabelOrPlaceholder = !Boolean(restProps.value);
 
-  const platform = usePlatform();
+  const handleRootRef = useExternRef(getRootRef);
+  const focusWithin = useFocusWithin(handleRootRef);
 
   const input = (
-    <SelectTypography
-      selectType={selectType}
+    <Text
       type="text"
-      {...restInputProps}
+      {...restProps}
       disabled={disabled && !fetching}
-      readOnly={restInputProps.readOnly || !searchable || (disabled && fetching)}
+      readOnly={restProps.readOnly || (disabled && fetching)}
       Component="input"
       normalize={false}
-      className={styles['CustomSelectInput__input']}
+      className={classNames(
+        styles['CustomSelectInput__el'],
+        (restProps.readOnly || (showLabelOrPlaceholder && !focusWithin)) &&
+          styles['CustomSelectInput__el--cursor-pointer'],
+      )}
       getRootRef={getRef}
+      placeholder={children ? '' : placeholder}
     />
   );
 
+  const platform = usePlatform();
   return (
     <FormField
       Component="div"
@@ -80,7 +87,7 @@ export const CustomSelectInput = ({
         styles['CustomSelectInput'],
         align === 'right' && styles['CustomSelectInput--align-right'],
         align === 'center' && styles['CustomSelectInput--align-center'],
-        !selectedOptionLabel && styles['CustomSelectInput--empty'],
+        !children && styles['CustomSelectInput--empty'],
         multiline && styles['CustomSelectInput--multiline'],
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         before && styles['CustomSelectInput--hasBefore'],
@@ -95,6 +102,16 @@ export const CustomSelectInput = ({
       status={status}
     >
       <div className={styles['CustomSelectInput__input-group']}>
+        <div
+          className={classNames(styles['CustomSelectInput__container'], className)}
+          tabIndex={-1}
+          aria-hidden
+          data-testid={labelTextTestId}
+        >
+          <SelectTypography selectType={selectType} className={styles['CustomSelectInput__title']}>
+            {showLabelOrPlaceholder && title}
+          </SelectTypography>
+        </div>
         {/* Чтобы отключить autosuggestion в iOS, тултипы которого начинают всплывать даже когда input
          * в режиме readonly, мы оборачиваем инпут в VisuallyHidden.
          * Тултипы появляются при каждом клике на input.
@@ -104,17 +121,11 @@ export const CustomSelectInput = ({
          * Делаем это только для режима read-only. Потому что проблема именно в режиме read-only.
          * Обертка вокруг инпута обрабатывает клики и передаёт фокус, так что на взаимодействии с инпутом это никак не скажется.
          **/}
-        {!searchable && platform === 'ios' ? <VisuallyHidden>{input}</VisuallyHidden> : input}
-        <div
-          className={classNames(styles['CustomSelectInput__label-wrapper'], className)}
-          tabIndex={-1}
-          aria-hidden
-          data-testid={labelTextTestId}
-        >
-          <SelectTypography selectType={selectType} className={styles['CustomSelectInput__label']}>
-            {selectedOptionLabel || restInputProps.placeholder}
-          </SelectTypography>
-        </div>
+        {restProps.readOnly && platform === 'ios' ? (
+          <VisuallyHidden>{input}</VisuallyHidden>
+        ) : (
+          input
+        )}
       </div>
     </FormField>
   );

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -53,8 +53,6 @@ export interface HorizontalScrollProps
   scrollOnAnyWheel?: boolean;
   /**
    * Задает потомкам инлайновое положение (горизонально)
-   *
-   * TODO [>=7]: Сделать по умолчанию `true` (или удалить, применяя стили всегда)
    */
   inline?: boolean;
 }

package/src/components/Select/Select.tsx

@@ -69,8 +69,8 @@ export const Select = <OptionT extends CustomSelectOptionInterface>({
           className={classNames(className, deviceType.mobile.className)}
           {...nativeProps}
         >
-          {options.map(({ label, value }) => (
-            <option value={value} key={`${value}`}>
+          {options.map(({ label, value, disabled }) => (
+            <option value={value} key={`${value}`} disabled={disabled}>
               {label}
             </option>
           ))}

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

@@ -1,4 +1,6 @@
 .SimpleCell {
+  --vkui_internal--SimpleCell-before-inline-padding-end: var(--vkui--spacing_size_xl);
+
   display: flex;
   align-items: center;
   min-block-size: 48px;
@@ -24,7 +26,7 @@
   display: flex;
   align-items: center;
   padding-block: var(--vkui--spacing_size_s);
-  padding-inline-end: var(--vkui--spacing_size_xl);
+  padding-inline-end: var(--vkui_internal--SimpleCell-before-inline-padding-end);
   color: var(--vkui_internal--icon_color, var(--vkui--color_icon_accent));
 }
 

package/src/components/SimpleCell/SimpleCell.tsx

@@ -61,8 +61,10 @@ export interface SimpleCellOwnProps extends HasComponent {
    */
   disabled?: boolean;
   /**
-   * В режиме `auto` в iOS добавляет chevron справа.
-   * Передавать `always`, если предполагается переход при клике по ячейке.
+   * Управляет видимостью иконки шеврона `›`
+   *
+   * - `auto` - добавляет шеврон справа только для платформы `ios`;
+   * - `always` - всегда показывает шеврон.
    */
   expandable?: 'auto' | 'always';
   /**

package/src/components/Spacing/Spacing.module.css

@@ -2,8 +2,7 @@
   --vkui_internal--Spacing_gap: 0;
 
   position: relative;
-  block-size: var(--vkui_internal--Spacing_gap);
-  padding-block: calc(1px * var(--vkui_internal--Spacing_gap) / 2);
+  padding-block: calc(var(--vkui_internal--Spacing_gap) / 2);
   box-sizing: border-box;
 }
 

package/src/components/Spacing/Spacing.tsx

@@ -35,7 +35,7 @@ export const Spacing = ({ size = 'm', style, ...restProps }: SpacingProps): Reac
     <RootComponent
       {...restProps}
       style={{
-        ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size }),
+        ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: `${size}px` }),
         ...style,
       }}
       baseClassName={classNames(