@vkontakte/vkui 6.1.2 → 6.2.0

package/src/components/FixedLayout/FixedLayout.tsx

@@ -1,9 +1,11 @@
+import { useCallback } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useDOM } from '../../lib/dom';
+import { setRef } from '../../lib/utils';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';
 import { SplitColContext } from '../SplitCol/SplitColContext';
@@ -52,14 +54,28 @@ export const FixedLayout = ({
   ...restProps
 }: FixedLayoutProps) => {
   const platform = usePlatform();
-  const ref = useExternRef(getRootRef);
+  const ref = React.useRef<HTMLElement | null>(null);
   const [width, setWidth] = React.useState<string | undefined>(undefined);
   const { window } = useDOM();
   const { colRef } = React.useContext(SplitColContext);
+  const parentRef = React.useRef<HTMLElement | null>(null);
+
+  const handleRootRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (!node) {
+        return;
+      }
+
+      setRef(node, getRootRef);
+      setRef(node, ref);
+      setRef(node.parentElement, parentRef);
+    },
+    [getRootRef],
+  );
 
   const doResize = () => {
-    if (useParentWidth && ref.current) {
-      const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;
+    if (useParentWidth && parentRef.current) {
+      const parentWidth = parentRef.current.getBoundingClientRect().width;
       setWidth(parentWidth ? `${parentWidth}px` : undefined);
     } else if (colRef?.current) {
       const computedStyle = getComputedStyle(colRef.current);
@@ -76,13 +92,15 @@ export const FixedLayout = ({
     }
   };
   React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);
+
   useGlobalEventListener(window, 'resize', doResize);
+  useResizeObserver(useParentWidth ? parentRef : colRef, doResize);
 
   return (
     <OnboardingTooltipContainer
       {...restProps}
       fixed
-      ref={ref}
+      ref={handleRootRef}
       className={classNames(
         styles['FixedLayout'],
         platform === 'ios' && 'vkuiInternalFixedLayout--ios',

package/src/components/Flex/Flex.module.css

@@ -0,0 +1,89 @@
+.Flex {
+  --vkui_internal--flex_original_margin_inline: 0px;
+  --vkui_internal--flex_original_margin_block: 0px;
+
+  display: flex;
+  margin-block: calc(
+      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+    )
+    var(--vkui_internal--flex_original_margin_block);
+  margin-inline: calc(
+      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+    )
+    var(--vkui_internal--flex_original_margin_inline);
+}
+
+.Flex--margin-auto {
+  --vkui_internal--flex_original_margin_inline: var(--vkui--size_base_padding_horizontal--regular);
+  --vkui_internal--flex_original_margin_block: var(--vkui--size_base_padding_vertical--regular);
+}
+
+.Flex--direction-column {
+  flex-direction: column;
+}
+
+.Flex--reverse {
+  flex-direction: row-reverse;
+}
+
+.Flex--direction-column.Flex--reverse {
+  flex-direction: column-reverse;
+}
+
+.Flex--wrap {
+  flex-wrap: wrap;
+}
+
+/* justify-content */
+
+.Flex--justify-start {
+  justify-content: flex-start;
+}
+
+.Flex--justify-end {
+  justify-content: flex-end;
+}
+
+.Flex--justify-center {
+  justify-content: center;
+}
+
+.Flex--justify-space-around {
+  justify-content: space-around;
+}
+
+.Flex--justify-space-between {
+  justify-content: space-between;
+}
+
+.Flex--justify-space-evenly {
+  justify-content: space-evenly;
+}
+
+/* align-items */
+
+.Flex--align-start {
+  align-items: flex-start;
+}
+
+.Flex--align-end {
+  align-items: flex-end;
+}
+
+.Flex--align-center {
+  align-items: center;
+}
+
+.Flex--align-stretch {
+  align-items: stretch;
+}
+
+.Flex--align-baseline {
+  align-items: baseline;
+}
+
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+.Flex > * {
+  margin-block: var(--vkui_internal--row_gap) 0;
+  margin-inline: var(--vkui_internal--column_gap) 0;
+}

package/src/components/Flex/Flex.tsx

@@ -0,0 +1,113 @@
+import { classNames } from '@vkontakte/vkjs';
+import {
+  calculateGap,
+  columnGapClassNames,
+  type GapsProp,
+  rowGapClassNames,
+} from '../../lib/layouts';
+import { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { FlexItem, FlexItemProps } from './FlexItem/FlexItem';
+import styles from './Flex.module.css';
+
+export type { FlexItemProps };
+
+const justifyClassNames = {
+  'start': styles['Flex--justify-start'],
+  'end': styles['Flex--justify-end'],
+  'center': styles['Flex--justify-center'],
+  'space-around': styles['Flex--justify-space-around'],
+  'space-between': styles['Flex--justify-space-between'],
+  'space-evenly': styles['Flex--justify-space-evenly'],
+};
+
+const alignClassNames = {
+  start: styles['Flex--align-start'],
+  end: styles['Flex--align-end'],
+  center: styles['Flex--align-center'],
+  stretch: styles['Flex--align-stretch'],
+  baseline: styles['Flex--align-baseline'],
+};
+
+type FlexContentProps =
+  | 'start'
+  | 'end'
+  | 'center'
+  | 'space-around'
+  | 'space-between'
+  | 'space-evenly';
+
+export interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Направление осей, эквивалентно `flex-direction`.
+   */
+  direction?: 'row' | 'column';
+  /**
+   * Отступы между элементами.
+   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
+   * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.
+   */
+  gap?: GapsProp;
+  /**
+   * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.
+   */
+  noWrap?: boolean;
+  /**
+   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.
+   */
+  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+  /**
+   * Выравнивание элементов по главной оси, эквивалентно `justify-content`.
+   */
+  justify?: FlexContentProps;
+  /**
+   * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.
+   */
+  margin?: 'none' | 'auto';
+  /**
+   * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.
+   */
+  reverse?: boolean;
+}
+
+export const Flex = ({
+  gap,
+  align,
+  justify,
+  margin = 'none',
+  noWrap = false,
+  direction = 'row',
+  style: styleProp,
+  reverse = false,
+  ...props
+}: FlexProps) => {
+  const [columnGap, rowGap] = calculateGap(gap);
+  const style: CSSCustomProperties = {};
+
+  if (typeof rowGap === 'number') {
+    style['--vkui_internal--row_gap'] = `${rowGap}px`;
+  }
+  if (typeof columnGap === 'number') {
+    style['--vkui_internal--column_gap'] = `${columnGap}px`;
+  }
+
+  return (
+    <RootComponent
+      {...props}
+      baseClassName={classNames(
+        styles.Flex,
+        !noWrap && styles['Flex--wrap'],
+        reverse && styles['Flex--reverse'],
+        direction !== 'row' && styles['Flex--direction-column'],
+        margin !== 'none' && styles['Flex--margin-auto'],
+        typeof columnGap === 'string' && columnGapClassNames[columnGap],
+        typeof rowGap === 'string' && rowGapClassNames[rowGap],
+        align && alignClassNames[align],
+        justify && justifyClassNames[justify],
+      )}
+      style={{ ...styleProp, ...style }}
+    />
+  );
+};
+
+Flex.Item = FlexItem;

package/src/components/Flex/FlexItem/FlexItem.module.css

@@ -0,0 +1,43 @@
+.FlexItem {
+  /* Пустой класс для CSS Modules (см. CONTRIBUTING.md)  */
+}
+
+/* flex */
+
+.FlexItem--flex-grow {
+  flex: 1 0 auto;
+}
+
+.FlexItem--flex-shrink {
+  flex: 0 1 auto;
+}
+
+.FlexItem--flex-content {
+  flex: 1 1 auto;
+}
+
+.FlexItem--flex-fixed {
+  flex: 0 0 auto;
+}
+
+/* align-self */
+
+.FlexItem--align-self-start {
+  align-self: start;
+}
+
+.FlexItem--align-self-end {
+  align-self: end;
+}
+
+.FlexItem--align-self-center {
+  align-self: center;
+}
+
+.FlexItem--align-self-baseline {
+  align-self: baseline;
+}
+
+.FlexItem--align-self-stretch {
+  align-self: stretch;
+}

package/src/components/Flex/FlexItem/FlexItem.tsx

@@ -0,0 +1,60 @@
+import { classNames } from '@vkontakte/vkjs';
+import { HasChildren, HTMLAttributesWithRootRef } from '../../../types';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import styles from './FlexItem.module.css';
+
+const flexClassNames = {
+  grow: styles['FlexItem--flex-grow'],
+  shrink: styles['FlexItem--flex-shrink'],
+  content: styles['FlexItem--flex-content'],
+  fixed: styles['FlexItem--flex-fixed'],
+};
+
+const alignSelfClassNames = {
+  start: styles['FlexItem--align-self-start'],
+  end: styles['FlexItem--align-self-end'],
+  center: styles['FlexItem--align-self-center'],
+  baseline: styles['FlexItem--align-self-baseline'],
+  stretch: styles['FlexItem--align-self-stretch'],
+};
+
+export interface FlexItemProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasChildren {
+  /**
+   * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`
+   */
+  alignSelf: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+  /**
+   * Позволяет задать предопределенные значения шортката `flex`
+   * `grow` соответствует значению `1 0 auto`
+   * `shrink` соответствует значению `0 1 auto`
+   * `content` соответствует значению `0 0 auto`
+   */
+  flex: 'grow' | 'shrink' | 'content' | 'fixed';
+  /**
+   * Изначальный размер элемента, эквивалентно `flex-basis`
+   */
+  flexBasis: number;
+}
+
+export const FlexItem = ({
+  children,
+  alignSelf,
+  flex,
+  flexBasis,
+  style,
+  ...rest
+}: FlexItemProps) => {
+  return (
+    <RootComponent
+      {...rest}
+      style={{ ...style, flexBasis }}
+      baseClassName={classNames(
+        styles.FlexItem,
+        alignSelf && alignSelfClassNames[alignSelf],
+        flex && flexClassNames[flex],
+      )}
+    >
+      {children}
+    </RootComponent>
+  );
+};

package/src/components/FloatingArrow/FloatingArrow.tsx

@@ -87,36 +87,48 @@ function getArrowPositionData(
   };
 
   if (placement.startsWith('top')) {
+    const xOffsetProp = getXOffsetProp(placement, isStaticOffset);
     return [
       'bottom',
       {
         top: '100%',
-        left: withOffset(false),
+        [xOffsetProp]: withOffset(false),
       },
     ];
   } else if (placement.startsWith('right')) {
+    const yOffsetProp = getYOffsetProp(placement, isStaticOffset);
     return [
       'left',
       {
-        top: withOffset(true),
+        [yOffsetProp]: withOffset(true),
         left: 0,
       },
     ];
   } else if (placement.startsWith('bottom')) {
+    const xOffsetProp = getXOffsetProp(placement, isStaticOffset);
     return [
       undefined,
       {
         bottom: '100%',
-        left: withOffset(false),
+        [xOffsetProp]: withOffset(false),
       },
     ];
   } else {
+    const yOffsetProp = getYOffsetProp(placement, isStaticOffset);
     return [
       'right',
       {
-        top: withOffset(true),
+        [yOffsetProp]: withOffset(true),
         right: 0,
       },
     ];
   }
 }
+
+function getXOffsetProp(placement: Placement, isStaticOffset: boolean) {
+  return placement.endsWith('end') && isStaticOffset ? 'right' : 'left';
+}
+
+function getYOffsetProp(placement: Placement, isStaticOffset: boolean) {
+  return placement.endsWith('end') && isStaticOffset ? 'bottom' : 'top';
+}

package/src/components/FocusTrap/FocusTrap.tsx

@@ -1,4 +1,4 @@
-import { AllHTMLAttributes, useContext, useRef } from 'react';
+import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';
 import { useExternRef } from '../../hooks/useExternRef';
 import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
 import {
@@ -10,7 +10,6 @@ import {
 } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { HasComponent, HasRootRef } from '../../types';
-import { AppRootContext } from '../AppRoot/AppRootContext';
 
 const FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();
 export interface FocusTrapProps<T extends HTMLElement = HTMLElement>
@@ -19,8 +18,13 @@ export interface FocusTrapProps<T extends HTMLElement = HTMLElement>
     HasComponent {
   autoFocus?: boolean;
   restoreFocus?: boolean | (() => boolean);
+  mount?: boolean;
   timeout?: number;
   onClose?: () => void;
+  /**
+   * Форсированное отключение захвата фокуса
+   */
+  disabled?: boolean;
 }
 
 /**
@@ -31,6 +35,8 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   onClose,
   autoFocus = true,
   restoreFocus = true,
+  disabled = false,
+  mount = true,
   timeout = 0,
   getRootRef,
   children,
@@ -39,9 +45,10 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   const ref = useExternRef<T>(getRootRef);
   const { document } = useDOM();
 
-  const { keyboardInput } = useContext(AppRootContext);
   const focusableNodesRef = useRef<HTMLElement[]>([]);
 
+  const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);
+
   const focusNodeByIndex = (nodeIndex: number) => {
     const element = focusableNodesRef.current[nodeIndex];
 
@@ -101,9 +108,10 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
 
   useIsomorphicLayoutEffect(
     function tryToAutoFocusToFirstNode() {
-      if (!ref.current || !autoFocus || !keyboardInput) {
+      if (!ref.current || !autoFocus || disabled) {
         return;
       }
+
       const autoFocusToFirstNode = () => {
         if (!ref.current || !focusableNodesRef.current.length) {
           return;
@@ -118,33 +126,49 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
         clearTimeout(timeoutId);
       };
     },
-    [autoFocus, timeout, keyboardInput],
+    [autoFocus, timeout, disabled],
   );
 
+  const restoreFocusImpl = useCallback(() => {
+    const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;
+
+    if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {
+      return;
+    }
+
+    setTimeout(() => {
+      if (restoreFocusTo) {
+        restoreFocusTo.focus();
+        setRestoreFocusTo(null);
+      }
+    }, timeout);
+  }, [restoreFocus, restoreFocusTo, timeout]);
+
   useIsomorphicLayoutEffect(
-    function tryToRestoreFocusOnUnmount() {
-      if (!ref.current || !restoreFocus) {
+    function calculateRestoreFocusTo() {
+      if (!ref.current || !restoreFocus || !mount) {
+        setRestoreFocusTo(null);
         return;
       }
+      setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));
+    },
+    [ref, mount, restoreFocus],
+  );
 
-      const restoreFocusTo = getActiveElementByAnotherElement(ref.current);
-
-      return () => {
-        const shouldRestoreFocus =
-          typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;
-
-        if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {
-          return;
-        }
+  useIsomorphicLayoutEffect(
+    function tryToRestoreFocusOnUnmount() {
+      return () => restoreFocusImpl();
+    },
+    [restoreFocusImpl],
+  );
 
-        setTimeout(() => {
-          if (restoreFocusTo) {
-            restoreFocusTo.focus();
-          }
-        }, timeout);
-      };
+  useIsomorphicLayoutEffect(
+    function tryToRestoreFocusWhenFakeUnmount() {
+      if (!mount) {
+        restoreFocusImpl();
+      }
     },
-    [restoreFocus, timeout],
+    [mount, restoreFocusImpl],
   );
 
   useIsomorphicLayoutEffect(() => {
@@ -153,6 +177,10 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
     }
 
     const onDocumentKeydown = (event: KeyboardEvent) => {
+      if (disabled) {
+        return;
+      }
+
       const pressedKeyResult = pressedKey(event);
 
       switch (pressedKeyResult) {
@@ -199,7 +227,7 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
     return () => {
       doc.removeEventListener('keydown', onDocumentKeydown, true);
     };
-  }, [onClose, ref]);
+  }, [onClose, ref, disabled]);
 
   return (
     <Component tabIndex={-1} ref={ref} {...restProps}>

package/src/components/Gallery/hooks.ts

@@ -1,39 +1,47 @@
 import * as React from 'react';
-import { useTimeout } from '../../hooks/useTimeout';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { useDOM } from '../../lib/dom';
+import { TimeoutId } from '../../types';
 
-export function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction) {
-  const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout);
+export function useAutoPlay(timeout: number, slideIndex: number, callbackFnProp: VoidFunction) {
   const { document } = useDOM();
+  const callbackFn = useStableCallback(callbackFnProp);
 
   React.useEffect(
-    () => (timeout ? setAutoPlay() : clearAutoPlay()),
-    [timeout, slideIndex, clearAutoPlay, setAutoPlay],
-  );
-
-  // Отключаем прокрутку слайдов при неактивной вкладке
-  React.useEffect(
-    function preventSlideChange() {
+    function initializeAutoPlay() {
       if (!document || !timeout) {
         return;
       }
 
-      const changeAutoPlay = () => {
-        if (document.visibilityState === 'visible') {
-          clearAutoPlay();
-          setAutoPlay();
+      let timeoutId: TimeoutId = null;
+
+      const stop = () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
         }
-        if (document.visibilityState === 'hidden') {
-          clearAutoPlay();
+      };
+
+      const start = () => {
+        switch (document.visibilityState) {
+          case 'visible':
+            stop();
+            timeoutId = setTimeout(callbackFn, timeout);
+            break;
+          case 'hidden':
+            stop();
         }
       };
 
-      document.addEventListener('visibilitychange', changeAutoPlay);
+      start();
+
+      document.addEventListener('visibilitychange', start);
 
       return () => {
-        document.removeEventListener('visibilitychange', changeAutoPlay);
+        stop();
+        document.removeEventListener('visibilitychange', start);
       };
     },
-    [document, timeout, clearAutoPlay, setAutoPlay],
+    [document, timeout, slideIndex, callbackFn],
   );
 }

package/src/components/Header/Header.module.css

@@ -3,7 +3,6 @@
   align-items: flex-start;
   padding: 0;
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  user-select: text;
   font-family: var(--vkui--font_family_base);
 }
 

package/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css

@@ -38,10 +38,10 @@
 }
 
 .HorizontalCellShowMore__icon {
-  color: var(--vkui--color_icon_accent);
+  color: var(--vkui--color_icon_secondary);
 }
 
 .HorizontalCellShowMore__text {
   padding-block-start: 8px;
-  color: var(--vkui--color_text_accent);
+  color: var(--vkui--color_text_secondary);
 }

package/src/components/Link/Link.module.css

@@ -13,8 +13,7 @@
   border-radius: 0;
 }
 
-/* See https://www.ctrl.blog/entry/css-media-hover-samsung.html */
-@media (hover: hover) and (pointer: fine) {
+@media (--hover-has) {
   .Link:hover {
     text-decoration: underline;
   }

package/src/components/Link/Link.tsx

@@ -27,6 +27,7 @@ export const Link = ({
       className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}
       hasHover={false}
       activeMode="opacity"
+      hoverMode="none"
       focusVisibleMode="outside"
     >
       {children}