@vkontakte/vkui 7.1.3 → 7.2.1

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}>

package/src/components/Counter/Counter.module.css

@@ -1,12 +1,12 @@
 .host {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-inline: 5px;
+  color: var(--vkui_internal--counter_foreground);
   text-align: center;
-  box-sizing: border-box;
   background: var(--vkui_internal--counter_background);
-  color: var(--vkui_internal--counter_foreground);
 
   --vkui_internal--counter_background: transparent;
   --vkui_internal--counter_foreground: var(--vkui--color_text_contrast);
@@ -93,14 +93,14 @@
 /*----------------------------------*/
 
 .sizeM {
-  block-size: 24px;
   min-inline-size: 24px;
+  block-size: 24px;
   border-radius: 12px;
 }
 
 .sizeS {
-  block-size: 18px;
   min-inline-size: 18px;
+  block-size: 18px;
   border-radius: 9px;
 }
 

package/src/components/CustomScrollView/CustomScrollView.module.css

@@ -1,8 +1,8 @@
 .host {
   inline-size: 100%;
   block-size: 100%;
-  overflow-y: auto;
   overflow-x: hidden;
+  overflow-y: auto;
 }
 
 @supports (scrollbar-color: auto) {
@@ -38,9 +38,9 @@
   .host::-webkit-scrollbar-thumb,
   .host::-webkit-scrollbar-thumb {
     background-color: var(--vkui--color_icon_tertiary_alpha);
+    background-clip: padding-box, content-box;
     border: 3px solid transparent;
     border-radius: 6px;
-    background-clip: padding-box, content-box;
   }
 
   .host::-webkit-scrollbar-thumb:hover,

package/src/components/CustomSelect/CustomSelect.module.css

@@ -1,7 +1,7 @@
 .host {
-  inline-size: 100%;
   position: relative;
   display: block;
+  inline-size: 100%;
   cursor: pointer;
 }
 
@@ -22,8 +22,8 @@
 .empty {
   padding-block: 12px;
   padding-inline: 0;
-  text-align: center;
   color: var(--vkui--color_text_secondary);
+  text-align: center;
 }
 
 .fetching {