@vkontakte/vkui 6.0.2 → 6.1.0

package/src/components/Spacing/Spacing.tsx

@@ -3,22 +3,47 @@ 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 interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Высота спэйсинга
    */
-  size?: number;
+  size?: number | Size;
 }
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export const Spacing = ({ size = 8, style: styleProp, ...restProps }: SpacingProps) => {
+export const Spacing = ({ size = 'm', style: styleProp, ...restProps }: SpacingProps) => {
   const style: React.CSSProperties = {
-    height: size,
-    padding: `${size / 2}px 0`,
+    ...getSizeStyle(size),
     ...styleProp,
   };
 
   return <RootComponent {...restProps} baseClassName={styles['Spacing']} style={style} />;
 };
+
+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/SplitLayout/SplitLayout.module.css

@@ -25,3 +25,7 @@
     -1 * (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
   );
 }
+
+.SplitLayout--center {
+  justify-content: center;
+}

package/src/components/SplitLayout/SplitLayout.tsx

@@ -17,6 +17,10 @@ export interface SplitLayoutProps
    */
   modal?: React.ReactNode;
   header?: React.ReactNode;
+  /**
+   * Центрирует контент.
+   */
+  center?: boolean;
 }
 
 /**
@@ -30,6 +34,7 @@ export const SplitLayout = ({
   getRootRef,
   getRef,
   className,
+  center,
   ...restProps
 }: SplitLayoutProps) => {
   const platform = usePlatform();
@@ -39,6 +44,7 @@ export const SplitLayout = ({
       className={classNames(
         styles['SplitLayout'],
         platform === 'ios' && styles['SplitLayout--ios'],
+        center && styles['SplitLayout--center'],
       )}
       popout={popout}
       modal={modal}

package/src/components/TabsItem/TabsItem.module.css

@@ -10,6 +10,7 @@
   min-block-size: 32px;
   border-radius: var(--vkui--size_border_radius--regular);
   transition: background-color 150ms ease-out;
+  text-decoration: none;
 }
 
 .TabsItem--withGaps {
@@ -113,11 +114,6 @@
 .TabsItem--selected.TabsItem--mode-accent .TabsItem__before {
   color: var(--vkui--color_icon_accent_themed);
 }
-
-.TabsItem--selected.TabsItem--mode-secondary .TabsItem__before {
-  opacity: 0.72;
-}
-
 /* Элемент */
 .TabsItem__label {
   max-inline-size: 100%;
@@ -137,10 +133,6 @@
   color: var(--vkui--color_text_accent_themed);
 }
 
-.TabsItem--selected.TabsItem--mode-secondary .TabsItem__label {
-  opacity: 0.72;
-}
-
 /* Элемент */
 .TabsItem__status {
   margin-inline-start: 6px;
@@ -153,6 +145,14 @@
 /* Элемент */
 .TabsItem__after {
   margin-inline-start: 6px;
+  color: var(--vkui--color_icon_medium);
+}
+
+.TabsItem--selected .TabsItem__after {
+  color: var(--vkui--color_icon_primary);
+}
+
+.TabsItem--mode-accent.TabsItem--selected .TabsItem__after {
   color: var(--vkui--color_icon_accent_themed);
 }
 

package/src/components/TabsItem/TabsItem.tsx

@@ -5,9 +5,9 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { usePrevious } from '../../hooks/usePrevious';
 import { useDOM } from '../../lib/dom';
 import { warnOnce } from '../../lib/warnOnce';
-import { HTMLAttributesWithRootRef } from '../../types';
+import { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';
 import { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';
-import { Tappable } from '../Tappable/Tappable';
+import { Tappable, TappableProps } from '../Tappable/Tappable';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -29,7 +29,19 @@ const fillModeClassNames = {
   shrinked: styles['TabsItem--shrinked'],
 };
 
-export interface TabsItemProps extends HTMLAttributesWithRootRef<HTMLElement> {
+export interface TabsItemProps
+  extends HTMLAttributesWithRootRef<HTMLElement>,
+    AnchorHTMLAttributesOnly,
+    Pick<
+      TappableProps,
+      | 'activeMode'
+      | 'hoverMode'
+      | 'hovered'
+      | 'activated'
+      | 'hasActive'
+      | 'hasHover'
+      | 'focusVisibleMode'
+    > {
   /**
    * Добавляет иконку слева.
    *
@@ -70,6 +82,13 @@ export const TabsItem = ({
   role = 'tab',
   tabIndex: tabIndexProp,
   getRootRef,
+  hoverMode = styles['TabsItem--hover'],
+  activeMode = '',
+  hovered,
+  activated,
+  hasHover,
+  hasActive = false,
+  focusVisibleMode = 'inside',
   ...restProps
 }: TabsItemProps) => {
   const { sizeY = 'none' } = useAdaptivity();
@@ -172,10 +191,13 @@ export const TabsItem = ({
         layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],
         className,
       )}
-      hoverMode={styles['TabsItem--hover']}
-      activeMode=""
-      focusVisibleMode="inside"
-      hasActive={false}
+      hoverMode={hoverMode}
+      activeMode={activeMode}
+      hasHover={hasHover}
+      hasActive={hasActive}
+      hovered={hovered}
+      activated={activated}
+      focusVisibleMode={focusVisibleMode}
       role={role}
       aria-selected={selected}
       tabIndex={tabIndex}

package/src/components/Tappable/Tappable.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { SizeType } from '../../lib/adaptivity';

package/src/components/Textarea/Textarea.module.css

@@ -3,19 +3,14 @@
 }
 
 .Textarea__el {
-  margin: 0;
-  inline-size: 100%;
+  position: relative;
+  z-index: var(--vkui_internal--z_index_form_field_element);
   display: block;
-  box-sizing: border-box;
-  resize: none;
-  appearance: none;
-  color: var(--vkui--color_text_primary);
   padding: 12px;
+  inline-size: 100%;
   max-block-size: 204px;
-  border: 0;
-  z-index: var(--vkui_internal--z_index_form_field_element);
-  position: relative;
-  background: transparent;
+  box-sizing: border-box;
+  color: var(--vkui--color_text_primary);
 }
 
 .Textarea__el[cols] {
@@ -45,3 +40,11 @@
 .Textarea__el:disabled::placeholder {
   color: var(--vkui--color_text_secondary);
 }
+
+.Textarea--align-center .Textarea__el {
+  text-align: center;
+}
+
+.Textarea--align-right .Textarea__el {
+  text-align: end;
+}

package/src/components/Textarea/Textarea.tsx

@@ -3,9 +3,9 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { callMultiple } from '../../lib/callMultiple';
-import { HasRef, HasRootRef } from '../../types';
+import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormField, FormFieldProps } from '../FormField/FormField';
-import { Text } from '../Typography/Text/Text';
+import { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';
 import styles from './Textarea.module.css';
 
 const sizeYClassNames = {
@@ -18,9 +18,10 @@ export interface TextareaProps
     HasRef<HTMLTextAreaElement>,
     HasRootRef<HTMLElement>,
     Pick<React.CSSProperties, 'maxHeight'>,
-    Pick<FormFieldProps, 'status'> {
+    HasAlign,
+    Pick<FormFieldProps, 'status' | 'mode'> {
   grow?: boolean;
-  onResize?(el: HTMLTextAreaElement): void;
+  onResize?: (el: HTMLTextAreaElement) => void;
   defaultValue?: string;
 }
 
@@ -38,6 +39,8 @@ export const Textarea = ({
   maxHeight,
   status,
   onChange,
+  align,
+  mode,
   ...restProps
 }: TextareaProps) => {
   const currentScrollHeight = React.useRef<number>();
@@ -65,17 +68,19 @@ export const Textarea = ({
       className={classNames(
         styles['Textarea'],
         sizeY !== 'regular' && sizeYClassNames[sizeY],
+        align === 'right' && styles['Textarea--align-right'],
+        align === 'center' && styles['Textarea--align-center'],
         className,
       )}
       style={style}
       getRootRef={getRootRef}
       disabled={restProps.disabled}
       status={status}
+      mode={mode}
     >
-      <Text
+      <UnstyledTextField
         {...restProps}
-        Component="textarea"
-        normalize={false}
+        as="textarea"
         style={{ maxHeight }}
         rows={rows}
         className={styles['Textarea__el']}

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

@@ -0,0 +1,160 @@
+.ToolButton {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  text-decoration: none;
+  border: 0;
+  margin: 0;
+  padding: 10px;
+  border-radius: var(--vkui--size_border_radius_paper--regular);
+  inline-size: 100%;
+  flex-grow: 1;
+  flex-basis: 0;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--vkui--font_caption1--font_family--regular);
+  font-size: var(--vkui--font_caption1--font_size--regular);
+  line-height: var(--vkui--font_caption1--line_height--regular);
+}
+
+.ToolButton--rounded {
+  border-radius: var(--vkui--size_border_radius_rounded--regular);
+}
+
+.ToolButton--sizeY-regular {
+  font-family: var(--vkui--font_subhead--font_family--regular);
+  font-size: var(--vkui--font_subhead--font_size--regular);
+  line-height: var(--vkui--font_subhead--line_height--regular);
+}
+
+@media (--sizeY-regular) {
+  .ToolButton--sizeY-none {
+    font-family: var(--vkui--font_subhead--font_family--regular);
+    font-size: var(--vkui--font_subhead--font_size--regular);
+    line-height: var(--vkui--font_subhead--line_height--regular);
+  }
+}
+
+.ToolButton[disabled] {
+  opacity: var(--vkui--opacity_disable);
+}
+
+/* ToolButton's directions */
+.ToolButton--direction-row {
+  flex-direction: row;
+}
+
+.ToolButton--direction-column {
+  flex-direction: column;
+}
+
+/* stylelint-disable selector-max-universal -- gap для элементов */
+.ToolButton--direction-row > * {
+  margin-inline-end: 4px;
+}
+
+.ToolButton--direction-row > *:last-child {
+  margin-inline-end: 0;
+}
+
+.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 {
+  background-color: var(--vkui--color_background_accent_themed);
+}
+
+.ToolButton--mode-primary.ToolButton--appearance-accent.ToolButton--hover {
+  background-color: var(--vkui--color_background_accent_themed--hover);
+}
+
+.ToolButton--mode-primary.ToolButton--appearance-accent.ToolButton--active {
+  background-color: var(--vkui--color_background_accent_themed--active);
+}
+
+.ToolButton--mode-primary.ToolButton--appearance-neutral {
+  background-color: var(--vkui--color_background_secondary);
+}
+
+.ToolButton--mode-primary.ToolButton--appearance-neutral.ToolButton--hover {
+  background-color: var(--vkui--color_background_secondary--hover);
+}
+
+.ToolButton--mode-primary.ToolButton--appearance-neutral.ToolButton--active {
+  background-color: var(--vkui--color_background_secondary--active);
+}
+
+/* Mode = Secondary */
+.ToolButton--mode-secondary {
+  background-color: var(--vkui--color_background_secondary_alpha);
+}
+
+.ToolButton--mode-secondary.ToolButton--hover {
+  background-color: var(--vkui--color_background_secondary_alpha--hover);
+}
+
+.ToolButton--mode-secondary.ToolButton--active {
+  background-color: var(--vkui--color_background_secondary_alpha--active);
+}
+
+/* Mode = Tertiary */
+.ToolButton--mode-tertiary,
+.ToolButton--mode-outline {
+  background-color: var(--vkui--color_transparent);
+}
+
+.ToolButton--mode-tertiary.ToolButton--hover,
+.ToolButton--mode-outline.ToolButton--hover {
+  background-color: var(--vkui--color_transparent--hover);
+}
+
+.ToolButton--mode-tertiary.ToolButton--active,
+.ToolButton--mode-outline.ToolButton--active {
+  background-color: var(--vkui--color_transparent--active);
+}
+
+/*
+  ToolButtons text colors
+*/
+.ToolButton.ToolButton--appearance-accent {
+  color: var(--vkui--color_text_accent_themed);
+}
+
+.ToolButton.ToolButton--appearance-neutral {
+  color: var(--vkui--color_text_primary);
+}
+
+.ToolButton--mode-primary.ToolButton--appearance-accent {
+  color: var(--vkui--color_text_contrast_themed);
+}
+
+/*
+  Outline buttons borders
+*/
+.ToolButton--mode-outline.ToolButton--appearance-accent,
+.ToolButton--mode-outline.ToolButton--appearance-accent.ToolButton--hover,
+.ToolButton--mode-outline.ToolButton--appearance-accent.ToolButton--active {
+  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_accent_themed);
+}
+
+.ToolButton--mode-outline.ToolButton--appearance-neutral {
+  box-shadow: inset 0 0 0 1px var(--vkui--color_field_border_alpha);
+}
+
+.ToolButton--mode-outline.ToolButton--appearance-neutral.ToolButton--hover {
+  background-color: var(--vkui--color_background_secondary--hover);
+  box-shadow: unset;
+}
+
+.ToolButton--mode-outline.ToolButton--appearance-neutral.ToolButton--active {
+  background-color: var(--vkui--color_background_secondary--active);
+  box-shadow: unset;
+}

package/src/components/ToolButton/ToolButton.tsx

@@ -0,0 +1,83 @@
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import {
+  AdaptiveIconRenderer,
+  AdaptiveIconRendererProps,
+} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
+import { Tappable, TappableProps } from '../Tappable/Tappable';
+import styles from './ToolButton.module.css';
+
+const stylesMode = {
+  primary: styles['ToolButton--mode-primary'],
+  secondary: styles['ToolButton--mode-secondary'],
+  tertiary: styles['ToolButton--mode-tertiary'],
+  outline: styles['ToolButton--mode-outline'],
+};
+
+const stylesAppearance = {
+  accent: styles['ToolButton--appearance-accent'],
+  neutral: styles['ToolButton--appearance-neutral'],
+};
+
+const stylesDirection = {
+  row: styles['ToolButton--direction-row'],
+  column: styles['ToolButton--direction-column'],
+};
+
+const sizeYClassNames = {
+  none: styles['ToolButton--sizeY-none'],
+  ['regular']: styles['ToolButton--sizeY-regular'],
+};
+
+export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {
+  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';
+  appearance?: 'accent' | 'neutral';
+  direction?: 'row' | 'column';
+  rounded?: boolean;
+}
+
+/**
+ * Кнопки, которые используются для вызова инструмента, вставки аттачей или
+ * для форматирования. Их можно использовать как кнопки для разового действия
+ * или для включения/выключения режима.
+ *
+ * @see https://vkcom.github.io/VKUI/#/ToolButton
+ */
+export const ToolButton = ({
+  mode = 'primary',
+  appearance = 'accent',
+  direction = 'row',
+  onClick = noop,
+  className,
+  children,
+  IconCompact,
+  IconRegular,
+  rounded,
+  ...restProps
+}: ToolButtonProps) => {
+  const { sizeY = 'none' } = useAdaptivity();
+  const hasChildren = hasReactNode(children);
+
+  return (
+    <Tappable
+      hoverMode={styles['ToolButton--hover']}
+      activeMode={styles['ToolButton--active']}
+      Component={restProps.href ? 'a' : 'button'}
+      focusVisibleMode="outside"
+      onClick={onClick}
+      className={classNames(
+        className,
+        styles['ToolButton'],
+        rounded && !hasChildren && styles['ToolButton--rounded'],
+        stylesMode[mode],
+        stylesAppearance[appearance],
+        stylesDirection[direction],
+        sizeY !== 'compact' && sizeYClassNames[sizeY],
+      )}
+      {...restProps}
+    >
+      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />
+      {hasChildren && <span>{children}</span>}
+    </Tappable>
+  );
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { getWindow } from '@vkontakte/vkui-floating-ui/utils/dom';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
 import { usePatchChildren } from '../../hooks/usePatchChildren';
-import { Keys, pressedKey } from '../../lib/accessibility';
-import { animationFadeClassNames } from '../../lib/cssAnimation';
+import { animationFadeClassNames } from '../../lib/animation';
 import {
   type FloatingComponentProps,
   getArrowCoordsByMiddlewareData,
@@ -12,7 +11,6 @@ import {
   useFloatingWithInteractions,
   usePlacementChangeCallback,
 } from '../../lib/floating';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';
 import { Subhead } from '../Typography/Subhead/Subhead';
@@ -32,6 +30,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'zIndex'
   | 'usePortal'
   | 'onPlacementChange'
+  | 'disableFlipMiddleware'
 >;
 
 type AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps'>;
@@ -69,6 +68,7 @@ export const Tooltip = ({
   offsetByMainAxis = 8,
   offsetByCrossAxis = 0,
   hideWhenReferenceHidden,
+  disableFlipMiddleware = false,
 
   // useFloatingWithInteractions
   defaultShown,
@@ -115,6 +115,7 @@ export const Tooltip = ({
     arrowRef,
     arrowPadding,
     arrowHeight,
+    disableFlipMiddleware,
   });
   const {
     shown,
@@ -138,7 +139,7 @@ export const Tooltip = ({
   });
   const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);
 
-  usePlacementChangeCallback(placement, onPlacementChange);
+  usePlacementChangeCallback(placementProp, placement, onPlacementChange);
 
   let tooltip: React.ReactNode = null;
   if (shown) {
@@ -178,26 +179,9 @@ export const Tooltip = ({
       </AppRootPortal>
     );
   }
-  const [childRef, child] = usePatchChildren(children, referenceProps, refs.setReference);
-
-  useIsomorphicLayoutEffect(
-    function handleGlobalKeyDownIfTooltipShown() {
-      if (!onEscapeKeyDown || !shown) {
-        return;
-      }
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (pressedKey(event) === Keys.ESCAPE) {
-          onEscapeKeyDown();
-        }
-      };
-      const doc = getWindow(childRef.current).document;
-      doc.addEventListener('keydown', handleKeyDown, { passive: true, capture: true });
-      return () => {
-        doc.removeEventListener('keydown', handleKeyDown, { capture: true });
-      };
-    },
-    [shown, childRef, onEscapeKeyDown],
-  );
+  const [, child] = usePatchChildren(children, referenceProps, refs.setReference);
+
+  useGlobalEscKeyDown(shown, onEscapeKeyDown);
 
   return (
     <React.Fragment>

package/src/components/Typography/Caption/Caption.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { HasCaps, Typography, TypographyProps } from '../Typography';
 import styles from './Caption.module.css';

package/src/components/Typography/EllipsisText/EllipsisText.module.css

@@ -0,0 +1,14 @@
+.EllipsisText {
+  display: inline-flex;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+.EllipsisText__content {
+  min-inline-size: 1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 0 auto;
+  max-inline-size: inherit;
+}

package/src/components/Typography/EllipsisText/EllipsisText.tsx

@@ -0,0 +1,37 @@
+import { classNames } from '@vkontakte/vkjs';
+import { HasRootRef } from '../../../types';
+import { RootComponentProps } from '../../RootComponent/RootComponent';
+import styles from './EllipsisText.module.css';
+
+export interface EllipsisTextProps
+  extends RootComponentProps<HTMLElement>,
+    HasRootRef<HTMLElement> {
+  /**
+   * Пользовательская маскимальная ширина.
+   *
+   * Используйте в случаях, когда у контейнера ширина зависит от размера контента,
+   * другими словами, когда ширина не ограничена.
+   */
+  maxWidth?: number;
+}
+
+/** Компонент ограничивает текстовый контент убирая его в многоточие.
+ *
+ * @since 6.1.0
+ * @see https://vkcom.github.io/VKUI/#/EllipsisText
+ */
+const EllipsisText = ({
+  className,
+  getRootRef,
+  children,
+  maxWidth,
+  ...restProps
+}: EllipsisTextProps) => (
+  <span ref={getRootRef} className={classNames(styles['EllipsisText'], className)} {...restProps}>
+    <span style={{ maxWidth }} className={styles['EllipsisText__content']}>
+      {children}
+    </span>
+  </span>
+);
+
+export { EllipsisText };

package/src/components/Typography/Footnote/Footnote.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { HasCaps, Typography, TypographyProps } from '../Typography';
 import styles from './Footnote.module.css';