@vkontakte/vkui 7.0.0 → 7.1.0

package/src/components/Popover/Popover.tsx

@@ -1,32 +1,16 @@
 'use client';
 
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
 import { usePatchChildren } from '../../hooks/usePatchChildren';
-import { injectAriaExpandedPropByRole } from '../../lib/accessibility';
-import { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';
 import {
   type FloatingComponentProps,
   type FloatingContentRenderProp,
   type OnShownChange,
-  useFloatingMiddlewaresBootstrap,
-  useFloatingWithInteractions,
-  usePlacementChangeCallback,
 } from '../../lib/floating';
 import type { HTMLAttributesWithRootRef } from '../../types';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import {
-  DEFAULT_ARROW_HEIGHT,
-  DEFAULT_ARROW_PADDING,
-  DefaultIcon,
-} from '../FloatingArrow/DefaultIcon';
-import {
-  FloatingArrow,
-  type FloatingArrowProps as FloatingArrowPropsPrivate,
-} from '../FloatingArrow/FloatingArrow';
-import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';
 import type { FocusTrapProps } from '../FocusTrap/FocusTrap';
-import styles from './Popover.module.css';
+import { usePopover } from './usePopover';
 
 /**
  * @alias
@@ -79,6 +63,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'zIndex'
   | 'disableFlipMiddleware'
   | 'customMiddlewares'
+  | 'strategy'
 >;
 
 /**
@@ -130,155 +115,10 @@ export interface PopoverProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */
-export const Popover = ({
-  // UsePopoverProps
-  arrow: withArrow,
-  arrowHeight = DEFAULT_ARROW_HEIGHT,
-  arrowPadding = DEFAULT_ARROW_PADDING,
-  placement: expectedPlacement = 'bottom-start',
-  onPlacementChange,
-  disableFlipMiddleware = false,
-  trigger = 'click',
-  content,
-  hoverDelay = 150,
-  closeAfterClick,
-  offsetByMainAxis = 8,
-  offsetByCrossAxis = 0,
-  sameWidth,
-  hideWhenReferenceHidden,
-  disabled,
-  disableInteractive,
-  disableCloseOnClickOutside,
-  disableCloseOnEscKey,
-  keepMounted = false,
-  customMiddlewares,
-  // uncontrolled
-  defaultShown = false,
-  // controlled
-  shown: shownProp,
-  onShownChange,
-  onShownChanged,
-
-  // Для AppRootPortal
-  usePortal = true,
-
-  // Для FloatingArrow
-  arrowProps,
-  ArrowIcon = DefaultIcon,
-
-  // FocusTrapProps
-  autoFocus = true,
-  restoreFocus = true,
-  className,
-  children,
-  noStyling = false,
-  zIndex = 'var(--vkui--z_index_popout)',
-  // a11y
-  role = 'dialog',
-  ...restPopoverProps
-}: PopoverProps): React.ReactNode => {
-  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
-  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
-    arrow: withArrow,
-    arrowRef,
-    arrowHeight,
-    arrowPadding,
-    placement: expectedPlacement,
-    offsetByMainAxis,
-    offsetByCrossAxis,
-    sameWidth,
-    hideWhenReferenceHidden,
-    disableFlipMiddleware,
-    customMiddlewares,
-  });
-  const {
-    placement: resolvedPlacement,
-    shown,
-    willBeHide,
-    refs,
-    referenceProps,
-    floatingProps,
-    middlewareData,
-    onClose,
-    onRestoreFocus,
-    onEscapeKeyDown,
-  } = useFloatingWithInteractions({
-    middlewares,
-    placement: strictPlacement,
-    trigger,
-    hoverDelay,
-    closeAfterClick,
-    disabled,
-    disableInteractive,
-    disableCloseOnClickOutside,
-    disableCloseOnEscKey,
-    defaultShown,
-    shown: shownProp,
-    onShownChange,
-    onShownChanged,
-  });
-
-  usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);
-
-  const [, child] = usePatchChildren<HTMLDivElement>(
-    children,
-    injectAriaExpandedPropByRole(referenceProps, shown, role),
-    refs.setReference,
-  );
-
-  let popover: React.ReactNode = null;
-  if (shown || keepMounted) {
-    const hidden = keepMounted && !shown;
-
-    let arrow: React.ReactElement | null = null;
-    if (withArrow) {
-      const { arrow: arrowCoords } = middlewareData;
-      arrow = (
-        <FloatingArrow
-          iconClassName={noStyling ? undefined : styles.arrow}
-          {...arrowProps}
-          coords={arrowCoords}
-          placement={resolvedPlacement}
-          getRootRef={setArrowRef}
-          Icon={ArrowIcon}
-        />
-      );
-    }
+export const Popover = ({ children, ...restProps }: PopoverProps): React.ReactNode => {
+  const { anchorRef, anchorProps: referenceProps, popover } = usePopover<HTMLDivElement>(restProps);
 
-    popover = (
-      <AppRootPortal usePortal={usePortal}>
-        <div
-          ref={refs.setFloating}
-          className={classNames(styles.host, hidden && styles.hidden)}
-          {...floatingProps}
-          style={{
-            zIndex: !hidden ? zIndex : undefined,
-            ...floatingProps.style,
-          }}
-        >
-          <FocusTrap
-            {...restPopoverProps}
-            role={role}
-            className={classNames(
-              styles.in,
-              noStyling ? undefined : styles.inWithStyling,
-              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,
-              transformOriginClassNames[resolvedPlacement],
-              className,
-            )}
-            mount={!hidden}
-            disabled={hidden}
-            autoFocus={disableInteractive ? false : autoFocus}
-            restoreFocus={restoreFocus ? () => onRestoreFocus(restoreFocus) : false}
-            onClose={onEscapeKeyDown}
-          >
-            {arrow}
-            {typeof content === 'function' ? content({ onClose }) : content}
-          </FocusTrap>
-        </div>
-      </AppRootPortal>
-    );
-  }
+  const [, child] = usePatchChildren<HTMLDivElement>(children, referenceProps, anchorRef);
 
   return (
     <React.Fragment>

package/src/components/Popover/usePopover.tsx

@@ -0,0 +1,183 @@
+import { type Ref } from 'react';
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { injectAriaExpandedPropByRole } from '../../lib/accessibility';
+import { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';
+import {
+  useFloatingMiddlewaresBootstrap,
+  useFloatingWithInteractions,
+  usePlacementChangeCallback,
+} from '../../lib/floating';
+import { type ReferenceProps } from '../../lib/floating/useFloatingWithInteractions/types';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import {
+  DEFAULT_ARROW_HEIGHT,
+  DEFAULT_ARROW_PADDING,
+  DefaultIcon,
+} from '../FloatingArrow/DefaultIcon';
+import { FloatingArrow } from '../FloatingArrow/FloatingArrow';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { type PopoverProps } from './Popover';
+import styles from './Popover.module.css';
+
+export type UsePopoverProps = Omit<PopoverProps, 'children'> & {
+  [key: `data-${string}`]: string | number | boolean;
+};
+
+export type UsePopoverResult<ElementType extends HTMLElement = HTMLElement> = {
+  anchorRef: Ref<ElementType>;
+  anchorProps: ReferenceProps<ElementType>;
+  popover: React.ReactNode | null;
+};
+
+export const usePopover = <ElementType extends HTMLElement = HTMLElement>({
+  // UsePopoverProps
+  arrow: withArrow,
+  arrowHeight = DEFAULT_ARROW_HEIGHT,
+  arrowPadding = DEFAULT_ARROW_PADDING,
+  placement: expectedPlacement = 'bottom-start',
+  onPlacementChange,
+  disableFlipMiddleware = false,
+  trigger = 'click',
+  strategy,
+  content,
+  hoverDelay = 150,
+  closeAfterClick,
+  offsetByMainAxis = 8,
+  offsetByCrossAxis = 0,
+  sameWidth,
+  hideWhenReferenceHidden,
+  disabled,
+  disableInteractive,
+  disableCloseOnClickOutside,
+  disableCloseOnEscKey,
+  keepMounted = false,
+  customMiddlewares,
+  // uncontrolled
+  defaultShown = false,
+  // controlled
+  shown: shownProp,
+  onShownChange,
+  onShownChanged,
+
+  // Для AppRootPortal
+  usePortal = true,
+
+  // Для FloatingArrow
+  arrowProps,
+  ArrowIcon = DefaultIcon,
+
+  // FocusTrapProps
+  autoFocus = true,
+  restoreFocus = true,
+  className,
+  noStyling = false,
+  zIndex = 'var(--vkui--z_index_popout)',
+  // a11y
+  role = 'dialog',
+  ...restPopoverProps
+}: UsePopoverProps): UsePopoverResult<ElementType> => {
+  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
+  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
+    arrow: withArrow,
+    arrowRef,
+    arrowHeight,
+    arrowPadding,
+    placement: expectedPlacement,
+    offsetByMainAxis,
+    offsetByCrossAxis,
+    sameWidth,
+    hideWhenReferenceHidden,
+    disableFlipMiddleware,
+    customMiddlewares,
+  });
+  const {
+    placement: resolvedPlacement,
+    shown,
+    willBeHide,
+    refs,
+    referenceProps,
+    floatingProps,
+    middlewareData,
+    onClose,
+    onRestoreFocus,
+    onEscapeKeyDown,
+  } = useFloatingWithInteractions({
+    middlewares,
+    placement: strictPlacement,
+    trigger,
+    strategy,
+    hoverDelay,
+    closeAfterClick,
+    disabled,
+    disableInteractive,
+    disableCloseOnClickOutside,
+    disableCloseOnEscKey,
+    defaultShown,
+    shown: shownProp,
+    onShownChange,
+    onShownChanged,
+  });
+
+  usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);
+
+  let popover: React.ReactNode = null;
+  if (shown || keepMounted) {
+    const hidden = keepMounted && !shown;
+
+    let arrow: React.ReactElement | null = null;
+    if (withArrow) {
+      const { arrow: arrowCoords } = middlewareData;
+      arrow = (
+        <FloatingArrow
+          iconClassName={noStyling ? undefined : styles.arrow}
+          {...arrowProps}
+          coords={arrowCoords}
+          placement={resolvedPlacement}
+          getRootRef={setArrowRef}
+          Icon={ArrowIcon}
+        />
+      );
+    }
+
+    popover = (
+      <AppRootPortal usePortal={usePortal}>
+        <div
+          ref={refs.setFloating}
+          className={classNames(styles.host, hidden && styles.hidden)}
+          {...floatingProps}
+          style={{
+            zIndex: !hidden ? zIndex : undefined,
+            ...floatingProps.style,
+          }}
+        >
+          <FocusTrap
+            {...restPopoverProps}
+            role={role}
+            className={classNames(
+              styles.in,
+              noStyling ? undefined : styles.inWithStyling,
+              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,
+              transformOriginClassNames[resolvedPlacement],
+              className,
+            )}
+            mount={!hidden}
+            disabled={hidden}
+            autoFocus={disableInteractive ? false : autoFocus}
+            restoreFocus={restoreFocus ? () => onRestoreFocus(restoreFocus) : false}
+            onClose={onEscapeKeyDown}
+          >
+            {arrow}
+            {typeof content === 'function' ? content({ onClose }) : content}
+          </FocusTrap>
+        </div>
+      </AppRootPortal>
+    );
+  }
+
+  return {
+    anchorRef: refs.setReference,
+    anchorProps: injectAriaExpandedPropByRole(referenceProps, shown, role),
+    popover,
+  };
+};

package/src/components/Popper/Popper.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { mergeStyle } from '../../helpers/mergeStyle';
 import { useExternRef } from '../../hooks/useExternRef';
 import {
   autoUpdateFloatingElement,
@@ -81,7 +82,7 @@ export interface PopperCommonProps
 }
 
 export interface PopperProps extends PopperCommonProps {
-  targetRef: React.RefObject<HTMLElement> | VirtualElement;
+  targetRef: React.RefObject<HTMLElement | null> | VirtualElement;
 }
 
 /**
@@ -113,6 +114,8 @@ export const Popper = ({
   children,
   usePortal = true,
   onPlacementChange,
+  zIndex,
+  style,
   ...restProps
 }: PopperProps): React.ReactNode => {
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
@@ -159,9 +162,17 @@ export const Popper = ({
     refs.setReference('current' in targetRef ? targetRef.current : targetRef);
   }, [refs.setReference, targetRef]);
 
+  const dropdownStyle =
+    typeof zIndex !== 'undefined'
+      ? {
+          zIndex,
+        }
+      : undefined;
+
   const dropdown = (
     <RootComponent
       {...restProps}
+      style={mergeStyle(dropdownStyle, style)}
       baseClassName={styles.host}
       getRootRef={handleRootRef}
       baseStyle={convertFloatingDataToReactCSSProperties(

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -99,7 +99,7 @@ export const PullToRefresh = ({
     }
   }, [touchDown, resetRefreshingState]);
 
-  const waitFetchingTimeoutId = React.useRef<NodeJS.Timeout>();
+  const waitFetchingTimeoutId = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   useIsomorphicLayoutEffect(() => {
     const prevIsFetching = prevIsFetchingRef.current;

package/src/components/Removable/Removable.tsx

@@ -24,11 +24,11 @@ export interface RemovableProps {
    */
   onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;
   /**
-   * (test) iOS only. testId кнопки, которая активирует кнопку удаления
+   * Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only)
    */
   toggleButtonTestId?: string;
   /**
-   * (test) testId кнопки удаления
+   * Передает атрибут `data-testid` для кнопки удаления
    */
   removeButtonTestId?: string;
   /**

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

@@ -46,9 +46,23 @@
 }
 
 .contentBefore {
+  display: flex;
+  flex-direction: column;
   min-inline-size: 0;
 }
 
+.contentAlignStart {
+  justify-content: flex-start;
+}
+
+.contentAlignCenter {
+  justify-content: center;
+}
+
+.contentAlignEnd {
+  justify-content: flex-end;
+}
+
 .contentAfter {
   display: flex;
   flex-direction: column;
@@ -61,15 +75,15 @@
   flex-basis: 100px;
 }
 
-.contentAfterAlignStart {
+.alignSelfStart {
   align-self: flex-start;
 }
 
-.contentAfterAlignCenter {
+.alignSelfCenter {
   align-self: center;
 }
 
-.contentAfterAlignEnd {
+.alignSelfEnd {
   align-self: flex-end;
 }
 

package/src/components/RichCell/RichCell.tsx

@@ -13,12 +13,20 @@ const sizeYClassNames = {
   compact: styles.sizeYCompact,
 };
 
-const alignAfterClassNames = {
-  start: styles.contentAfterAlignStart,
-  center: styles.contentAfterAlignCenter,
-  end: styles.contentAfterAlignEnd,
+const alignSelfClassNames = {
+  start: styles.alignSelfStart,
+  center: styles.alignSelfCenter,
+  end: styles.alignSelfEnd,
 };
 
+const alignContentClassNames = {
+  start: styles.contentAlignStart,
+  center: styles.contentAlignCenter,
+  end: styles.contentAlignEnd,
+};
+
+type Align = 'start' | 'center' | 'end';
+
 export interface RichCellProps extends TappableProps {
   /**
    * Контейнер для текста над `children`.
@@ -59,10 +67,18 @@ export interface RichCellProps extends TappableProps {
    * Текст под `after`.
    */
   afterCaption?: React.ReactNode;
+  /**
+   * Выравнивание before компонента по вертикали
+   */
+  beforeAlign?: Align;
+  /**
+   * Выравнивание центрального контента по вертикали
+   */
+  contentAlign?: Align;
   /**
    * Выравнивание after компонента по вертикали
    */
-  afterAlign?: 'start' | 'center' | 'end';
+  afterAlign?: Align;
   /**
    * Убирает анимацию нажатия.
    */
@@ -89,6 +105,8 @@ export const RichCell: React.FC<RichCellProps> & {
   bottom,
   actions,
   multiline,
+  beforeAlign = 'start',
+  contentAlign = 'start',
   afterAlign = 'start',
   ...restProps
 }: RichCellProps) => {
@@ -99,7 +117,7 @@ export const RichCell: React.FC<RichCellProps> & {
       return;
     }
     return (
-      <div className={classNames(styles.contentAfter, alignAfterClassNames[afterAlign])}>
+      <div className={classNames(styles.contentAfter, alignSelfClassNames[afterAlign])}>
         {after && <div className={styles.afterChildren}>{after}</div>}
         {afterCaption && <div className={styles.afterCaption}>{afterCaption}</div>}
       </div>
@@ -115,11 +133,13 @@ export const RichCell: React.FC<RichCellProps> & {
         sizeY !== 'regular' && sizeYClassNames[sizeY],
       )}
     >
-      {before && <div className={styles.before}>{before}</div>}
+      {before && (
+        <div className={classNames(styles.before, alignSelfClassNames[beforeAlign])}>{before}</div>
+      )}
       <div className={styles.inWrapper}>
         <div className={styles.in}>
           <div className={styles.content}>
-            <div className={styles.contentBefore}>
+            <div className={classNames(styles.contentBefore, alignContentClassNames[contentAlign])}>
               {overTitle && (
                 <Subhead Component="div" className={styles.overTitle}>
                   {overTitle}

package/src/components/Root/Root.tsx

@@ -51,7 +51,7 @@ export const Root = ({
   const { animate } = React.useContext(SplitColContext);
   const disableAnimation = !transitionMotionEnabled || !animate;
 
-  const views = React.Children.toArray(children) as React.ReactElement[];
+  const views = React.Children.toArray(children) as Array<React.ReactElement<NavIdProps>>;
 
   const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({
     activeView: _activeView,
@@ -127,7 +127,9 @@ export const Root = ({
         return (
           <div
             key={viewId}
-            ref={(e) => viewId && (viewNodes[viewId] = e)}
+            ref={(e) => {
+              viewId && (viewNodes[viewId] = e);
+            }}
             onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
             className={classNames(
               styles.view,

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -4,11 +4,15 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 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 { RootComponent } from '../RootComponent/RootComponent';
-import { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';
+import {
+  SegmentedControlOption,
+  type SegmentedControlOptionProps,
+} from './SegmentedControlOption/SegmentedControlOption';
 import styles from './SegmentedControl.module.css';
 
 const sizeYClassNames = {
@@ -25,7 +29,7 @@ export interface SegmentedControlOptionInterface
    * Рекомендуется использовать только иконки с размером 20
    */
   before?: React.ReactNode;
-  label: React.ReactChild;
+  label: React.ReactNode;
   value: SegmentedControlValue;
 }
 
@@ -52,6 +56,7 @@ export const SegmentedControl = ({
   children,
   onChange: onChangeProp,
   value: valueProp,
+  role = 'radiogroup',
   ...restProps
 }: SegmentedControlProps): React.ReactNode => {
   const id = React.useId();
@@ -64,6 +69,8 @@ export const SegmentedControl = ({
 
   const { sizeY = 'none' } = useAdaptivity();
 
+  const { tabsRef } = useTabsNavigation(role === 'tablist');
+
   const actualIndex = options.findIndex((option) => option.value === value);
 
   useIsomorphicLayoutEffect(() => {
@@ -83,7 +90,7 @@ export const SegmentedControl = ({
         size === 'l' && styles.sizeL,
       )}
     >
-      <div role="radiogroup" className={styles.in}>
+      <div role={role} ref={tabsRef} className={styles.in}>
         {actualIndex > -1 && (
           <div
             aria-hidden
@@ -94,17 +101,42 @@ export const SegmentedControl = ({
             }}
           />
         )}
-        {options.map(({ label, ...optionProps }) => (
-          <SegmentedControlOption
-            key={`${optionProps.value}`}
-            {...optionProps}
-            name={name ?? id}
-            checked={value === optionProps.value}
-            onChange={() => onChange(optionProps.value)}
-          >
-            {label}
-          </SegmentedControlOption>
-        ))}
+        {options.map(({ label, before, ...optionProps }) => {
+          const selected = value === optionProps.value;
+          const onSelect = () => onChange(optionProps.value);
+          const optionRootProps: SegmentedControlOptionProps['rootProps'] =
+            role === 'tablist'
+              ? {
+                  'role': 'tab',
+                  'aria-selected': selected,
+                  'onClick': onSelect,
+                  'tabIndex': optionProps.tabIndex ?? (selected ? 0 : -1),
+                  ...optionProps,
+                }
+              : undefined;
+
+          const optionInputProps: SegmentedControlOptionProps['inputProps'] =
+            role !== 'tablist'
+              ? {
+                  role: optionProps.role || (role === 'radiogroup' ? 'radio' : undefined),
+                  checked: selected,
+                  onChange: onSelect,
+                  name: name ?? id,
+                  ...optionProps,
+                }
+              : undefined;
+
+          return (
+            <SegmentedControlOption
+              key={`${optionProps.value}`}
+              before={before}
+              rootProps={optionRootProps}
+              inputProps={optionInputProps}
+            >
+              {label}
+            </SegmentedControlOption>
+          );
+        })}
       </div>
     </RootComponent>
   );