@vkontakte/vkui 7.1.2 → 7.2.0

package/src/components/Cell/CellDragger/CellDragger.module.css

@@ -1,9 +1,9 @@
 /* stylelint-disable selector-max-universal */
 .host {
-  cursor: ns-resize;
   color: var(--vkui--color_icon_secondary);
-  user-select: none;
   touch-action: manipulation;
+  cursor: ns-resize;
+  user-select: none;
 }
 
 .icon {

package/src/components/CellButton/CellButton.module.css

@@ -1,12 +1,12 @@
 .host {
   box-sizing: border-box;
-  text-decoration: none;
-  margin: 0;
-  border: 0;
   inline-size: 100%;
-  background: transparent;
-  text-align: start;
   padding-block: 0;
+  margin: 0;
+  text-align: start;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
 }
 
 /**
@@ -15,8 +15,8 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormItem) .host {
-  inline-size: 100%;
   box-sizing: content-box;
+  inline-size: 100%;
   margin-block: 0;
   margin-inline: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
@@ -38,11 +38,11 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .centered :global(.vkuiIcon) {
+  padding-inline-end: var(--vkui--spacing_size_m);
   /* компенсируем отступ заданные в SimpleCell__before */
   margin-inline-end: calc(
     -1 * var(--vkui_internal--SimpleCell-before-inline-padding-end, var(--vkui--spacing_size_xl))
   );
-  padding-inline-end: var(--vkui--spacing_size_m);
 }
 
 .appearanceAccent {

package/src/components/CellButtonGroup/CellButtonGroup.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type HTMLAttributesWithRootRef } from '../../types';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
+import { CellButtonGroupSeparator } from './CellButtonGroupSeparator/CellButtonGroupSeparator';
+
+export type CellButtonGroupProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+
+/**
+ * @since 7.2.0
+ *
+ * @see https://vkcom.github.io/VKUI/#/CellButtonGroup
+ */
+export const CellButtonGroup = (props: CellButtonGroupProps): React.ReactNode => {
+  return <ButtonGroup gap="none" stretched {...props} />;
+};
+
+CellButtonGroup.displayName = 'CellButtonGroup';
+
+CellButtonGroup.Separator = CellButtonGroupSeparator;
+CellButtonGroup.Separator.displayName = 'CellButtonGroup.Separator';

package/src/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.module.css

@@ -0,0 +1,5 @@
+.root {
+  flex: 0 0 auto;
+
+  --vkui--size_base_padding_horizontal--regular: 10px;
+}

package/src/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.tsx

@@ -0,0 +1,21 @@
+import { classNames } from '@vkontakte/vkjs';
+import { Separator, type SeparatorProps } from '../../Separator/Separator';
+import styles from './CellButtonGroupSeparator.module.css';
+
+type CellButtonGroupSeparatorProps = Omit<SeparatorProps, 'direction' | 'padding'>;
+
+export const CellButtonGroupSeparator = ({
+  className,
+  ...restProps
+}: CellButtonGroupSeparatorProps) => {
+  return (
+    <Separator
+      className={classNames(styles.root, className)}
+      {...restProps}
+      direction="vertical"
+      padding
+    />
+  );
+};
+
+CellButtonGroupSeparator.displayName = 'CellButtonGroupSeparator';

package/src/components/Checkbox/CheckboxSimple/CheckboxSimple.module.css

@@ -1,10 +1,10 @@
 .host {
   display: flex;
-  justify-content: center;
   align-items: center;
-  border-radius: 50%;
+  justify-content: center;
   inline-size: var(--vkui--size_field_height--regular);
   block-size: var(--vkui--size_field_height--regular);
+  border-radius: 50%;
 }
 
 .host[disabled] {

package/src/components/ChipsInputBase/Chip/Chip.module.css

@@ -1,11 +1,11 @@
 .host {
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
+  block-size: 32px;
   background: var(--vkui--color_background_content);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
   border-radius: 6px;
-  block-size: 32px;
-  box-sizing: border-box;
 }
 
 .in,
@@ -27,34 +27,34 @@
 }
 
 .content {
+  display: inline-block;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--vkui--color_text_primary);
-  display: inline-block;
+  font-family: var(--vkui--font_paragraph--font_family--regular);
 
   /* Typography/Paragraph */
   font-size: var(--vkui--font_paragraph--font_size--regular);
-  line-height: var(--vkui--font_paragraph--line_height--regular);
   font-weight: var(--vkui--font_paragraph--font_weight--regular);
-  font-family: var(--vkui--font_paragraph--font_family--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+  color: var(--vkui--color_text_primary);
+  white-space: nowrap;
 }
 
 .sizeYCompact .content {
+  font-family: var(--vkui--font_footnote--font_family--regular);
   /* Typography/Footnote */
   font-size: var(--vkui--font_footnote--font_size--regular);
-  line-height: var(--vkui--font_footnote--line_height--regular);
   font-weight: var(--vkui--font_footnote--font_weight--regular);
-  font-family: var(--vkui--font_footnote--font_family--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
 }
 
 @media (--sizeY-compact) {
   .sizeYNone .content {
+    font-family: var(--vkui--font_footnote--font_family--regular);
     /* Typography/Footnote */
     font-size: var(--vkui--font_footnote--font_size--regular);
-    line-height: var(--vkui--font_footnote--line_height--regular);
     font-weight: var(--vkui--font_footnote--font_weight--regular);
-    font-family: var(--vkui--font_footnote--font_family--regular);
+    line-height: var(--vkui--font_footnote--line_height--regular);
   }
 }
 
@@ -64,15 +64,15 @@
 }
 
 .remove {
+  box-sizing: border-box;
   flex: 0 0 100%;
   padding: 5px;
-  transform: translateX(-1px);
   color: var(--vkui--color_icon_secondary);
+  cursor: pointer;
+  background: transparent;
   border: 0;
   border-radius: inherit;
-  background: transparent;
-  box-sizing: border-box;
-  cursor: pointer;
+  transform: translateX(-1px);
 }
 
 .before {

package/src/components/ChipsInputBase/ChipsInputBase.module.css

@@ -1,17 +1,17 @@
 .host {
   --vkui_internal--chips_input_base_container_gap: 4px;
 
-  flex-grow: 1;
-  flex-shrink: 1;
   position: relative;
+  z-index: var(--vkui_internal--z_index_form_field_element);
   display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
   flex-wrap: wrap;
   max-inline-size: 100%;
-  list-style: none;
-  margin: 0;
   padding: var(--vkui_internal--chips_input_base_container_gap);
-  z-index: var(--vkui_internal--z_index_form_field_element);
+  margin: 0;
   overflow: hidden;
+  list-style: none;
 }
 
 .chip {
@@ -20,17 +20,17 @@
 }
 
 .el {
-  flex: 1;
   position: relative;
+  flex: 1;
   inline-size: 100%;
+  padding: 0;
   margin-block: 2px 4px;
   margin-inline: 10px 2px;
-  padding: 0;
   color: var(--vkui--color_text_primary);
+  appearance: none;
   background: transparent;
   border: 0;
   box-shadow: none;
-  appearance: none;
 }
 
 .el:not(:read-only):focus {
@@ -56,9 +56,9 @@
 }
 
 .hasPlaceholder .el {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   margin-inline: calc(12px - var(--vkui_internal--chips_input_base_container_gap)) 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /**

package/src/components/ChipsSelect/ChipsSelect.module.css

@@ -5,8 +5,8 @@
 .empty {
   padding-block: 12px;
   padding-inline: 0;
-  text-align: center;
   color: var(--vkui--color_text_secondary);
+  text-align: center;
 }
 
 .popDown {

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -161,6 +161,7 @@ export const ChipsSelect = <Option extends ChipOption>({
   forceDropdownPortal,
   noMaxHeight = false,
   filterFn = defaultFilterFn,
+  sortFn = false,
   dropdownTestId,
   onClose,
   onOpen,
@@ -231,6 +232,7 @@ export const ChipsSelect = <Option extends ChipOption>({
     emptyText,
     creatable,
     filterFn,
+    sortFn,
     selectedBehavior,
     onClose,
     onOpen,

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { isEqual } from '@vkontakte/vkjs';
 import { type SimulateReactInputTargetState } from '../../lib/react';
-import { defaultFilterFn, type FilterFn } from '../../lib/select';
+import { defaultFilterFn, type FilterFn, type SortFn } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import {
   transformValue,
@@ -39,6 +39,7 @@ export interface UseChipsSelectProps<O extends ChipOption = ChipOption>
    */
   selectedBehavior?: 'hide' | 'highlight';
   filterFn?: false | FilterFn<O>;
+  sortFn?: false | SortFn<O>;
   /**
    * Будет вызвано в момент скрытия выпадающего списка
    */
@@ -70,6 +71,7 @@ export const useChipsSelect = <O extends ChipOption>({
   creatable = false,
   emptyText = DEFAULT_EMPTY_TEXT,
   filterFn = defaultFilterFn,
+  sortFn = false,
   selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,
   options: optionsProp = DEFAULT_VALUE,
   onClose,
@@ -130,6 +132,7 @@ export const useChipsSelect = <O extends ChipOption>({
           emptyText,
           creatable,
           filterFn,
+          sortFn,
           options: optionsProp,
           selectedBehavior,
         })
@@ -173,6 +176,7 @@ export const useChipsSelect = <O extends ChipOption>({
           emptyText,
           creatable,
           filterFn,
+          sortFn,
           options: optionsProp,
           selectedBehavior,
         });
@@ -194,6 +198,7 @@ export const useChipsSelect = <O extends ChipOption>({
       creatable,
       selectedBehavior,
       filterFn,
+      sortFn,
     ],
   );
 
@@ -225,6 +230,7 @@ function transformOptions<O extends ChipOption>({
   inputValue = DEFAULT_INPUT_VALUE,
   emptyText = DEFAULT_EMPTY_TEXT,
   creatable = false,
+  sortFn = false,
   filterFn = defaultFilterFn,
   options: optionsProp = DEFAULT_VALUE,
   selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,
@@ -237,6 +243,7 @@ function transformOptions<O extends ChipOption>({
     | 'emptyText'
     | 'creatable'
     | 'filterFn'
+    | 'sortFn'
     | 'options'
     | 'selectedBehavior'
   >) {
@@ -251,6 +258,10 @@ function transformOptions<O extends ChipOption>({
     return [{ placeholder: emptyText }];
   }
 
+  if (sortFn) {
+    filteredOptionsProp.sort((optionA, optionB) => sortFn(optionA, optionB, inputValue));
+  }
+
   const parsedOptions = transformValue(filteredOptionsProp, getOptionValue, getOptionLabel);
 
   if (selectedBehavior === 'hide') {

package/src/components/Clickable/Clickable.module.css

@@ -12,8 +12,8 @@ button.realClickable {
 }
 
 a.realClickable {
-  appearance: none;
   text-decoration: none;
+  appearance: none;
 }
 /* stylelint-enable selector-max-type */
 

package/src/components/Clickable/Clickable.tsx

@@ -26,6 +26,7 @@ const NonClickable = <T,>({
   unlockParentHover,
   activated,
   activeEffectDelay,
+  focusVisibleMode,
   ...restProps
 }: ClickableProps<T>) => <RootComponent {...restProps} />;
 
@@ -61,15 +62,29 @@ function component<T>({
   disabled,
 }: RootComponentProps<T>): RootComponentProps<T> {
   if (Component !== undefined) {
-    return { Component };
+    return { Component, disabled };
   } else if (href !== undefined) {
-    return { 'Component': 'a', 'aria-disabled': disabled };
+    return {
+      Component: 'a',
+
+      /**
+       * Если ссылка отключена, добавляем атрибуты для доступности.
+       *
+       * - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`
+       * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role="link"`
+       *
+       * https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria
+       */
+      ...(disabled && {
+        'aria-disabled': true,
+        'role': 'link',
+      }),
+    };
   } else if (onClick !== undefined || onClickCapture !== undefined) {
     return {
-      'Component': 'div',
-      'role': 'button',
-      'tabIndex': disabled ? undefined : 0,
-      'aria-disabled': disabled,
+      Component: 'div',
+      role: 'button',
+      ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),
     };
   }
 
@@ -88,25 +103,22 @@ function component<T>({
  * - стейты наведения и нажатия
  * - a11y компонентов
  */
-export const Clickable = <T,>({
-  focusVisibleMode = 'inside',
-  baseClassName: baseClassNameProp,
-  ...restProps
-}: ClickableProps<T>): React.ReactNode => {
-  const commonProps = component(restProps);
-  const isClickable = checkClickable(restProps);
-  const baseClassName = classNames(baseClassNameProp, styles.host);
+export const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {
+  const commonProps = component(props);
+  const isClickable = checkClickable(props);
+  const Component = isClickable ? RealClickable : NonClickable;
 
-  if (isClickable) {
-    return (
-      <RealClickable
-        baseClassName={baseClassName}
-        focusVisibleMode={focusVisibleMode}
-        {...commonProps}
-        {...restProps}
-      />
-    );
-  }
+  const {
+    baseClassName,
+    disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps
+    ...restProps
+  } = props;
 
-  return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;
+  return (
+    <Component
+      baseClassName={classNames(baseClassName, styles.host)}
+      {...commonProps}
+      {...restProps}
+    />
+  );
 };

package/src/components/ColorSchemeProvider/ColorSchemeProvider.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { IconAppearanceProvider } from '@vkontakte/icons';
 import type { ColorSchemeType } from '../../lib/colorScheme';
-import { TokensClassProvider } from '../../lib/tokens';
+import { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';
 import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 
 export interface ColorSchemeProviderProps {

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -3,7 +3,8 @@
 import * as React from 'react';
 import { IconAppearanceProvider } from '@vkontakte/icons';
 import { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';
-import { TokensClassProvider } from '../../lib/tokens';
+import { useAutoDetectDirection } from '../../hooks/useAutoDetectDirection';
+import { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';
 import { excludeKeysWithUndefined } from '../../lib/utils';
 import {
   ConfigProviderContext,
@@ -29,10 +30,12 @@ export const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode =
   };
 
   const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);
+  const direction = useAutoDetectDirection(mergeProps.direction);
 
   const configContext = useConfigProviderContextMemo({
     ...mergeProps,
     colorScheme,
+    direction,
   });
 
   return (

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -2,8 +2,10 @@
 
 import * as React from 'react';
 import type { ColorSchemeType } from '../../lib/colorScheme';
+import { type Direction } from '../../lib/direction';
 import { platform, type PlatformType } from '../../lib/platform';
-import { DEFAULT_TOKENS_CLASS_NAMES, type TokensClassNames } from '../../lib/tokens';
+import { DEFAULT_TOKENS_CLASS_NAMES } from '../../lib/tokens/constants';
+import { type TokensClassNames } from '../../lib/tokens/types';
 
 export interface ConfigProviderContextInterface {
   /**
@@ -72,6 +74,15 @@ export interface ConfigProviderContextInterface {
    * Строка с языковой меткой BCP 47
    */
   locale: string;
+  /**
+   * Направление контента.
+   *
+   * При использовании определенного значения, важно установить атрибут `dir` с таким же значением либо на дочерний элемент,
+   * либо на все страницу в целом.
+   *
+   * @default Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы
+   */
+  direction: Direction | undefined;
 }
 
 export const ConfigProviderContext: React.Context<ConfigProviderContextInterface> =
@@ -84,6 +95,7 @@ export const ConfigProviderContext: React.Context<ConfigProviderContextInterface
     colorScheme: undefined, // undefined обозначает что тема должна определиться автоматически
     tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,
     locale: 'ru',
+    direction: undefined,
   });
 
 export const useConfigProvider = (): ConfigProviderContextInterface =>
@@ -99,20 +111,11 @@ export function useConfigProviderContextMemo(config: ConfigProviderContextInterf
     platform,
     tokensClassNames,
     locale,
+    direction,
   } = config;
 
-  return React.useMemo<ConfigProviderContextInterface>(
-    () => ({
-      isWebView,
-      hasCustomPanelHeaderAfter,
-      customPanelHeaderAfterMinWidth,
-      colorScheme,
-      transitionMotionEnabled,
-      platform,
-      tokensClassNames,
-      locale,
-    }),
-    [
+  return React.useMemo<ConfigProviderContextInterface>(() => {
+    return {
       isWebView,
       hasCustomPanelHeaderAfter,
       customPanelHeaderAfterMinWidth,
@@ -121,6 +124,17 @@ export function useConfigProviderContextMemo(config: ConfigProviderContextInterf
       platform,
       tokensClassNames,
       locale,
-    ],
-  );
+      direction,
+    };
+  }, [
+    isWebView,
+    hasCustomPanelHeaderAfter,
+    customPanelHeaderAfterMinWidth,
+    colorScheme,
+    transitionMotionEnabled,
+    platform,
+    tokensClassNames,
+    locale,
+    direction,
+  ]);
 }

package/src/components/ContentBadge/ContentBadge.module.css

@@ -1,12 +1,10 @@
 .host {
-  isolation: isolate;
   position: relative;
+  box-sizing: border-box;
   display: inline-grid;
   grid-auto-flow: column;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  block-size: auto;
 
   /**
    * `min-width` в контексте Flexbox по умолчанию имеет значение `auto`,
@@ -15,6 +13,8 @@
    * Подробности по ссылке https://stackoverflow.com/a/66689926/2903061
    */
   min-inline-size: 0;
+  block-size: auto;
+  isolation: isolate;
 }
 
 .sizeS {
@@ -113,12 +113,12 @@
 
 /* mode="outline" */
 .modeOutline::before {
-  content: '';
   position: absolute;
-  z-index: -1;
   inset: 0;
-  border-width: 1px;
+  z-index: -1;
+  content: '';
   border-style: solid;
+  border-width: 1px;
   border-radius: inherit;
 }
 
@@ -159,6 +159,6 @@
 }
 
 .outlineOverlay::before {
-  border-width: 0;
   background-color: var(--vkui--color_overlay_primary);
+  border-width: 0;
 }

package/src/components/ContentCard/ContentCard.module.css

@@ -8,20 +8,20 @@
 }
 
 .tappable {
-  border-radius: var(--vkui--size_card_border_radius--regular);
-  text-decoration: none;
-  color: var(--vkui--color_text_primary);
-  block-size: 100%;
   display: block;
+  block-size: 100%;
+  color: var(--vkui--color_text_primary);
+  text-decoration: none;
+  border-radius: var(--vkui--size_card_border_radius--regular);
 }
 
 .img {
-  object-fit: cover;
   display: block;
+  object-fit: cover;
   border-start-start-radius: var(--vkui--size_card_border_radius--regular);
   border-start-end-radius: var(--vkui--size_card_border_radius--regular);
-  border-end-end-radius: 0;
   border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .text:not(:last-child) {

package/src/components/ContentCard/ContentCard.tsx

@@ -41,6 +41,11 @@ export interface ContentCardProps
    */
   maxHeight?: number;
   mode?: CardProps['mode'];
+  /**
+   * Пользовательское значения стиля `object-fit` для картинки
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)
+   */
+  imageObjectFit?: React.CSSProperties['objectFit'];
 }
 
 /**
@@ -63,7 +68,7 @@ export const ContentCard = ({
   src,
   srcSet,
   alt = '',
-  width,
+  width = '100%',
   height,
   crossOrigin,
   decoding,
@@ -72,6 +77,7 @@ export const ContentCard = ({
   sizes,
   useMap,
   fetchPriority,
+  imageObjectFit,
   hasHover = false,
   hasActive = false,
   Component = 'li',
@@ -106,8 +112,8 @@ export const ContentCard = ({
             useMap={useMap}
             {...getFetchPriorityProp(fetchPriority)}
             height={height}
-            style={{ maxHeight }}
-            width="100%"
+            width={width}
+            style={{ maxHeight, objectFit: imageObjectFit }}
           />
         )}
         <div className={styles.body}>