@vkontakte/vkui 6.2.1 → 6.3.0

package/src/components/Epic/Epic.tsx

@@ -18,7 +18,12 @@ const warn = warnOnce('Epic');
 /**
  * @see https://vkcom.github.io/VKUI/#/Epic
  */
-export const Epic = ({ activeStory, tabbar, children, ...restProps }: EpicProps) => {
+export const Epic = ({
+  activeStory,
+  tabbar,
+  children,
+  ...restProps
+}: EpicProps): React.ReactNode => {
   const scroll = React.useRef<{ [key: string]: number }>({}).current;
 
   const story =

package/src/components/Epic/ScrollSaver.tsx

@@ -11,7 +11,11 @@ export interface ScrollSaverProps extends HasChildren {
 /**
  * @see https://vkcom.github.io/VKUI/#/ScrollSaver
  */
-export const ScrollSaver = ({ children, initialScroll, saveScroll }: ScrollSaverProps) => {
+export const ScrollSaver = ({
+  children,
+  initialScroll,
+  saveScroll,
+}: ScrollSaverProps): React.ReactNode => {
   const { getScroll, scrollTo } = React.useContext(ScrollContext);
   useIsomorphicLayoutEffect(() => {
     if (typeof initialScroll === 'number') {

package/src/components/File/File.tsx

@@ -27,7 +27,7 @@ export const File = ({
   getRootRef,
   appearance,
   ...restProps
-}: FileProps) => {
+}: FileProps): React.ReactNode => {
   return (
     <Button
       Component="label"

package/src/components/FixedLayout/FixedLayout.tsx

@@ -52,7 +52,7 @@ export const FixedLayout = ({
   className,
   useParentWidth,
   ...restProps
-}: FixedLayoutProps) => {
+}: FixedLayoutProps): React.ReactNode => {
   const platform = usePlatform();
   const ref = React.useRef<HTMLElement | null>(null);
   const [width, setWidth] = React.useState<string | undefined>(undefined);

package/src/components/Flex/Flex.tsx

@@ -46,6 +46,8 @@ export interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
    * Отступы между элементами.
    * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
    * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.
+   *
+   * TODO [>=7]: порядок следования будет [row, column]
    */
   gap?: GapsProp;
   /**
@@ -70,7 +72,9 @@ export interface FlexProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   reverse?: boolean;
 }
 
-export const Flex = ({
+export const Flex: React.FC<FlexProps> & {
+  Item: typeof FlexItem;
+} = ({
   gap,
   align,
   justify,

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

@@ -43,11 +43,11 @@ export const FlexItem = ({
   flexBasis,
   style,
   ...rest
-}: FlexItemProps) => {
+}: FlexItemProps): React.ReactNode => {
   return (
     <RootComponent
       {...rest}
-      style={{ ...style, flexBasis }}
+      style={{ flexBasis, ...style }}
       baseClassName={classNames(
         styles.FlexItem,
         alignSelf && alignSelfClassNames[alignSelf],

package/src/components/FloatingArrow/DefaultIcon.tsx

@@ -21,7 +21,7 @@ export const DEFAULT_ARROW_PADDING = 10;
 const PLATFORM_HEIGHT = 1;
 const ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
 
-export const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>) => {
+export const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>): React.ReactNode => {
   return (
     <svg
       width={DEFAULT_ARROW_WIDTH}

package/src/components/FloatingArrow/FloatingArrow.tsx

@@ -47,7 +47,7 @@ export const FloatingArrow = ({
   getRootRef,
   Icon = DefaultIcon,
   ...restProps
-}: FloatingArrowProps) => {
+}: FloatingArrowProps): React.ReactNode => {
   const [arrowPlacement, arrowStyles] = getArrowPositionData(
     placement,
     coords,

package/src/components/FocusTrap/FocusTrap.tsx

@@ -1,4 +1,5 @@
 import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';
+import { arraysEquals } from '../../helpers/array';
 import { useExternRef } from '../../hooks/useExternRef';
 import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
 import {
@@ -41,7 +42,7 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   getRootRef,
   children,
   ...restProps
-}: FocusTrapProps<T>) => {
+}: FocusTrapProps<T>): React.ReactNode => {
   const ref = useExternRef<T>(getRootRef);
   const { document } = useDOM();
 
@@ -53,7 +54,9 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
     const element = focusableNodesRef.current[nodeIndex];
 
     if (element) {
-      element.focus();
+      element.focus({
+        preventScroll: true,
+      });
     }
   };
 
@@ -77,8 +80,14 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   };
 
   const onMutateParentHandler = (parentNode: HTMLElement) => {
+    const oldFocusableNodes = [...focusableNodesRef.current];
+
     recalculateFocusableNodesRef(parentNode);
 
+    if (arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {
+      return;
+    }
+
     if (document) {
       const activeElement = document.activeElement as HTMLElement;
       const currentElementIndex = Math.max(

package/src/components/Footer/Footer.tsx

@@ -9,7 +9,7 @@ export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
  */
-export const Footer = ({ children, className, ...restProps }: FooterProps) => {
+export const Footer = ({ children, className, ...restProps }: FooterProps): React.ReactNode => {
   return (
     <Footnote Component="footer" {...restProps} className={classNames(styles['Footer'], className)}>
       {children}

package/src/components/FormField/FormField.module.css

@@ -54,6 +54,14 @@
   }
 }
 
+.FormField__icon--align-start {
+  align-self: flex-start;
+}
+
+.FormField__icon--align-end {
+  align-self: flex-end;
+}
+
 .FormField__before {
   color: var(--vkui--color_icon_accent);
 }

package/src/components/FormField/FormField.tsx

@@ -17,6 +17,14 @@ const stylesStatus = {
   valid: styles['FormField--status-valid'],
 };
 
+const iconAlignClassNames = {
+  center: undefined,
+  start: styles['FormField__icon--align-start'],
+  end: styles['FormField__icon--align-end'],
+};
+
+export type FieldIconsAlign = 'start' | 'center' | 'end';
+
 export interface FormFieldProps {
   status?: 'default' | 'error' | 'valid';
   /**
@@ -28,6 +36,10 @@ export interface FormFieldProps {
    * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
    */
   before?: React.ReactNode;
+  /**
+   * Вертикальное выравнивание иконки слева
+   */
+  beforeAlign?: FieldIconsAlign;
   /**
    * Добавляет иконку справа.
    *
@@ -37,6 +49,10 @@ export interface FormFieldProps {
    * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
    */
   after?: React.ReactNode;
+  /**
+   * Вертикальное выравнивание иконки справа
+   */
+  afterAlign?: FieldIconsAlign;
   /**
    * Режим отображения.
    *
@@ -64,11 +80,13 @@ export const FormField = ({
   getRootRef,
   before,
   after,
+  beforeAlign = 'center',
+  afterAlign = 'center',
   disabled,
   mode = 'default',
   className,
   ...restProps
-}: FormFieldOwnProps) => {
+}: FormFieldOwnProps): React.ReactNode => {
   const elRef = useExternRef(getRootRef);
   const { sizeY = 'none' } = useAdaptivity();
   const [hover, setHover] = React.useState(false);
@@ -106,10 +124,20 @@ export const FormField = ({
         className,
       )}
     >
-      {before && <span className={styles['FormField__before']}>{before}</span>}
+      {before && (
+        <span className={classNames(styles['FormField__before'], iconAlignClassNames[beforeAlign])}>
+          {before}
+        </span>
+      )}
       {children}
       {after && (
-        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>
+        <span
+          className={classNames(
+            styles['FormField__after'],
+            iconAlignClassNames[afterAlign],
+            'vkuiInternalFormField__after',
+          )}
+        >
           {after}
         </span>
       )}

package/src/components/FormFieldClearButton/FormFieldClearButton.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Icon16Cancel } from '@vkontakte/icons';
+import { stopPropagation } from '../../lib/utils';
+import { HasDataAttribute } from '../../types';
+import { IconButton } from '../IconButton/IconButton';
+
+export interface FormFieldClearButtonProps extends HasDataAttribute {
+  className?: string;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export const FormFieldClearButton = ({
+  className,
+  onClick,
+  ...restProps
+}: FormFieldClearButtonProps): React.ReactNode => {
+  return (
+    <IconButton
+      Component="button"
+      label="Очистить поле"
+      onKeyDown={stopPropagation}
+      type="button"
+      activeMode="opacity"
+      hoverMode="opacity"
+      {...restProps}
+      className={className}
+      onClick={(e) => {
+        stopPropagation(e);
+        e.preventDefault();
+        onClick();
+      }}
+    >
+      <Icon16Cancel />
+    </IconButton>
+  );
+};

package/src/components/FormItem/FormItem.tsx

@@ -29,6 +29,7 @@ export interface FormItemProps
     HasComponent,
     RemovableProps {
   top?: React.ReactNode;
+  topId?: string;
   /**
    * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.
    */
@@ -75,9 +76,14 @@ export interface FormItemProps
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
-export const FormItem = ({
+export const FormItem: React.FC<FormItemProps> & {
+  Top: typeof FormItemTop;
+  TopLabel: typeof FormItemTopLabel;
+  TopAside: typeof FormItemTopAside;
+} = ({
   children,
   top,
+  topId,
   topMultiline,
   topComponent: topComponentProp,
   bottom,
@@ -102,7 +108,12 @@ export const FormItem = ({
         topNode
       ) : hasReactNode(top) ? (
         <FormItemTop>
-          <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} multiline={topMultiline}>
+          <FormItemTopLabel
+            htmlFor={htmlFor}
+            Component={topComponentProp}
+            multiline={topMultiline}
+            id={topId}
+          >
             {top}
           </FormItemTopLabel>
         </FormItemTop>

package/src/components/FormItem/FormItemTop/FormItemTop.tsx

@@ -10,7 +10,7 @@ export interface FormItemTopProps extends HTMLAttributesWithRootRef<HTMLDivEleme
  * @since 6.1.0
  *
  */
-export const FormItemTop = (props: FormItemTopProps) => (
+export const FormItemTop: React.FC<FormItemTopProps> = (props: FormItemTopProps) => (
   <RootComponent {...props} baseClassName={styles.FormItem__top} />
 );
 

package/src/components/FormItem/FormItemTop/FormItemTopAside.tsx

@@ -14,7 +14,10 @@ export interface FormItemTopAsideProps
  * @since 6.1.0
  *
  */
-export const FormItemTopAside = ({ children, ...restProps }: FormItemTopAsideProps) => {
+export const FormItemTopAside: React.FC<FormItemTopAsideProps> = ({
+  children,
+  ...restProps
+}: FormItemTopAsideProps) => {
   return (
     <Subhead className={styles['FormItemTop__aside']} {...restProps}>
       {children}

package/src/components/FormItem/FormItemTop/FormItemTopLabel.tsx

@@ -23,7 +23,7 @@ export interface FormItemTopLabelProps
  * @since 6.1.0
  *
  */
-export const FormItemTopLabel = ({
+export const FormItemTopLabel: React.FC<FormItemTopLabelProps> = ({
   children,
   Component: componentProp,
   htmlFor,

package/src/components/FormItem/context.ts

@@ -5,7 +5,8 @@ interface FormItemContextProps {
   topMultiline?: boolean;
 }
 
-export const FormItemContext = React.createContext<FormItemContextProps>({
-  required: false,
-  topMultiline: false,
-});
+export const FormItemContext: React.Context<FormItemContextProps> =
+  React.createContext<FormItemContextProps>({
+    required: false,
+    topMultiline: false,
+  });

package/src/components/FormLayoutGroup/FormLayoutGroup.module.css

@@ -1,3 +1,9 @@
+.FormLayoutGroup {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .FormLayoutGroup--mode-horizontal {
   display: flex;
   padding-block: var(--vkui--size_form_item_padding_vertical--regular);

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -47,7 +47,7 @@ export const FormLayoutGroup = ({
   onRemove = noop,
   getRootRef,
   ...restProps
-}: FormLayoutGroupProps) => {
+}: FormLayoutGroupProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
   const isRemovable = removable && mode === 'horizontal';
   const rootEl = useExternRef(getRootRef);
@@ -55,7 +55,9 @@ export const FormLayoutGroup = ({
   return (
     <RootComponent
       getRootRef={rootEl}
+      Component="fieldset"
       baseClassName={classNames(
+        styles['FormLayoutGroup'],
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         mode === 'horizontal' &&
           classNames(

package/src/components/FormStatus/FormStatus.tsx

@@ -18,7 +18,7 @@ export const FormStatus = ({
   className,
   role = mode === 'error' ? 'alert' : 'status',
   ...restProps
-}: FormStatusProps) => {
+}: FormStatusProps): React.ReactNode => {
   return (
     <Banner
       {...restProps}

package/src/components/Gallery/Gallery.tsx

@@ -24,7 +24,7 @@ export const Gallery = ({
   bullets,
   looped,
   ...props
-}: GalleryProps) => {
+}: GalleryProps): React.ReactNode => {
   const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);
   const isControlled = typeof props.slideIndex === 'number';
   const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;

package/src/components/Gallery/hooks.ts

@@ -3,7 +3,11 @@ import { useStableCallback } from '../../hooks/useStableCallback';
 import { useDOM } from '../../lib/dom';
 import { TimeoutId } from '../../types';
 
-export function useAutoPlay(timeout: number, slideIndex: number, callbackFnProp: VoidFunction) {
+export function useAutoPlay(
+  timeout: number,
+  slideIndex: number,
+  callbackFnProp: VoidFunction,
+): void {
   const { document } = useDOM();
   const callbackFn = useStableCallback(callbackFnProp);
 

package/src/components/Gradient/Gradient.module.css

@@ -1,15 +1,17 @@
 .Gradient {
-  background: linear-gradient(to bottom, var(--vkui--gradient));
+  background: linear-gradient(to bottom, var(--vkui_internal--Gradient_gradient));
+
+  --vkui_internal--Gradient_gradient: var(--vkui--gradient);
 }
 
-.Gradient.Gradient--to-bottom {
-  background: linear-gradient(to top, var(--vkui--gradient));
+.Gradient--to-bottom {
+  background: linear-gradient(to top, var(--vkui_internal--Gradient_gradient));
 }
 
 .Gradient--mode-tint {
-  background: linear-gradient(to bottom, var(--vkui--gradient_tint));
+  --vkui_internal--Gradient_gradient: var(--vkui--gradient_tint);
 }
 
-.Gradient--mode-tint.Gradient--to-bottom {
-  background: linear-gradient(to top, var(--vkui--gradient_tint));
+.Gradient--mode-overlay {
+  --vkui_internal--Gradient_gradient: var(--vkui--gradient_black);
 }

package/src/components/Gradient/Gradient.tsx

@@ -3,11 +3,16 @@ import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Gradient.module.css';
 
+const modeStyles = {
+  overlay: styles['Gradient--mode-overlay'],
+  tint: styles['Gradient--mode-tint'],
+};
+
 export interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Тип градиента
    */
-  mode?: 'tint' | 'default';
+  mode?: 'tint' | 'default' | 'overlay';
   /**
    * Направление градиента
    */
@@ -17,14 +22,18 @@ export interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Gradient
  */
-export const Gradient = ({ mode = 'default', to = 'top', ...restProps }: GradientProps) => {
+export const Gradient = ({
+  mode = 'default',
+  to = 'top',
+  ...restProps
+}: GradientProps): React.ReactNode => {
   return (
     <RootComponent
       role="presentation"
       {...restProps}
       baseClassName={classNames(
         styles['Gradient'],
-        mode !== 'default' && styles['Gradient--mode-tint'],
+        mode !== 'default' && modeStyles[mode],
         to === 'bottom' && styles['Gradient--to-bottom'],
       )}
     />

package/src/components/GridAvatar/GridAvatar.tsx

@@ -22,7 +22,7 @@ const warn = warnOnce('GridAvatar');
 /**
  * @see https://vkcom.github.io/VKUI/#/GridAvatar
  */
-export const GridAvatar = ({
+export const GridAvatar: React.FC<GridAvatarProps> & { Badge: typeof GridAvatarBadge } = ({
   src = [],
   size = GRID_AVATAR_DEFAULT_SIZE,
   className,

package/src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx

@@ -5,7 +5,10 @@ import styles from './GridAvatarBadge.module.css';
 
 export type GridAvatarBadgeProps = ImageBaseBadgeProps;
 
-export const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {
+export const GridAvatarBadge = ({
+  className,
+  ...restProps
+}: GridAvatarBadgeProps): React.ReactNode => {
   const { size } = React.useContext(ImageBaseContext);
   return (
     <ImageBase.Badge

package/src/components/Group/Group.tsx

@@ -91,7 +91,7 @@ export const Group = ({
   padding = 'm',
   tabIndex: tabIndexProp,
   ...restProps
-}: GroupProps) => {
+}: GroupProps): React.ReactNode => {
   const { isInsideModal } = React.useContext(ModalRootContext);
   const { sizeX = 'none' } = useAdaptivity();
 

package/src/components/Header/Header.tsx

@@ -84,7 +84,7 @@ export const Header = ({
   aside,
   multiline,
   ...restProps
-}: HeaderProps) => {
+}: HeaderProps): React.ReactNode => {
   return (
     <RootComponent
       {...restProps}

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -59,7 +59,7 @@ export const HorizontalCell = ({
   getRef,
   extraSubtitle,
   ...restProps
-}: HorizontalCellProps) => {
+}: HorizontalCellProps): React.ReactNode => {
   return (
     <div
       ref={getRootRef}

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

@@ -7,6 +7,10 @@
   margin-inline-start: calc(-1 * var(--vkui_internal--side_cell_gap));
 }
 
+.HorizontalCellShowMore--centered {
+  margin-block: auto;
+}
+
 .HorizontalCellShowMore:last-child::after {
   content: '';
   min-inline-size: var(--vkui_internal--side_cell_gap);

package/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx

@@ -43,6 +43,10 @@ export interface HorizontalCellShowMoreProps
    * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.
    */
   compensateLastCellIndent?: boolean;
+  /**
+   * Выравнивание по центру относительно родителя
+   */
+  centered?: boolean;
 }
 
 export const HorizontalCellShowMore = ({
@@ -54,14 +58,16 @@ export const HorizontalCellShowMore = ({
   height,
   size = 's',
   children = size === 's' ? 'Все' : 'Показать все',
+  centered = false,
   ...restProps
-}: HorizontalCellShowMoreProps) => {
+}: HorizontalCellShowMoreProps): React.ReactNode => {
   return (
     <div
       style={style}
       className={classNames(
         styles['HorizontalCellShowMore'],
         compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],
+        centered && styles['HorizontalCellShowMore--centered'],
         sizeClassNames[size],
         className,
       )}

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -179,7 +179,7 @@ export const HorizontalScroll = ({
   scrollOnAnyWheel = false,
   inline = false,
   ...restProps
-}: HorizontalScrollProps) => {
+}: HorizontalScrollProps): React.ReactNode => {
   const [canScrollLeft, setCanScrollLeft] = React.useState(false);
   const [canScrollRight, setCanScrollRight] = React.useState(false);
   const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();

package/src/components/IconButton/IconButton.tsx

@@ -24,7 +24,12 @@ const warn = warnOnce('IconButton');
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
-export const IconButton = ({ label, children, className, ...restProps }: IconButtonProps) => {
+export const IconButton = ({
+  label,
+  children,
+  className,
+  ...restProps
+}: IconButtonProps): React.ReactNode => {
   const platform = usePlatform();
   const { sizeY = 'none' } = useAdaptivity();
 

package/src/components/Image/Image.module.css

@@ -0,0 +1,19 @@
+.Image {
+  border-radius: var(--vkui_internal--Image_border_radius, initial);
+}
+
+.Image--borderStartStartRadius {
+  border-start-start-radius: var(--vkui_internal--Image_border_start_start_radius, initial);
+}
+
+.Image--borderStartEndRadius {
+  border-start-end-radius: var(--vkui_internal--Image_border_start_end_radius, initial);
+}
+
+.Image--borderEndStartRadius {
+  border-end-start-radius: var(--vkui_internal--Image_border_end_start_radius, initial);
+}
+
+.Image--borderEndEndRadius {
+  border-end-end-radius: var(--vkui_internal--Image_border_end_end_radius, initial);
+}