@vkontakte/vkui 4.27.2 → 4.29.0

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -1,21 +1,23 @@
 import * as React from "react";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { classNames } from "../../lib/classNames";
-import ChipsInput, {
+import {
+  ChipsInput,
   ChipsInputOption,
   ChipsInputProps,
   ChipsInputValue,
   RenderChip,
   chipsInputDefaultProps,
 } from "../ChipsInput/ChipsInput";
-import CustomSelectOption, {
+import {
+  CustomSelectOption,
   CustomSelectOptionProps,
 } from "../CustomSelectOption/CustomSelectOption";
 import { useChipsSelect } from "./useChipsSelect";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { noop } from "../../lib/utils";
 import { useDOM } from "../../lib/dom";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { prefixClass } from "../../lib/prefixClass";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
@@ -68,7 +70,7 @@ export interface ChipsSelectProps<Option extends ChipsInputOption>
     option: Option
   ) => void;
   /**
-   * Закрытие выпадающиего списка после выбора элемента
+   * Закрытие выпадающего списка после выбора элемента
    */
   closeAfterSelect?: boolean;
 }
@@ -94,7 +96,7 @@ const chipsSelectDefaultProps: ChipsSelectProps<any> = {
   },
 };
 
-const ChipsSelect = <Option extends ChipsInputOption>(
+const ChipsSelectComponent = <Option extends ChipsInputOption>(
   props: ChipsSelectProps<Option>
 ) => {
   const propsWithDefault = { ...chipsSelectDefaultProps, ...props };
@@ -367,10 +369,10 @@ const ChipsSelect = <Option extends ChipsInputOption>(
         onFocus={handleFocus}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
-        vkuiClass={classNames({
-          ["ChipsSelect__open"]: opened,
-          ["ChipsSelect__open--popupDirectionTop"]: isPopperDirectionTop,
-        })}
+        vkuiClass={classNames(
+          opened && "ChipsSelect__open",
+          isPopperDirectionTop && "ChipsSelect__open--popupDirectionTop"
+        )}
         getRef={getRef}
         disabled={disabled}
         onInputChange={handleInputChange}
@@ -396,9 +398,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(
             </CustomSelectOption>
           )}
           {!filteredOptions?.length && !showCreatable && emptyText ? (
-            <Caption level="1" weight="regular" vkuiClass="ChipsSelect__empty">
-              {emptyText}
-            </Caption>
+            <Caption vkuiClass="ChipsSelect__empty">{emptyText}</Caption>
           ) : (
             filteredOptions.map((option: Option, index: number) => {
               const label = getOptionLabel!(option);
@@ -449,5 +449,6 @@ const ChipsSelect = <Option extends ChipsInputOption>(
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(ChipsSelect, { sizeY: true });
+export const ChipsSelect = withAdaptivity(ChipsSelectComponent, {
+  sizeY: true,
+});

package/src/components/ClickPopper/ClickPopper.tsx

@@ -20,7 +20,7 @@ export interface ClickPopperProps extends PopperCommonProps {
    */
   onShownChange?: (shown: boolean) => void;
   /**
-   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элемнету компонента
+   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
    */
   children?: React.ReactElement;
 }

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -19,6 +19,7 @@ import {
   AppearanceProvider,
   generateVKUITokensClassName,
 } from "../AppearanceProvider/AppearanceProvider";
+import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
 import { platform as resolvePlatform } from "../../lib/platform";
 
 export interface ConfigProviderProps
@@ -28,6 +29,10 @@ export interface ConfigProviderProps
    * Цветовая схема приложения
    */
   scheme?: AppearanceScheme;
+  /**
+    Локаль ([список](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry))
+   */
+  locale?: string;
 }
 
 const warn = warnOnce("ConfigProvider");
@@ -72,6 +77,7 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
   hasNewTokens = false,
   appearance,
   scheme,
+  locale = "ru",
 }) => {
   const normalizedScheme = normalizeScheme({
     scheme,
@@ -125,9 +131,11 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
 
   return (
     <ConfigProviderContext.Provider value={configContext}>
-      <AppearanceProvider appearance={configContext.appearance}>
-        {children}
-      </AppearanceProvider>
+      <LocaleProviderContext.Provider value={locale}>
+        <AppearanceProvider appearance={configContext.appearance}>
+          {children}
+        </AppearanceProvider>
+      </LocaleProviderContext.Provider>
     </ConfigProviderContext.Provider>
   );
 };

package/src/components/ContentCard/ContentCard.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Card, CardProps } from "../Card/Card";
-import Caption from "../Typography/Caption/Caption";
-import Title from "../Typography/Title/Title";
+import { Caption } from "../Typography/Caption/Caption";
+import { Title } from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
@@ -88,6 +88,7 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
     <Card
       mode={mode}
       getRootRef={getRootRef}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("ContentCard", platform), {
         "ContentCard--disabled": restProps.disabled,
       })}
@@ -121,12 +122,7 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
         )}
         <div vkuiClass="ContentCard__body">
           {hasReactNode(subtitle) && (
-            <Caption
-              caps
-              vkuiClass="ContentCard__text"
-              weight="semibold"
-              level="3"
-            >
+            <Caption caps vkuiClass="ContentCard__text" weight="1" level="3">
               {subtitle}
             </Caption>
           )}
@@ -141,9 +137,7 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
             </Text>
           )}
           {hasReactNode(caption) && (
-            <Caption vkuiClass="ContentCard__text" weight="regular" level="1">
-              {caption}
-            </Caption>
+            <Caption vkuiClass="ContentCard__text">{caption}</Caption>
           )}
         </div>
       </Tappable>

package/src/components/Counter/Counter.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Text from "../Typography/Text/Text";
 import { VKCOM } from "../../lib/platform";
 import { hasReactNode } from "../../lib/utils";
@@ -29,7 +29,7 @@ const CounterTypography: React.FC<CounterTypographyProps> = ({
   return size === "s" ? (
     <Caption
       level="2"
-      weight={platform === VKCOM ? "medium" : "regular"}
+      weight={platform === VKCOM ? "1" : undefined}
       {...restProps}
     />
   ) : (

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -5,7 +5,7 @@ import "./CustomScrollView.css";
 
 interface Props extends DOMProps {
   windowResize?: boolean;
-  boxRef: React.Ref<HTMLDivElement>;
+  boxRef?: React.Ref<HTMLDivElement>;
   className?: HTMLDivElement["className"];
 }
 

package/src/components/CustomSelect/CustomSelect.css

@@ -20,20 +20,5 @@
 
 .CustomSelect__empty {
   text-align: center;
-  color: var(--text_secondary);
-}
-
-.CustomSelect__open.Select--mimicry:focus .FormField__border {
-  border-color: var(--field_border);
-}
-
-.CustomSelect__open:not(.CustomSelect__open--popupDirectionTop)
-  .FormField__border {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.CustomSelect__open.CustomSelect__open--popupDirectionTop .FormField__border {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }

package/src/components/CustomSelect/CustomSelect.tsx

@@ -5,15 +5,16 @@ import { classNames } from "../../lib/classNames";
 import { NativeSelectProps } from "../NativeSelect/NativeSelect";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { withPlatform } from "../../hoc/withPlatform";
-import CustomSelectOption, {
+import {
+  CustomSelectOption,
   CustomSelectOptionProps,
 } from "../CustomSelectOption/CustomSelectOption";
 import { getClassName } from "../../helpers/getClassName";
 import { FormFieldProps } from "../FormField/FormField";
 import { HasPlatform } from "../../types";
-import Input from "../Input/Input";
+import { Input } from "../Input/Input";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { warnOnce } from "../../lib/warnOnce";
 import { defaultFilterFn } from "../../lib/select";
 import { is } from "../../lib/is";
@@ -55,13 +56,19 @@ const warn = warnOnce("CustomSelect");
 const checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {
   if (new Set(options.map((item) => typeof item.value)).size > 1) {
     warn(
-      "Some values of your options have different types. CustomSelect onChange always returns a string type."
+      "Some values of your options have different types. CustomSelect onChange always returns a string type.",
+      "error"
     );
   }
 };
 
 type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>["value"];
 
+export enum SelectType {
+  Default = "default",
+  Plain = "plain",
+}
+
 export interface CustomSelectOptionInterface {
   value: SelectValue;
   label: string;
@@ -135,11 +142,16 @@ export interface CustomSelectProps
   fetching?: boolean;
   onClose?: VoidFunction;
   onOpen?: VoidFunction;
+  icon?: React.ReactNode;
+  dropdownOffsetDistance?: number;
+  fixDropdownWidth?: boolean;
+  forceDropdownPortal?: boolean;
+  selectType?: SelectType;
 }
 
 type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
 
-class CustomSelect extends React.Component<
+class CustomSelectComponent extends React.Component<
   CustomSelectProps,
   CustomSelectState
 > {
@@ -151,6 +163,10 @@ class CustomSelect extends React.Component<
     options: [],
     emptyText: "Ничего не найдено",
     filterFn: defaultFilterFn,
+    icon: <DropdownIcon />,
+    dropdownOffsetDistance: 0,
+    fixDropdownWidth: true,
+    selectType: SelectType.Default,
   };
 
   public constructor(props: CustomSelectProps) {
@@ -345,9 +361,14 @@ class CustomSelect extends React.Component<
 
     scrollTo && this.scrollToElement(index);
 
-    this.setState(() => ({
-      focusedOptionIndex: index,
-    }));
+    this.setState((prevState) =>
+      // Это оптимизация, прежде всего, под `onMouseOver`
+      prevState.focusedOptionIndex !== index
+        ? {
+            focusedOptionIndex: index,
+          }
+        : null
+    );
   };
 
   focusOption = (type: "next" | "prev") => {
@@ -586,7 +607,15 @@ class CustomSelect extends React.Component<
           disabled: option.disabled,
           onClick: this.handleOptionClick,
           onMouseDown: this.handleOptionDown,
-          onMouseEnter: this.handleOptionHover,
+          // Используем `onMouseOver` вместо `onMouseEnter`.
+          // При параметре `searchable`, обновляется "ребёнок", из-за чего `onMouseEnter` не срабатывает в следующих кейсах:
+          //  1. До загрузки выпадающего списка, курсор мышки находится над произвольным элементом этого списка.
+          //     > Лечение: только увод курсора мыши и возвращении его обратно вызывает событие `onMouseEnter` на этот элемент.
+          //  2. Если это тач-устройство.
+          //     > Лечение: нужно нажать на какой-нибудь произвольный элемент списка, после чего `onMouseEnter` будет работать на соседние элементы,
+          //     но не на тот, на который нажали в первый раз.
+          // Более подробно по ссылке https://github.com/facebook/react/issues/13956#issuecomment-1082055744
+          onMouseOver: this.handleOptionHover,
         })}
       </React.Fragment>
     );
@@ -631,6 +660,11 @@ class CustomSelect extends React.Component<
       onOpen,
       onClose,
       fetching,
+      icon,
+      dropdownOffsetDistance,
+      fixDropdownWidth,
+      forceDropdownPortal,
+      selectType,
       ...restProps
     } = this.props;
     const selected = this.getSelectedItem();
@@ -640,7 +674,7 @@ class CustomSelect extends React.Component<
       stateOptions !== undefined && stateOptions.length > 0 ? (
         stateOptions.map(this.renderOption)
       ) : (
-        <Caption level="1" weight="regular" vkuiClass="CustomSelect__empty">
+        <Caption vkuiClass="CustomSelect__empty">
           {this.props.emptyText}
         </Caption>
       );
@@ -668,18 +702,20 @@ class CustomSelect extends React.Component<
             {...restProps}
             autoFocus
             onBlur={this.onBlur}
-            vkuiClass={classNames({
-              CustomSelect__open: opened,
-              "CustomSelect__open--popupDirectionTop": isPopperDirectionTop,
-            })}
+            vkuiClass={classNames(
+              opened && "CustomSelect__open",
+              isPopperDirectionTop && "CustomSelect__open--popupDirectionTop",
+              (dropdownOffsetDistance as number) > 0 &&
+                "CustomSelect__open--not-adjacent"
+            )}
             value={this.state.inputValue}
             onKeyDown={this.onInputKeyDown}
             onChange={this.onInputChange}
-            // TODO Ожидается, что клик поймает нативный select, но его перехвает Input. К сожалению, это приводит конфликтам типизации.
+            // TODO Ожидается, что клик поймает нативный select, но его перехватывает Input. К сожалению, это приводит к конфликтам типизации.
             // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.
             // @ts-ignore
             onClick={onClick}
-            after={<DropdownIcon />}
+            after={icon}
             placeholder={restProps.placeholder}
           />
         ) : (
@@ -691,10 +727,14 @@ class CustomSelect extends React.Component<
             onKeyUp={this.handleKeyUp}
             onFocus={this.onFocus}
             onBlur={this.onBlur}
-            vkuiClass={classNames({
-              CustomSelect__open: opened,
-              "CustomSelect__open--popupDirectionTop": isPopperDirectionTop,
-            })}
+            vkuiClass={classNames(
+              opened && "CustomSelect__open",
+              isPopperDirectionTop && "CustomSelect__open--popupDirectionTop",
+              (dropdownOffsetDistance as number) > 0 &&
+                "CustomSelect__open--not-adjacent"
+            )}
+            after={icon}
+            selectType={selectType}
           >
             {label}
           </SelectMimicry>
@@ -722,6 +762,9 @@ class CustomSelect extends React.Component<
             onPlacementChange={this.onPlacementChange}
             onMouseLeave={this.resetFocusedOption}
             fetching={fetching}
+            offsetDistance={dropdownOffsetDistance}
+            sameWidth={fixDropdownWidth}
+            forcePortal={forceDropdownPortal}
           >
             {resolvedContent}
           </CustomSelectDropdown>
@@ -731,9 +774,8 @@ class CustomSelect extends React.Component<
   }
 }
 
-// eslint-disable-next-line import/no-default-export
-export default withPlatform(
-  withAdaptivity(CustomSelect, {
+export const CustomSelect = withPlatform(
+  withAdaptivity(CustomSelectComponent, {
     sizeY: true,
   })
 );

package/src/components/CustomSelectDropdown/CustomSelectDropdown.css

@@ -1,20 +1,37 @@
 .CustomSelectDropdown__options {
-  width: 100%;
   overflow: hidden;
-  background-color: var(--modal_card_background);
+  background-color: var(
+    --modal_card_background,
+    var(--vkui--color_background_content)
+  );
   box-sizing: border-box;
-  border: solid 1px var(--field_border);
+  border: var(--thin-border) solid
+    var(--field_border, var(--vkui--color_separator_primary_alpha));
   border-top: 0;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.03);
+  box-shadow: var(--vkui--elevation1);
   border-radius: 0 0 8px 8px;
 }
 
+.CustomSelectDropdown__options--same-width {
+  width: 100%;
+}
+
+:not(.CustomSelectDropdown__options--same-width) .CustomScrollView__box {
+  padding-right: 8px;
+}
+
 .CustomSelectDropdown__options--popupDirectionTop {
   bottom: 100%;
   border-radius: 8px 8px 0 0;
   border-top: unset;
   border-bottom: 0;
-  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.03);
+  box-shadow: var(--vkui--elevation1_invert_y);
+}
+
+.CustomSelectDropdown__options--not-adjacent {
+  border-radius: 8px;
+  border: var(--thin-border) solid
+    var(--field_border, var(--vkui--color_separator_primary_alpha));
 }
 
 .CustomSelectDropdown__CustomScrollView {

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -11,8 +11,11 @@ export interface CustomSelectDropdownProps
     HasRef<HTMLDivElement> {
   targetRef: React.RefObject<HTMLElement>;
   placement?: Placement;
-  scrollBoxRef: React.Ref<HTMLDivElement>;
+  scrollBoxRef?: React.Ref<HTMLDivElement>;
   fetching?: boolean;
+  offsetDistance?: number;
+  sameWidth?: boolean;
+  forcePortal?: boolean;
   onPlacementChange?: (placement?: Placement) => void;
 }
 
@@ -25,6 +28,9 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
   placement,
   fetching,
   onPlacementChange: parentOnPlacementChange,
+  offsetDistance = 0,
+  sameWidth = true,
+  forcePortal = true,
   ...restProps
 }) => {
   const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));
@@ -40,13 +46,17 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
   return (
     <Popper
       targetRef={targetRef}
-      offsetDistance={0}
-      sameWidth
+      offsetDistance={offsetDistance}
+      sameWidth={sameWidth}
       onPlacementChange={onPlacementChange}
       placement={placement}
-      vkuiClass={classNames("CustomSelectDropdown__options", {
-        "CustomSelectDropdown__options--popupDirectionTop": isTop,
-      })}
+      vkuiClass={classNames(
+        "CustomSelectDropdown__options",
+        isTop && "CustomSelectDropdown__options--popupDirectionTop",
+        offsetDistance > 0 && "CustomSelectDropdown__options--not-adjacent",
+        sameWidth && "CustomSelectDropdown__options--same-width"
+      )}
+      forcePortal={forcePortal}
       {...restProps}
     >
       <CustomScrollView

package/src/components/CustomSelectOption/CustomSelectOption.css

@@ -8,7 +8,16 @@
   white-space: nowrap;
   user-select: none;
   cursor: pointer;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
+}
+
+.CustomSelectOption--hierarchy {
+  --custom-select-option-hierarchy-level: 0;
+
+  padding-left: calc(
+    var(--custom-select-option-hierarchy-level) *
+      var(--vkui--size_option_hierarchy--regular)
+  );
 }
 
 .CustomSelectOption--sizeY-regular {
@@ -17,11 +26,14 @@
 
 .CustomSelectOption--disabled {
   cursor: default;
-  opacity: 0.4;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .CustomSelectOption--hover {
-  background-color: var(--button_muted_background);
+  background-color: var(
+    --button_muted_background,
+    var(--vkui--color_transparent--hover)
+  );
 }
 
 .CustomSelectOption__before {
@@ -49,13 +61,13 @@
 }
 
 .CustomSelectOption__description {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 .CustomSelectOption__selectedIcon {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .CustomSelectOption__selectedIcon:not(:first-child) {