@vkontakte/vkui 6.1.1 → 6.1.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.1.1",
+  "version": "6.1.2",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",

package/src/components/Clickable/useState.tsx

@@ -38,6 +38,13 @@ export interface StateProps {
   hoverClassName?: string;
 }
 
+interface StateHookProps extends StateProps {
+  /**
+   * Блокирование активации состояний
+   */
+  lockState: boolean;
+}
+
 export const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
 
 export const ACTIVE_DELAY = 70;
@@ -45,10 +52,10 @@ export const ACTIVE_DELAY = 70;
 /**
  * Управляет наведением на компонент, игнорирует тач события
  */
-function useHover({ hovered, hoverClassName, hasHover = true }: StateProps) {
+function useHover({ hovered, hoverClassName, hasHover = true, lockState }: StateHookProps) {
   const [hoveredState, setHover] = React.useState(false);
 
-  const hover = hasHover && (hovered || hoveredState) ? hoverClassName : undefined;
+  const hover = hasHover && !lockState && (hovered || hoveredState) ? hoverClassName : undefined;
 
   const onPointerEnter: React.PointerEventHandler<any> = (e) => {
     if (e.pointerType === 'touch') {
@@ -77,13 +84,15 @@ function useActive({
   activeClassName,
   activeEffectDelay,
   hasActive = true,
-}: StateProps) {
+  lockState,
+}: StateHookProps) {
   const [activatedState, setActivated] = useStateWithDelay(false);
 
   // Список нажатий которые не требуется отменять
   const pointersUp = React.useMemo(() => new Set<number>(), []);
 
-  const active = hasActive && (activated || activatedState) ? activeClassName : undefined;
+  const active =
+    hasActive && !lockState && (activated || activatedState) ? activeClassName : undefined;
 
   const onPointerDown = () => setActivated(true, ACTIVE_DELAY);
   const onPointerCancel: React.PointerEventHandler = (e) => {
@@ -133,8 +142,9 @@ export function useState({ hasHover, hasActive, ...restProps }: StateProps) {
   const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();
 
   const props = {
-    hasHover: hasHover && !lockState,
-    hasActive: hasActive && !lockState,
+    hasHover,
+    hasActive,
+    lockState,
     ...restProps,
   };
 

package/src/components/CustomScrollView/CustomScrollView.module.css

@@ -15,6 +15,10 @@
   position: relative;
 }
 
+.CustomScrollView__box-content {
+  position: relative;
+}
+
 .CustomScrollView__barY:active + .CustomScrollView__box {
   pointer-events: none;
 }

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -3,6 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { stopPropagation } from '../../lib/utils';
@@ -57,6 +58,7 @@ export const CustomScrollView = ({
   const trackerTop = React.useRef(0);
 
   const boxRef = useExternRef(externalBoxRef);
+  const boxContentRef = React.useRef<HTMLDivElement>(null);
 
   const barY = React.useRef<HTMLDivElement>(null);
   const trackerY = React.useRef<HTMLDivElement>(null);
@@ -104,6 +106,8 @@ export const CustomScrollView = ({
     }
   }, [windowResize, window]);
 
+  useResizeObserver(boxContentRef, resize);
+
   useIsomorphicLayoutEffect(() => {
     let style = trackerY.current?.style;
     let prop = '';
@@ -200,7 +204,9 @@ export const CustomScrollView = ({
       {...restProps}
     >
       <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>
-        {children}
+        <div ref={boxContentRef} className={styles['CustomScrollView__box-content']}>
+          {children}
+        </div>
       </div>
 
       <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>

package/src/components/FocusTrap/FocusTrap.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { AllHTMLAttributes, useContext, useRef } from 'react';
 import { useExternRef } from '../../hooks/useExternRef';
 import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
 import {
@@ -6,6 +6,7 @@ import {
   getActiveElementByAnotherElement,
   getWindow,
   isHTMLElement,
+  useDOM,
 } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { HasComponent, HasRootRef } from '../../types';
@@ -13,7 +14,7 @@ import { AppRootContext } from '../AppRoot/AppRootContext';
 
 const FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();
 export interface FocusTrapProps<T extends HTMLElement = HTMLElement>
-  extends React.AllHTMLAttributes<T>,
+  extends AllHTMLAttributes<T>,
     HasRootRef<T>,
     HasComponent {
   autoFocus?: boolean;
@@ -36,33 +37,66 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   ...restProps
 }: FocusTrapProps<T>) => {
   const ref = useExternRef<T>(getRootRef);
+  const { document } = useDOM();
 
-  const { keyboardInput } = React.useContext(AppRootContext);
-  const focusableNodesRef = React.useRef<HTMLElement[]>([]);
+  const { keyboardInput } = useContext(AppRootContext);
+  const focusableNodesRef = useRef<HTMLElement[]>([]);
+
+  const focusNodeByIndex = (nodeIndex: number) => {
+    const element = focusableNodesRef.current[nodeIndex];
+
+    if (element) {
+      element.focus();
+    }
+  };
+
+  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {
+    // eslint-disable-next-line no-restricted-properties
+    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);
+
+    const nodes: HTMLElement[] = [];
+    newFocusableElements.forEach((focusableEl) => {
+      const { display, visibility } = getComputedStyle(focusableEl);
+      if (display !== 'none' && visibility !== 'hidden') {
+        nodes.push(focusableEl);
+      }
+    });
+
+    if (nodes.length === 0) {
+      // Чтобы фокус был хотя бы на родителе
+      nodes.push(parentNode);
+    }
+    focusableNodesRef.current = nodes;
+  };
+
+  const onMutateParentHandler = (parentNode: HTMLElement) => {
+    recalculateFocusableNodesRef(parentNode);
+
+    if (document) {
+      const activeElement = document.activeElement as HTMLElement;
+      const currentElementIndex = Math.max(
+        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,
+        0,
+      );
+      focusNodeByIndex(currentElementIndex);
+    }
+  };
 
   useIsomorphicLayoutEffect(
     function collectFocusableNodesRef() {
       if (!ref.current) {
         return;
       }
-
-      const nodes: HTMLElement[] = [];
-      // eslint-disable-next-line no-restricted-properties
-      ref.current.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS).forEach((focusableEl) => {
-        const { display, visibility } = getComputedStyle(focusableEl);
-        if (display !== 'none' && visibility !== 'hidden') {
-          nodes.push(focusableEl);
-        }
+      const parentNode = ref.current;
+      const observer = new MutationObserver(() => onMutateParentHandler(parentNode));
+      observer.observe(ref.current, {
+        subtree: true,
+        childList: true,
       });
-
-      if (nodes.length === 0) {
-        // Чтобы фокус был хотя бы на родителе
-        nodes.push(ref.current);
-      }
-
-      focusableNodesRef.current = nodes;
+      recalculateFocusableNodesRef(parentNode);
+      return () => observer.disconnect();
     },
-    [children],
+    [ref],
   );
 
   useIsomorphicLayoutEffect(

package/src/components/Select/Select.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { HasOnlyExpectedProps } from '../../types';
 import {
   CustomSelect,
@@ -14,6 +15,7 @@ export type SelectType = 'default' | 'plain' | 'accent';
  */
 export const Select = <OptionT extends CustomSelectOptionInterface>({
   children,
+  className,
   ...props
 }: SelectProps<OptionT>) => {
   const {
@@ -45,15 +47,20 @@ export const Select = <OptionT extends CustomSelectOptionInterface>({
     ...restProps
   } = props;
 
-  const hasPointer = useAdaptivityHasPointer();
+  const { deviceType } = useAdaptivityConditionalRender();
 
   const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;
 
   return (
     <React.Fragment>
-      {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}
-      {(hasPointer === undefined || !hasPointer) && (
-        <NativeSelect {...nativeProps}>
+      {deviceType.desktop && (
+        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />
+      )}
+      {deviceType.mobile && (
+        <NativeSelect
+          className={classNames(className, deviceType.mobile.className)}
+          {...nativeProps}
+        >
           {options.map(({ label, value }) => (
             <option value={value} key={`${value}`}>
               {label}

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

@@ -1,4 +1,48 @@
 .Spacing {
+  --vkui_internal--Spacing_gap: 0;
+
   position: relative;
+  block-size: var(--vkui_internal--Spacing_gap);
+  padding-block: calc(1px * var(--vkui_internal--Spacing_gap) / 2);
   box-sizing: border-box;
 }
+
+.Spacing--3xs {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_3xs);
+}
+
+.Spacing--2xs {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_2xs);
+}
+
+.Spacing--xs {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_xs);
+}
+
+.Spacing--s {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_s);
+}
+
+.Spacing--m {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_m);
+}
+
+.Spacing--l {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_l);
+}
+
+.Spacing--xl {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_xl);
+}
+
+.Spacing--2xl {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_2xl);
+}
+
+.Spacing--3xl {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_3xl);
+}
+
+.Spacing--4xl {
+  --vkui_internal--Spacing_gap: var(--vkui--spacing_size_4xl);
+}

package/src/components/Spacing/Spacing.tsx

@@ -1,49 +1,53 @@
-import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Spacing.module.css';
 
-export const ALLOWED_SIZES = [
-  '3xs',
-  '2xs',
-  'xs',
-  's',
-  'm',
-  'l',
-  'xl',
-  '2xl',
-  '3xl',
-  '4xl',
-] as const;
-type Size = (typeof ALLOWED_SIZES)[number];
+export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';
+
+export const sizesClassNames = {
+  '3xs': styles['Spacing--3xs'],
+  '2xs': styles['Spacing--2xs'],
+  'xs': styles['Spacing--xs'],
+  's': styles['Spacing--s'],
+  'm': styles['Spacing--m'],
+  'l': styles['Spacing--l'],
+  'xl': styles['Spacing--xl'],
+  '2xl': styles['Spacing--2xl'],
+  '3xl': styles['Spacing--3xl'],
+  '4xl': styles['Spacing--4xl'],
+};
+
+export type SpacingSize = keyof typeof sizesClassNames;
 
 export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Высота спэйсинга
    */
-  size?: number | Size;
+  size?: number | SpacingSize;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export const Spacing = ({ size = 'm', style: styleProp, ...restProps }: SpacingProps) => {
-  const style: React.CSSProperties = {
-    ...getSizeStyle(size),
-    ...styleProp,
-  };
+export const Spacing = ({ size = 'm', style, className, ...restProps }: SpacingProps) => {
+  if (typeof size === 'string') {
+    className = className ? classNames(sizesClassNames[size], className) : sizesClassNames[size];
+  } else {
+    if (style) {
+      // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties
+      style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;
+    } else {
+      // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties
+      style = { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size };
+    }
+  }
 
-  return <RootComponent {...restProps} baseClassName={styles['Spacing']} style={style} />;
+  return (
+    <RootComponent
+      {...restProps}
+      style={style}
+      className={className}
+      baseClassName={styles['Spacing']}
+    />
+  );
 };
-
-function getSizeStyle(size: number | Size): React.CSSProperties {
-  const sizeValue = getSizeValue(size);
-
-  return {
-    height: sizeValue,
-    padding: `calc(${sizeValue} / 2px) 0`,
-  };
-}
-
-function getSizeValue(size: number | Size): `var(--vkui--spacing_size_${Size})` | number {
-  return typeof size === 'string' ? `var(--vkui--spacing_size_${size})` : size;
-}

package/src/components/ToolButton/ToolButton.module.css

@@ -48,24 +48,14 @@
   flex-direction: column;
 }
 
-/* stylelint-disable selector-max-universal -- gap для элементов */
-.ToolButton--direction-row > * {
-  margin-inline-end: 4px;
+.ToolButton--direction-row .ToolButton__text {
+  margin-inline-start: 4px;
 }
 
-.ToolButton--direction-row > *:last-child {
-  margin-inline-end: 0;
+.ToolButton--direction-column .ToolButton__text {
+  margin-block-start: 4px;
 }
 
-.ToolButton--direction-column > * {
-  margin-block-end: 4px;
-}
-
-.ToolButton--direction-column > *:last-child {
-  margin-block-end: 0;
-}
-/* stylelint-enable selector-max-universal */
-
 /* ToolButton's backgrounds */
 /* Mode  = Primary */
 .ToolButton--mode-primary.ToolButton--appearance-accent {

package/src/components/ToolButton/ToolButton.tsx

@@ -26,13 +26,18 @@ const stylesDirection = {
 
 const sizeYClassNames = {
   none: styles['ToolButton--sizeY-none'],
-  ['regular']: styles['ToolButton--sizeY-regular'],
+  regular: styles['ToolButton--sizeY-regular'],
 };
 
 export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {
   mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';
   appearance?: 'accent' | 'neutral';
   direction?: 'row' | 'column';
+  /**
+   * Задаёт `50%` закругления для контейнера.
+   *
+   * > Note: игнорируется при передаче `children`.
+   */
   rounded?: boolean;
 }
 
@@ -77,7 +82,7 @@ export const ToolButton = ({
       {...restProps}
     >
       <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />
-      {hasChildren && <span>{children}</span>}
+      {hasChildren && <span className={styles['ToolButton__text']}>{children}</span>}
     </Tappable>
   );
 };

package/src/hooks/useResizeObserver.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { CustomResizeObserver } from '../lib/floating/customResizeObserver';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+import { useStableCallback } from './useStableCallback';
+
+/**
+ * Хук вызывает переданный коллбэк при изменении размеров элемента.
+ */
+export function useResizeObserver(
+  ref: React.MutableRefObject<HTMLElement | null>,
+  callback: (element: HTMLElement) => void,
+) {
+  const stableCallback = useStableCallback(callback);
+
+  useIsomorphicLayoutEffect(
+    function addResizeObserverHandler() {
+      /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */
+      if (!ref.current) {
+        return;
+      }
+      const element = ref.current;
+      const observer = new CustomResizeObserver(() => stableCallback(element));
+      observer.observe(element);
+      observer.appendToTheDOM();
+
+      return () => observer.disconnect();
+    },
+    [ref],
+  );
+}

package/src/lib/floating/customResizeObserver.ts

@@ -1,6 +1,14 @@
 const defaultIframeStyles: Pick<
   CSSStyleDeclaration,
-  'position' | 'left' | 'top' | 'zIndex' | 'width' | 'height' | 'pointerEvents' | 'opacity'
+  | 'position'
+  | 'left'
+  | 'top'
+  | 'zIndex'
+  | 'width'
+  | 'height'
+  | 'pointerEvents'
+  | 'opacity'
+  | 'border'
 > = {
   position: 'absolute',
   left: '0',
@@ -10,6 +18,7 @@ const defaultIframeStyles: Pick<
   height: '100%',
   pointerEvents: 'none',
   opacity: '0',
+  border: '0',
 };
 
 /*

package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts

@@ -91,7 +91,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
   const commitShownLocalState = React.useCallback(
     (nextShown: boolean, reason: ShownChangeReason) => {
       setShownLocalState((prevState) => {
-        if (prevState.shown !== nextShown) {
+        if (prevState.shown !== nextShown || prevState.reason !== reason) {
           return {
             shown: nextShown,
             reason,
@@ -118,6 +118,11 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
   );
 
   const handleFocusOnReference = useStableCallback(() => {
+    // Повторный вызов события фокуса - следствие клика на reference-элемент
+    if (shownLocalState.shown) {
+      commitShownLocalState(false, 'focus');
+      return;
+    }
     if (blockFocusRef.current) {
       /* istanbul ignore next: в Jest не воспроизводится баг на вебе (cм. onRestoreFocus) */
       blockFocusRef.current = false;
@@ -158,6 +163,11 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
   });
 
   const handleClickOnReference = useStableCallback(() => {
+    // Предыдущий триггер (фокус) уже вызвал открытие/закрытие всплывающего окна, игнорируем вызов
+    if (shownLocalState.reason === 'focus') {
+      commitShownLocalState(shownLocalState.shown, 'click');
+      return;
+    }
     commitShownLocalState(!shownLocalState.shown, 'click');
   });
 

package/src/styles/adaptivity.module.css

@@ -74,8 +74,7 @@ Note: В начале классов разделить (`-`), чтобы кра
 
 .-deviceType--mobile-forced,
 .-deviceType--desktop-forced {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
+  /* Пустой класс для CSS Modules (см. CONTRIBUTING.md)  */
 }
 
 @media (--desktop) {