@vkontakte/vkui 7.3.8 → 7.4.1

package/src/components/Spinner/Spinner.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
+import { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import { SpinnerAnimation } from './SpinnerAnimation';
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from './icons';
 import styles from './Spinner.module.css';
+import stylesDelay from '../../styles/animationVisibilityDelay.module.css';
 
 const spinnerIconMap = {
   s: Icon16Spinner,
@@ -28,6 +30,10 @@ export interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
    * Задать цвет можно будет через свойство color родителя.
    */
   noColor?: boolean;
+  /**
+   * Задерживает отрисовку элемента на заданное количество миллисекунд.
+   */
+  visibilityDelay?: number;
 }
 
 /**
@@ -40,6 +46,7 @@ export const Spinner = React.memo(
     children = 'Загружается...',
     disableAnimation = false,
     noColor = false,
+    visibilityDelay,
     ...restProps
   }: SpinnerProps) => {
     const SpinnerIcon = spinnerIconMap[size];
@@ -49,7 +56,12 @@ export const Spinner = React.memo(
         Component="span"
         role="status"
         {...restProps}
-        baseClassName={classNames(styles.host, noColor && styles.noColor)}
+        baseClassName={classNames(
+          styles.host,
+          noColor && styles.noColor,
+          visibilityDelay && stylesDelay.visibilityDelay,
+        )}
+        baseStyle={animationVisibilityDelayStyles(visibilityDelay)}
       >
         <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>
         {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -5,7 +5,7 @@ import { Icon16Dropdown } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import type { HasChildren, HasComponent } from '../../types';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import { Caption } from '../Typography/Caption/Caption';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './SubnavigationButton.module.css';
@@ -32,7 +32,7 @@ const sizeYClassNames = {
   compact: styles.sizeYCompact,
 };
 
-export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
+export interface SubnavigationButtonProps extends Omit<TappableOmitProps, 'size'> {
   /**
    * Стиль отображения кнопки.
    */

package/src/components/Tabs/Tabs.tsx

@@ -7,6 +7,8 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { useTabsNavigation } from '../../hooks/useTabsNavigation';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
+import { useTabsController } from './TabsController';
+import { TabsModeContext } from './TabsModeContext';
 import styles from './Tabs.module.css';
 
 export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
@@ -33,27 +35,20 @@ export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
    * либо выравниваются по контенту соответственно.
    */
   layoutFillMode?: 'auto' | 'stretched' | 'shrinked';
+  /**
+   * Идентификатор выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.
+   */
+  selectedId?: string;
+  /**
+   * Идентификатор выбранной вкладки по умолчанию. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.
+   */
+  defaultSelectedId?: string;
+  /**
+   * Обработчик изменения выбранной вкладки. Чтобы свойство работало корректно, у каждого `TabsItem` должно быть прокинуто свойство `id`.
+   */
+  onSelectedIdChange?: (id: string) => void;
 }
 
-/* eslint-disable jsdoc/require-jsdoc */
-export interface TabsContextProps {
-  mode: TabsProps['mode'];
-  withGaps: boolean;
-  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;
-  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];
-  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;
-}
-/* eslint-enable jsdoc/require-jsdoc */
-
-export const TabsModeContext: React.Context<TabsContextProps> =
-  React.createContext<TabsContextProps>({
-    mode: 'default',
-    withGaps: false,
-    layoutFillMode: 'auto',
-    withScrollToSelectedTab: false,
-    scrollBehaviorToSelectedTab: 'nearest',
-  });
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */
@@ -64,8 +59,16 @@ export const Tabs = ({
   withScrollToSelectedTab,
   scrollBehaviorToSelectedTab = 'nearest',
   layoutFillMode = 'auto',
+  selectedId,
+  defaultSelectedId,
+  onSelectedIdChange,
   ...restProps
 }: TabsProps): React.ReactNode => {
+  const controller = useTabsController({
+    selectedId,
+    defaultSelectedId,
+    onSelectedIdChange,
+  });
   const platform = usePlatform();
   const direction = useConfigDirection();
   const isTabFlow = role === 'tablist';
@@ -93,6 +96,7 @@ export const Tabs = ({
             layoutFillMode,
             withScrollToSelectedTab,
             scrollBehaviorToSelectedTab,
+            controller,
           }}
         >
           {children}

package/src/components/Tabs/TabsController.ts

@@ -0,0 +1,37 @@
+import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
+import { useStableCallback } from '../../hooks/useStableCallback';
+import { type TabsProps } from './Tabs';
+
+/* eslint-disable jsdoc/require-jsdoc */
+export type TabsController = {
+  onChange: (id: string) => void;
+  selectedTab: string;
+};
+/* eslint-enable jsdoc/require-jsdoc */
+
+export const useTabsController = ({
+  selectedId,
+  defaultSelectedId,
+  onSelectedIdChange: onSelectedIdChangeProp,
+}: Pick<
+  TabsProps,
+  'selectedId' | 'defaultSelectedId' | 'onSelectedIdChange'
+>): TabsController | null => {
+  const onSelectedIdChange = useStableCallback(
+    (id: string | undefined) => id && onSelectedIdChangeProp?.(id),
+  );
+
+  const [value, onChange] = useCustomEnsuredControl<string | undefined>({
+    onChange: onSelectedIdChange,
+    value: selectedId,
+    defaultValue: defaultSelectedId,
+  });
+
+  if ((!selectedId && !defaultSelectedId) || !value) {
+    return null;
+  }
+  return {
+    onChange,
+    selectedTab: value,
+  };
+};

package/src/components/Tabs/TabsModeContext.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type TabsProps } from './Tabs';
+import { type TabsController } from './TabsController';
+
+/* eslint-disable jsdoc/require-jsdoc */
+export interface TabsContextProps {
+  mode: TabsProps['mode'];
+  withGaps: boolean;
+  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;
+  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];
+  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;
+  controller: TabsController | null;
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+export const TabsModeContext: React.Context<TabsContextProps> =
+  React.createContext<TabsContextProps>({
+    mode: 'default',
+    withGaps: false,
+    layoutFillMode: 'auto',
+    withScrollToSelectedTab: false,
+    scrollBehaviorToSelectedTab: 'nearest',
+    controller: null,
+  });

package/src/components/TabsItem/TabsItem.tsx

@@ -8,8 +8,8 @@ import { usePrevious } from '../../hooks/usePrevious';
 import { useDOM } from '../../lib/dom';
 import { warnOnce } from '../../lib/warnOnce';
 import type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';
-import { type TabsContextProps, TabsModeContext } from '../Tabs/Tabs';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { type TabsContextProps, TabsModeContext } from '../Tabs/TabsModeContext';
+import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -35,7 +35,7 @@ export interface TabsItemProps
   extends HTMLAttributesWithRootRef<HTMLElement>,
     AnchorHTMLAttributesOnly,
     Pick<
-      TappableProps,
+      TappableOmitProps,
       | 'Component'
       | 'activeMode'
       | 'hoverMode'
@@ -86,7 +86,7 @@ export const TabsItem = ({
   children,
   status,
   after,
-  selected = false,
+  selected: selectedProp = false,
   role = 'tab',
   tabIndex: tabIndexProp,
   getRootRef,
@@ -94,6 +94,8 @@ export const TabsItem = ({
   activeMode = '',
   hasActive = false,
   focusVisibleMode = 'inside',
+  id,
+  onClick,
   ...restProps
 }: TabsItemProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
@@ -103,11 +105,14 @@ export const TabsItem = ({
     layoutFillMode,
     scrollBehaviorToSelectedTab,
     withScrollToSelectedTab,
+    controller,
   }: TabsContextProps = React.useContext(TabsModeContext);
   let statusComponent = null;
 
   const isTabFlow = role === 'tab';
 
+  const selected = selectedProp || (!!id && controller?.selectedTab === id);
+
   if (hasReactNode(status)) {
     statusComponent =
       typeof status === 'number' ? (
@@ -130,7 +135,7 @@ export const TabsItem = ({
   if (process.env.NODE_ENV === 'development' && isTabFlow) {
     if (!restProps['aria-controls']) {
       warn(`Передайте в "aria-controls" id контролируемого блока`, 'warn');
-    } else if (!restProps['id']) {
+    } else if (!id) {
       warn(
         `Передайте "id" компоненту для использования в "aria-labelledby" контролируемого блока`,
         'warn',
@@ -183,6 +188,16 @@ export const TabsItem = ({
     [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],
   );
 
+  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(
+    (e) => {
+      onClick?.(e);
+      if (id) {
+        controller?.onChange(id);
+      }
+    },
+    [id, onClick, controller],
+  );
+
   return (
     <Tappable
       getRootRef={rootRef}
@@ -201,6 +216,8 @@ export const TabsItem = ({
         withGaps && styles.withGaps,
         layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],
       )}
+      onClick={_onClick}
+      id={id}
       {...restProps}
     >
       {before && <div className={styles.before}>{before}</div>}

package/src/components/Tappable/Tappable.tsx

@@ -45,6 +45,11 @@ export interface TappableProps extends ClickableProps, StateProps {
   hoverClassName?: string; // Переделать на Omit<ClickableProps, 'activeClassName' | 'hoverClassName'>
 }
 
+// TODO [>=8]: = React.AllHTMLAttributes<HTMLElement> & HasRootRef<HTMLElement>
+//
+// NOTE: Возможно стоит вообще запретить компонентам расширяться от TappableProps?
+export type TappableOmitProps = Omit<TappableProps, 'DefaultComponent'>;
+
 export const Tappable = ({
   baseClassName,
   borderRadiusMode = 'auto',

package/src/components/ToolButton/ToolButton.tsx

@@ -6,7 +6,7 @@ import {
   AdaptiveIconRenderer,
   type AdaptiveIconRendererProps,
 } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import styles from './ToolButton.module.css';
 
 const stylesMode = {
@@ -31,7 +31,7 @@ const sizeYClassNames = {
   regular: styles.sizeYRegular,
 };
 
-export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {
+export interface ToolButtonProps extends TappableOmitProps, AdaptiveIconRendererProps {
   /**
    * Режим отображения компонента.
    */

package/src/components/UnstyledTextField/UnstyledTextField.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, ArgTypes, Description } from '@storybook/blocks';
+import { Meta, Title, ArgTypes, Description } from '@storybook/addon-docs/blocks';
 import { UnstyledTextField } from './UnstyledTextField';
 
 <Meta title="Service/UnstyledTextField" />

package/src/hooks/useCalendar.ts

@@ -35,11 +35,8 @@ export function useCalendar({
   setNextMonth: () => void;
   focusedDay: Date | undefined;
   setFocusedDay: React.Dispatch<React.SetStateAction<Date | undefined>>;
-  focusableDay: Date | undefined;
-  setFocusableDay: React.Dispatch<React.SetStateAction<Date | undefined>>;
   isDayFocused: (day: Date) => boolean;
   isDayDisabled: (day: Date, withTime?: boolean) => boolean;
-  resetSelectedDay: () => void;
   isMonthDisabled: (month: number, year?: number) => boolean;
   isYearDisabled: (year: number) => boolean;
 } {
@@ -49,8 +46,6 @@ export function useCalendar({
   // соответствует дню, на котором сейчас есть фокус
   // меняется при переключении дней с помощью стрелок
   const [focusedDay, setFocusedDay] = React.useState<Date>();
-  // соотвествует дню, на котором можно сфокусироваться с помощью Tab
-  const [focusableDay, setFocusableDay] = React.useState<Date>();
 
   const setPrevMonth = React.useCallback(() => {
     onPrevMonth?.();
@@ -144,10 +139,6 @@ export function useCalendar({
     [disableFuture, disablePast, minDateTime, maxDateTime],
   );
 
-  const resetSelectedDay = React.useCallback(() => {
-    setFocusedDay(undefined);
-  }, [setFocusedDay]);
-
   return {
     viewDate,
     setViewDate: handleSetViewDate,
@@ -155,11 +146,8 @@ export function useCalendar({
     setNextMonth,
     focusedDay,
     setFocusedDay,
-    focusableDay,
-    setFocusableDay,
     isDayFocused,
     isDayDisabled,
-    resetSelectedDay,
     isMonthDisabled,
     isYearDisabled,
   };

package/src/hooks/useDateInput.ts

@@ -83,22 +83,27 @@ export function useDateInput<T extends HTMLElement, D>({
     }
   }, [onCalendarOpenChanged, open, openCalendar, accessible]);
 
-  const toggleCalendar = useCallback(() => {
-    if (open) {
-      _onCalendarClose();
-    } else {
-      _onCalendarOpen();
-    }
-  }, [open, _onCalendarOpen, _onCalendarClose]);
-
-  const removeFocusFromField = React.useCallback(() => {
+  const resetFocusedElement = React.useCallback(() => {
     if (focusedElement !== null) {
       setFocusedElement(null);
       window!.getSelection()?.removeAllRanges();
       setInternalValue(getInternalValue(value));
     }
+  }, [focusedElement, getInternalValue, value, window]);
+
+  const removeFocusFromField = React.useCallback(() => {
+    resetFocusedElement();
     _onCalendarClose();
-  }, [_onCalendarClose, window, getInternalValue, value, focusedElement]);
+  }, [resetFocusedElement, _onCalendarClose]);
+
+  const toggleCalendar = useCallback(() => {
+    resetFocusedElement();
+    if (open) {
+      _onCalendarClose();
+    } else {
+      _onCalendarOpen();
+    }
+  }, [resetFocusedElement, open, _onCalendarClose, _onCalendarOpen]);
 
   const handleClickOutside = React.useCallback(
     (e: MouseEvent) => {
@@ -212,13 +217,17 @@ export function useDateInput<T extends HTMLElement, D>({
         ).padStart(config.length, '0');
       } else if (e.key === 'ArrowLeft' || e.key === 'Left' || (e.key === 'Tab' && e.shiftKey)) {
         if (focusedElement <= 0) {
-          removeFocusFromField();
+          if (e.key === 'Tab') {
+            removeFocusFromField();
+          }
           return;
         }
         setFocusedElement(focusedElement - 1);
       } else if (e.key === 'ArrowRight' || e.key === 'Right' || e.key === 'Tab') {
         if (focusedElement >= maxElement) {
-          removeFocusFromField();
+          if (e.key === 'Tab') {
+            removeFocusFromField();
+          }
           return;
         }
 

package/src/hooks/useFocusTrap.ts

@@ -114,6 +114,10 @@ export type UseFocusTrapProps = {
    * @default true
    */
   captureEscapeKeyboardEvent?: boolean;
+  /**
+   * Пользовательские опции для MutationObserver, который отслеживает изменения DOM внутри компонента и пересчитывает ноды для фокуса.
+   */
+  mutationObserverOptions?: MutationObserverInit;
 };
 
 /**
@@ -129,6 +133,7 @@ export const useFocusTrap = (
     timeout = 0,
     onClose,
     captureEscapeKeyboardEvent = true,
+    mutationObserverOptions,
   }: UseFocusTrapProps,
 ) => {
   const { document } = useDOM();
@@ -189,7 +194,11 @@ export const useFocusTrap = (
     }
   };
 
-  useMutationObserver(ref, () => ref.current && onMutateParentHandler(ref.current));
+  useMutationObserver(
+    ref,
+    () => ref.current && onMutateParentHandler(ref.current),
+    mutationObserverOptions,
+  );
 
   useIsomorphicLayoutEffect(() => {
     ref.current && recalculateFocusableNodesRef(ref.current);

package/src/hooks/useMutationObserver.ts

@@ -2,9 +2,15 @@ import type * as React from 'react';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 import { useStableCallback } from './useStableCallback';
 
+export const DEFAULT_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {
+  subtree: true,
+  childList: true,
+};
+
 export const useMutationObserver = (
   ref: React.RefObject<HTMLElement | null> | null,
   callback: () => void,
+  options: MutationObserverInit = DEFAULT_MUTATION_OBSERVER_OPTIONS,
 ): void => {
   const stableCallback = useStableCallback(callback);
 
@@ -13,10 +19,7 @@ export const useMutationObserver = (
       return;
     }
     const observer = new MutationObserver(stableCallback);
-    observer.observe(ref.current, {
-      subtree: true,
-      childList: true,
-    });
+    observer.observe(ref.current, options);
     return () => observer.disconnect();
   }, [ref, stableCallback]);
 };

package/src/lib/dom.tsx

@@ -95,7 +95,13 @@ export function getTransformedParentCoords(element: Element): {
   let parentNode = element.parentNode;
   while (parentNode !== null) {
     if (isHTMLElement(parentNode)) {
-      const { transform, willChange } = getComputedStyle(parentNode);
+      let { transform, willChange } = getComputedStyle(parentNode);
+      if (transform === '') {
+        transform = 'unset';
+      }
+      if (willChange === '') {
+        willChange = 'unset';
+      }
       if (
         !TRANSFORM_DEFAULT_VALUES.includes(transform) ||
         !WILL_CHANGE_DEFAULT_VALUES.includes(willChange)

package/src/lib/floating/index.ts

@@ -1,6 +1,8 @@
 export type {
   UseFloatingOptions,
   Placement,
+  Side,
+  Alignment,
   VirtualElement,
   PlacementWithAuto,
   AutoPlacementType,

package/src/lib/floating/types/common.ts

@@ -15,6 +15,8 @@ export type {
   ArrowOptions,
   UseFloatingReturn,
   Placement,
+  Side,
+  Alignment,
   Middleware as UseFloatingMiddleware,
   UseFloatingData,
   Strategy as FloatingPositionStrategy,

package/src/styles/animationVisibilityDelay.module.css

@@ -0,0 +1,13 @@
+.visibilityDelay {
+  --vkui_internal--animation_delay_visibility: 200ms;
+
+  visibility: hidden;
+  animation: 0ms linear var(--vkui_internal--animation_delay_visibility) forwards
+    animation-styles-delay-visibility;
+}
+
+@keyframes animation-styles-delay-visibility {
+  to {
+    visibility: visible;
+  }
+}

package/src/styles/animationVisibilityDelay.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./animationVisibilityDelay.module.css"],"names":["visibilityDelay"],"mappings":"AAAA;AAAA,E,aAAAA,iB,WAAA;AAAA;AAAA","file":"animationVisibilityDelay.module.css.d.ts","sourceRoot":""}

package/src/styles/animationVisibilityDelay.ts

@@ -0,0 +1,13 @@
+import { type CSSCustomProperties } from '../types';
+
+export function animationVisibilityDelayStyles(
+  delay: number | undefined,
+): CSSCustomProperties | undefined {
+  if (delay === undefined) {
+    return undefined;
+  }
+
+  return {
+    '--vkui_internal--animation_delay_visibility': `${delay}ms`,
+  };
+}