@vkontakte/vkui 6.2.1 → 6.3.0

package/src/components/Popper/Popper.tsx

@@ -113,7 +113,7 @@ export const Popper = ({
   style: styleProp,
   onPlacementChange,
   ...restProps
-}: PopperProps) => {
+}: PopperProps): React.ReactNode => {
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
 
   const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({

package/src/components/Progress/Progress.tsx

@@ -51,7 +51,7 @@ export const Progress = ({
   height,
   style: styleProps,
   ...restProps
-}: ProgressProps) => {
+}: ProgressProps): React.ReactNode => {
   const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
   const title = `${progress} / ${PROGRESS_MAX_VALUE}`;
 

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -3,7 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
 import { usePlatform } from '../../hooks/usePlatform';
 import { usePrevious } from '../../hooks/usePrevious';
-import { DOMProps, useDOM } from '../../lib/dom';
+import { DOMProps, initializeBrowserGesturePreventionEffect, useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { AnyFunction, HasChildren } from '../../types';
 import { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';
@@ -51,10 +51,10 @@ export const PullToRefresh = ({
   onRefresh,
   className,
   ...restProps
-}: PullToRefreshProps) => {
+}: PullToRefreshProps): React.ReactNode => {
   const platform = usePlatform();
   const scroll = useScroll();
-  const { window, document } = useDOM();
+  const { window } = useDOM();
   const prevIsFetching = usePrevious(isFetching);
 
   const initParams = React.useMemo(
@@ -150,42 +150,12 @@ export const PullToRefresh = ({
   ]);
 
   useIsomorphicLayoutEffect(
-    function toggleBodyOverscrollBehavior() {
-      /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */
-      if (!window || !document) {
-        return;
-      }
-
-      /**
-       * ⚠️ В частности, необходимо для iOS 15. Начиная с этой версии в Safari добавили
-       * pull-to-refresh. CSS св-во `overflow-behavior` появился только с iOS 16.
-       *
-       * Во вторую очередь, полезна блокированием скролла, чтобы пользователь дождался обновления
-       * данных.
-       */
-      /* istanbul ignore next: в jest не протестировать */
-      const handleWindowTouchMoveForPreventIOSViewportBounce = (event: TouchEvent) => {
-        event.preventDefault();
-        event.stopPropagation();
-      };
-
-      if (watching || refreshing) {
-        // eslint-disable-next-line no-restricted-properties
-        document.documentElement.classList.add('vkui--disable-overscroll-behavior');
-        /* istanbul ignore next: в jest не протестировать */
-        window.addEventListener('touchmove', handleWindowTouchMoveForPreventIOSViewportBounce, {
-          passive: false,
-        });
-      }
-
-      return () => {
-        // eslint-disable-next-line no-restricted-properties
-        document.documentElement.classList.remove('vkui--disable-overscroll-behavior');
-        /* istanbul ignore next: в jest не протестировать */
-        window.removeEventListener('touchmove', handleWindowTouchMoveForPreventIOSViewportBounce);
-      };
+    function toggleDocumentOverscrollBehavior() {
+      return window && (watching || refreshing)
+        ? initializeBrowserGesturePreventionEffect(window)
+        : undefined;
     },
-    [window, document, watching, refreshing],
+    [window, watching, refreshing],
   );
 
   const startYRef = React.useRef(0);

package/src/components/PullToRefresh/PullToRefreshSpinner.tsx

@@ -23,7 +23,7 @@ export const PullToRefreshSpinner = ({
   progress = 0,
   children = 'Пожалуйста, подождите...',
   ...restProps
-}: PullToRefreshSpinnerProps) => {
+}: PullToRefreshSpinnerProps): React.ReactNode => {
   const radius = 0.5 * size - 0.5 * strokeWidth;
   const dasharray = 2 * Math.PI * radius;
   const circleCenter = 0.5 * size;

package/src/components/Radio/Radio.tsx

@@ -58,7 +58,7 @@ export const Radio = ({
   hasActive,
   focusVisibleMode,
   ...restProps
-}: RadioProps) => {
+}: RadioProps): React.ReactNode => {
   const platform = usePlatform();
   const { sizeY = 'none' } = useAdaptivity();
 

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -10,13 +11,17 @@ export interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
  */
-export const RadioGroup = ({ mode = 'vertical', ...restProps }: RadioGroupProps) => (
+export const RadioGroup = ({
+  mode = 'vertical',
+  ...restProps
+}: RadioGroupProps): React.ReactNode => (
   <RootComponent
     baseClassName={classNames(
       styles['RadioGroup'],
       'vkuiInternalRadioGroup',
       mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],
     )}
+    role="radiogroup"
     {...restProps}
   />
 );

package/src/components/Removable/Removable.tsx

@@ -162,7 +162,7 @@ export const Removable = ({
   toggleButtonTestId,
   removeButtonTestId,
   ...restProps
-}: RemovableOwnProps) => {
+}: RemovableOwnProps): React.ReactNode => {
   const platform = usePlatform();
 
   const onRemoveClick = (e: React.MouseEvent) => {

package/src/components/RichCell/RichCell.module.css

@@ -1,6 +1,6 @@
 .RichCell {
   display: flex;
-  padding-block: 8px;
+  padding-block: var(--vkui--spacing_size_m);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   min-block-size: 64px;
   box-sizing: border-box;
@@ -20,7 +20,7 @@
 }
 
 .RichCell__before {
-  margin-inline-end: 12px;
+  margin-inline-end: var(--vkui--spacing_size_xl);
 }
 
 .RichCell__in {
@@ -47,7 +47,7 @@
   flex-direction: column;
   align-items: flex-end;
   flex-shrink: 0;
-  padding-inline-start: 12px;
+  padding-inline-start: var(--vkui--spacing_size_xl);
   box-sizing: border-box;
 }
 
@@ -56,7 +56,7 @@
 }
 
 .RichCell__after-caption {
-  margin-block-start: 2px;
+  margin-block-start: var(--vkui--spacing_size_2xs);
   font-size: var(--vkui--font_footnote--font_size--regular);
   line-height: var(--vkui--font_footnote--line_height--regular);
   color: var(--vkui--color_text_secondary);
@@ -98,11 +98,11 @@
 }
 
 .RichCell__bottom {
-  margin-block-start: 5px;
+  margin-block-start: var(--vkui--spacing_size_s);
 }
 
 .RichCell__actions {
-  margin-block-start: 8px;
+  margin-block-start: var(--vkui--spacing_size_m);
 }
 
 .RichCell__children,

package/src/components/RichCell/RichCell.tsx

@@ -64,7 +64,9 @@ export interface RichCellProps extends TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
  */
-export const RichCell = ({
+export const RichCell: React.FC<RichCellProps> & {
+  Icon: typeof RichCellIcon;
+} = ({
   subhead,
   children,
   text,

package/src/components/RichCell/RichCellIcon/RichCellIcon.module.css

@@ -7,6 +7,6 @@
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
-  padding-block: 6px 6px;
+  padding-block: 6px;
   padding-inline: 12px 0;
 }

package/src/components/RichCell/RichCellIcon/RichCellIcon.tsx

@@ -4,6 +4,6 @@ import styles from './RichCellIcon.module.css';
 
 export type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
 
-export const RichCellIcon = (props: RichCellIconProps) => {
+export const RichCellIcon = (props: RichCellIconProps): React.ReactNode => {
   return <RootComponent baseClassName={styles['RichCellIcon']} {...props} />;
 };

package/src/components/Root/Root.tsx

@@ -38,7 +38,7 @@ export const Root = ({
   onTransition,
   nav,
   ...restProps
-}: RootProps) => {
+}: RootProps): React.ReactNode => {
   const scroll = React.useContext(ScrollContext);
   const platform = usePlatform();
   const { document } = useDOM();

package/src/components/RootComponent/RootComponent.tsx

@@ -18,6 +18,6 @@ export const RootComponent = <T,>({
   className,
   getRootRef,
   ...restProps
-}: RootComponentProps<T>) => (
+}: RootComponentProps<T>): React.ReactNode => (
   <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />
 );

package/src/components/ScreenSpinner/Icon48CancelCircle.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (
+export const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>): React.ReactNode => (
   <svg
     className="vkuiIcon"
     width="48"

package/src/components/ScreenSpinner/Icon48DoneOutline.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (
+export const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>): React.ReactNode => (
   <svg
     className="vkuiIcon"
     width="48"

package/src/components/ScreenSpinner/ScreenSpinner.tsx

@@ -22,7 +22,7 @@ export const ScreenSpinner = ({
   onClick,
   children = 'Пожалуйста, подождите...',
   ...restProps
-}: ScreenSpinnerProps) => {
+}: ScreenSpinnerProps): React.ReactNode => {
   const hideSpinner = state === 'done' || state === 'error';
 
   const Icon = {

package/src/components/ScrollArrow/ScrollArrow.tsx

@@ -65,7 +65,7 @@ export const ScrollArrow = ({
   label: labelProp,
   children = <ArrowIcon size={size} />,
   ...restProps
-}: ScrollArrowProps) => {
+}: ScrollArrowProps): React.ReactNode => {
   const label = labelProp ?? labelDirection[direction];
 
   return (

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

@@ -159,21 +159,20 @@
 
 .Search__after {
   flex: 0;
-  transform: translate(50%);
   transform-origin: left;
   min-inline-size: initial;
   max-inline-size: min-content;
   pointer-events: none;
-  transition:
-    flex 0.3s var(--vkui--animation_easing_platform),
-    transform 0.3s var(--vkui--animation_easing_platform);
+  transition-timing-function: var(--vkui--animation_easing_platform);
+  transition-duration: 0.3s;
+  transition-property: flex, margin-inline;
   overflow: hidden;
+  margin-inline: 0;
 }
 
 .Search--focused .Search__after,
 .Search--has-value .Search__after {
   flex: 1;
-  transform: translate(0);
   pointer-events: initial;
   margin-inline: 4px calc(4px - var(--vkui--size_base_padding_horizontal--regular));
 }

package/src/components/Search/Search.tsx

@@ -12,11 +12,16 @@ import { touchEnabled } from '../../lib/touch';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { HasRef, HasRootRef } from '../../types';
 import { Button } from '../Button/Button';
-import { IconButton } from '../IconButton/IconButton';
+import { IconButton, IconButtonProps } from '../IconButton/IconButton';
 import { Headline } from '../Typography/Headline/Headline';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Search.module.css';
 
+export type RenderIconButtonFn = (
+  icon: React.ReactNode,
+  props?: Partial<IconButtonProps>,
+) => React.ReactNode;
+
 export interface SearchProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
     HasRootRef<HTMLDivElement>,
@@ -26,7 +31,7 @@ export interface SearchProps
    */
   after?: React.ReactNode;
   before?: React.ReactNode;
-  icon?: React.ReactNode;
+  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);
   onIconClick?: React.PointerEventHandler<HTMLElement>;
   defaultValue?: string;
   iconLabel?: string;
@@ -55,7 +60,7 @@ export const Search = ({
   placeholder = 'Поиск',
   after = 'Отмена',
   getRef,
-  icon,
+  icon: iconProp,
   onIconClick = noop,
   style,
   autoComplete = 'off',
@@ -67,7 +72,7 @@ export const Search = ({
   findButtonText = 'Найти',
   onFindButtonClick,
   ...inputProps
-}: SearchProps) => {
+}: SearchProps): React.ReactNode => {
   const inputRef = useExternRef(getRef);
   const {
     value: isFocused,
@@ -135,6 +140,21 @@ export const Search = ({
     setHasValue(Boolean(inputProps.defaultValue));
   });
 
+  const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (
+    <IconButton
+      hoverMode="opacity"
+      onPointerDown={onIconClickStart}
+      className={styles['Search__icon']}
+      onFocus={setFocusedTrue}
+      onBlur={setFocusedFalse}
+      onClick={noop}
+      {...props}
+    >
+      <VisuallyHidden>{iconLabel}</VisuallyHidden>
+      {icon}
+    </IconButton>
+  );
+
   return (
     <div
       className={classNames(
@@ -145,7 +165,7 @@ export const Search = ({
         isFocused && styles['Search--focused'],
         hasValue && styles['Search--has-value'],
         after && styles['Search--has-after'],
-        icon && styles['Search--has-icon'],
+        iconProp && styles['Search--has-icon'],
         inputProps.disabled && styles['Search--disabled'],
         !noPadding && styles['Search--withPadding'],
         className,
@@ -176,19 +196,10 @@ export const Search = ({
           />
         </div>
         <div className={styles['Search__controls']}>
-          {icon && (
-            <IconButton
-              hoverMode="opacity"
-              onPointerDown={onIconClickStart}
-              className={styles['Search__icon']}
-              onFocus={setFocusedTrue}
-              onBlur={setFocusedFalse}
-              onClick={noop}
-            >
-              <VisuallyHidden>{iconLabel}</VisuallyHidden>
-              {icon}
-            </IconButton>
-          )}
+          {iconProp &&
+            (typeof iconProp === 'function'
+              ? iconProp(renderIconButton)
+              : renderIconButton(iconProp))}
           <IconButton
             hoverMode="opacity"
             onPointerDown={onIconCancelClickStart}

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -51,7 +51,7 @@ export const SegmentedControl = ({
   onChange: onChangeProp,
   value: valueProp,
   ...restProps
-}: SegmentedControlProps) => {
+}: SegmentedControlProps): React.ReactNode => {
   const id = React.useId();
 
   const [value, onChange] = useCustomEnsuredControl({

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx

@@ -24,7 +24,7 @@ export const SegmentedControlOption = ({
   getRootRef,
   before,
   ...restProps
-}: SegmentedControlOptionProps) => (
+}: SegmentedControlOptionProps): React.ReactNode => (
   <Clickable
     Component="label"
     baseClassName={styles['SegmentedControlOption']}

package/src/components/Select/Select.tsx

@@ -17,7 +17,7 @@ export const Select = <OptionT extends CustomSelectOptionInterface>({
   children,
   className,
   ...props
-}: SelectProps<OptionT>) => {
+}: SelectProps<OptionT>): React.ReactNode => {
   const {
     options = [],
     searchable,
@@ -44,6 +44,10 @@ export const Select = <OptionT extends CustomSelectOptionInterface>({
     nativeSelectTestId,
     after,
     mode,
+    getSelectInputRef,
+    overscrollBehavior,
+    beforeAlign,
+    afterAlign,
     ...restProps
   } = props;
 

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -45,7 +45,7 @@ export const SelectMimicry = ({
   className,
   autoFocus,
   ...restProps
-}: SelectMimicryProps) => {
+}: SelectMimicryProps): React.ReactNode => {
   const rootRef = useExternRef(getRootRef);
 
   const { sizeY = 'none' } = useAdaptivity();

package/src/components/SelectTypography/SelectTypography.tsx

@@ -15,7 +15,7 @@ export const SelectTypography = ({
   selectType = 'default',
   children,
   ...restProps
-}: SelectTypographyProps) => {
+}: SelectTypographyProps): React.ReactNode => {
   return (
     <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>
       {children}

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

@@ -1,7 +1,15 @@
-.Separator {
+.Separator--mode-primary {
   color: var(--vkui--color_separator_primary);
 }
 
+.Separator--mode-secondary {
+  color: var(--vkui--color_separator_secondary);
+}
+
+.Separator--mode-primaryAlpha {
+  color: var(--vkui--color_separator_primary_alpha);
+}
+
 .Separator__in {
   block-size: var(--vkui--size_border--regular);
   margin: 0;

package/src/components/Separator/Separator.tsx

@@ -4,19 +4,33 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Separator.module.css';
 
 export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Стиль отображения компонента
+   */
+  mode?: 'primary' | 'secondary' | 'primary-alpha';
   /**
    * С этим свойством компонент не будет иметь отступы слева и справа
    */
   wide?: boolean;
 }
 
+const modeClassNames = {
+  'primary': styles['Separator--mode-primary'],
+  'secondary': styles['Separator--mode-secondary'],
+  'primary-alpha': styles['Separator--mode-primaryAlpha'],
+};
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */
-export const Separator = ({ wide, ...restProps }: SeparatorProps) => (
+export const Separator = ({
+  wide,
+  mode = 'primary',
+  ...restProps
+}: SeparatorProps): React.ReactNode => (
   <RootComponent
     {...restProps}
-    baseClassName={classNames(styles['Separator'], !wide && styles['Separator--padded'])}
+    baseClassName={classNames(!wide && styles['Separator--padded'], modeClassNames[mode])}
   >
     <hr className={styles['Separator__in']} />
   </RootComponent>

package/src/components/SimpleCell/Chevron/Chevron.tsx

@@ -10,7 +10,7 @@ export interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width
   size?: 's' | 'm';
 }
 
-export const Chevron = ({ size = 'm', ...restProps }: ChevronProps) => {
+export const Chevron = ({ size = 'm', ...restProps }: ChevronProps): React.ReactNode => {
   const Icon = iconSize[size];
 
   return <Icon {...restProps} />;

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

@@ -19,14 +19,14 @@
 .SimpleCell__before {
   display: flex;
   align-items: center;
-  padding-block: 6px;
-  padding-inline-end: 12px;
+  padding-block: var(--vkui--spacing_size_s);
+  padding-inline-end: var(--vkui--spacing_size_xl);
   color: var(--vkui_internal--icon_color, var(--vkui--color_icon_accent));
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .SimpleCell__before > :global(.vkuiIcon) {
-  padding-inline-end: 4px;
+  padding-inline-end: var(--vkui--spacing_size_xs);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -42,7 +42,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding-block: 10px;
+  padding-block: var(--vkui--spacing_size_l);
   max-inline-size: 100%;
   flex-grow: 1;
   min-inline-size: 0;
@@ -51,7 +51,7 @@
 
 /* stylelint-disable-next-line selector-max-universal -- gap: 2px */
 .SimpleCell__middle > *:not(:first-child) {
-  margin-block-start: 2px;
+  margin-block-start: var(--vkui--spacing_size_2xs);
 }
 
 .SimpleCell__subhead {
@@ -101,7 +101,7 @@
 
 /* stylelint-disable-next-line selector-max-universal -- gap: 4px */
 .SimpleCell__content > *:not(:last-child) {
-  margin-inline-end: 4px;
+  margin-inline-end: var(--vkui--spacing_size_xs);
 }
 
 .SimpleCell__indicator {
@@ -111,7 +111,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  padding-inline-start: 12px;
+  padding-inline-start: var(--vkui--spacing_size_xl);
 }
 
 .SimpleCell__after {
@@ -123,17 +123,17 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .SimpleCell__after > :global(.vkuiIcon) {
-  padding-inline-start: 8px;
+  padding-inline-start: var(--vkui--spacing_size_m);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .SimpleCell__after > :global(.vkuiIcon):last-child {
-  padding-inline-end: 2px;
+  padding-inline-end: var(--vkui--spacing_size_2xs);
 }
 
 .SimpleCell__chevronIcon {
   color: var(--vkui--color_icon_tertiary);
-  padding-inline-start: 12px;
+  padding-inline-start: var(--vkui--spacing_size_xl);
 }
 
 /**
@@ -145,7 +145,7 @@
 }
 
 .SimpleCell--sizeY-compact .SimpleCell__before {
-  padding-block: 4px;
+  padding-block: var(--vkui--spacing_size_xs);
 }
 
 @media (--sizeY-compact) {
@@ -154,7 +154,7 @@
   }
 
   .SimpleCell--sizeY-none .SimpleCell__before {
-    padding-block: 4px;
+    padding-block: var(--vkui--spacing_size_xs);
   }
 }
 

package/src/components/SimpleCell/SimpleCell.tsx

@@ -97,7 +97,7 @@ export const SimpleCell = ({
   className,
   chevronSize = 'm',
   ...restProps
-}: SimpleCellProps) => {
+}: SimpleCellProps): React.ReactNode => {
   const platform = usePlatform();
 
   const hasChevron = expandable === 'always' || (expandable === 'auto' && platform === 'ios');