@vkontakte/vkui 4.28.1 → 4.30.0

package/src/components/CalendarRange/CalendarRange.tsx

@@ -8,7 +8,7 @@ import {
   startOfDay,
   endOfDay,
   isWithinInterval,
-} from "date-fns";
+} from "../../lib/date";
 import {
   CalendarHeader,
   CalendarHeaderProps,
@@ -51,10 +51,7 @@ const getIsDaySelected = (day: Date, value?: Array<Date | null>) => {
   }
 
   return Boolean(
-    isWithinInterval(day, {
-      start: startOfDay(value[0]),
-      end: endOfDay(value[1]),
-    })
+    isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1]))
   );
 };
 

package/src/components/CalendarRange/Readme.md

@@ -1,7 +1,7 @@
 Компонент выбора диапазона дат.
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-import { addDays, format } from "date-fns";
+import { addDays, format } from "../../lib/date";
 
 const Example = () => {
   const [value, setValue] = useState([new Date(), addDays(new Date(), 10)]);
@@ -14,7 +14,7 @@ const Example = () => {
     <FormLayout>
       <FormLayoutGroup mode="vertical">
         <FormItem top="Выбранная дата">
-          {format(value[0], "yyyy-MM-dd")} - {format(value[1], "yyyy-MM-dd")}
+          {format(value[0], "YYYY-MM-DD")} - {format(value[1], "YYYY-MM-DD")}
         </FormItem>
         <FormItem top="Запрет выбора прошлых дат">
           <Checkbox

package/src/components/CalendarTime/CalendarTime.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { setHours, setMinutes } from "date-fns";
-import CustomSelect from "../CustomSelect/CustomSelect";
-import Button from "../Button/Button";
+import { setHours, setMinutes } from "../../lib/date";
+import { CustomSelect } from "../CustomSelect/CustomSelect";
+import { Button } from "../Button/Button";
 import { SizeType } from "../../hoc/withAdaptivity";
 import "./CalendarTime.css";
 

package/src/components/Card/Card.css

@@ -63,7 +63,8 @@
 }
 
 .CardScroll--l .Card {
-  width: 100%;
+  width: calc(100% - var(--vkui--size_base_padding_horizontal--regular) * 2);
+  margin-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 /**

package/src/components/CardScroll/CardScroll.tsx

@@ -3,7 +3,8 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
-import HorizontalScroll, {
+import {
+  HorizontalScroll,
   HorizontalScrollProps,
 } from "../HorizontalScroll/HorizontalScroll";
 import { useDOM } from "../../lib/dom";
@@ -93,6 +94,7 @@ export const CardScroll: React.FC<CardScrollProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("CardScroll", platform),
         `CardScroll--sizeX-${sizeX}`,

package/src/components/Cell/Cell.tsx

@@ -36,7 +36,7 @@ export interface CellProps
    */
   selectable?: boolean;
   /**
-   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения
+   * В режиме selectable реагирует на входящие значения пропса checked, как зависящий напрямую от входящего значения
    */
   checked?: boolean;
   /**
@@ -89,11 +89,11 @@ export const Cell: React.FC<CellProps> = ({
     if (process.env.NODE_ENV === "development") {
       deprecatedSelectable &&
         warn(
-          'Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode="selectable".'
+          'Свойство selectable устарело и будет удалено в 5.0.0. Используйте mode="selectable".'
         );
       deprecatedRemovable &&
         warn(
-          'Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode="removable".'
+          'Свойство removable устарело и будет удалено в 5.0.0. Используйте mode="removable".'
         );
     }
   }
@@ -145,6 +145,7 @@ export const Cell: React.FC<CellProps> = ({
     (draggable && !selectable) || removable || disabled;
   const hasActive = !simpleCellDisabled && !dragging;
 
+  // eslint-disable-next-line vkui/no-object-expression-in-arguments
   const cellClasses = classNames(getClassName("Cell", platform), {
     "Cell--dragging": dragging,
     "Cell--removable": removable,

package/src/components/CellButton/CellButton.tsx

@@ -21,6 +21,7 @@ const CellButton: React.FC<CellButtonProps> = ({
     <SimpleCell
       stopPropagation={true}
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("CellButton", platform),
         `CellButton--${mode}`,

package/src/components/Chip/Chip.tsx

@@ -39,6 +39,7 @@ export const Chip: React.FC<ChipProps> = ({
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("Chip", { "Chip--removable": removable })}
       role="option"
       aria-label={title}

package/src/components/ChipsInput/ChipsInput.css

@@ -35,7 +35,7 @@
   /* Визуальная компенсация - центрируем строчные буквы */
   font-size: 15px;
   line-height: 26px;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   background: transparent;
   border: none;
   box-shadow: none;
@@ -52,15 +52,15 @@
 }
 
 .ChipsInput__el:disabled {
-  opacity: 0.4;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .ChipsInput__el::placeholder {
-  color: var(--field_text_placeholder);
+  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
 }
 
 .ChipsInput__el:disabled::placeholder {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 /**

package/src/components/ChipsInput/ChipsInput.tsx

@@ -74,7 +74,7 @@ export const chipsInputDefaultProps: ChipsInputProps<any> = {
   },
 };
 
-const ChipsInput = <Option extends ChipsInputOption>(
+export const ChipsInput = <Option extends ChipsInputOption>(
   props: ChipsInputProps<Option>
 ) => {
   const propsWithDefault = { ...chipsInputDefaultProps, ...props };
@@ -96,6 +96,7 @@ const ChipsInput = <Option extends ChipsInputOption>(
     getOptionLabel,
     getNewOptionData,
     renderChip,
+    before,
     after,
     inputAriaLabel,
     ...restProps
@@ -177,13 +178,16 @@ const ChipsInput = <Option extends ChipsInputOption>(
   return (
     <FormField
       getRootRef={getRootRef}
-      vkuiClass={classNames("ChipsInput", `ChipsInput--sizeY-${sizeY}`, {
-        "ChipsInput--focused": focused,
-        "ChipsInput--withChips": !!selectedOptions.length,
-      })}
+      vkuiClass={classNames(
+        "ChipsInput",
+        `ChipsInput--sizeY-${sizeY}`,
+        focused && "ChipsInput--focused",
+        !!selectedOptions.length && "ChipsInput--withChips"
+      )}
       className={className}
       style={style}
       disabled={restProps.disabled}
+      before={before}
       after={after}
       onClick={handleClick}
       role="application"
@@ -233,6 +237,3 @@ const ChipsInput = <Option extends ChipsInputOption>(
     </FormField>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default ChipsInput;

package/src/components/ChipsSelect/ChipsSelect.css

@@ -8,7 +8,7 @@
 
 .ChipsSelect__empty {
   text-align: center;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 .ChipsSelect__open:not(.ChipsSelect__open--popupDirectionTop)

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -1,14 +1,16 @@
 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";
@@ -68,7 +70,7 @@ export interface ChipsSelectProps<Option extends ChipsInputOption>
     option: Option
   ) => void;
   /**
-   * Закрытие выпадающиего списка после выбора элемента
+   * Закрытие выпадающего списка после выбора элемента
    */
   closeAfterSelect?: boolean;
 }
@@ -367,10 +369,10 @@ const ChipsSelectComponent = <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}

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

@@ -96,7 +96,7 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
       target?.hasAttribute("scheme")
     ) {
       warn(
-        '<body scheme> was set before VKUI mount - did you forget scheme="inherit"?'
+        '<body scheme> был установлен перед монтированием VKUI - вы не забыли scheme="inherit"?'
       );
     }
     target?.setAttribute("scheme", normalizedScheme);

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 { 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,
       })}

package/src/components/CustomSelect/CustomSelect.css

@@ -20,5 +20,5 @@
 
 .CustomSelect__empty {
   text-align: center;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }

package/src/components/CustomSelect/CustomSelect.tsx

@@ -5,13 +5,14 @@ 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 { warnOnce } from "../../lib/warnOnce";
@@ -55,7 +56,8 @@ 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."
+      "Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.",
+      "error"
     );
   }
 };
@@ -149,7 +151,7 @@ export interface CustomSelectProps
 
 type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
 
-class CustomSelect extends React.Component<
+class CustomSelectComponent extends React.Component<
   CustomSelectProps,
   CustomSelectState
 > {
@@ -461,8 +463,8 @@ class CustomSelect extends React.Component<
       if (options) {
         if (process.env.NODE_ENV === "development") {
           warn(
-            "This filtration method is deprecated. Return value of onInputChange will" +
-              " be ignored in v5.0.0. For custom filtration please update props.options by yourself or use filterFn property"
+            "Этот метод фильтрации устарел. Возвращаемое значение onInputChange будет " +
+              "проигнорировано в v5.0.0. Для фильтрации обновляйте props.options самостоятельно или используйте свойство filterFn."
           );
         }
         this.setState({
@@ -635,6 +637,7 @@ class CustomSelect extends React.Component<
   render() {
     const { opened, nativeSelectValue, options: stateOptions } = this.state;
     const {
+      before,
       searchable,
       name,
       className,
@@ -662,6 +665,7 @@ class CustomSelect extends React.Component<
       dropdownOffsetDistance,
       fixDropdownWidth,
       forceDropdownPortal,
+      selectType,
       ...restProps
     } = this.props;
     const selected = this.getSelectedItem();
@@ -699,19 +703,20 @@ class CustomSelect extends React.Component<
             {...restProps}
             autoFocus
             onBlur={this.onBlur}
-            vkuiClass={classNames({
-              CustomSelect__open: opened,
-              "CustomSelect__open--popupDirectionTop": isPopperDirectionTop,
-              "CustomSelect__open--not-adjacent":
-                (dropdownOffsetDistance as number) > 0,
-            })}
+            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}
+            before={before}
             after={icon}
             placeholder={restProps.placeholder}
           />
@@ -724,13 +729,15 @@ class CustomSelect extends React.Component<
             onKeyUp={this.handleKeyUp}
             onFocus={this.onFocus}
             onBlur={this.onBlur}
-            vkuiClass={classNames({
-              CustomSelect__open: opened,
-              "CustomSelect__open--popupDirectionTop": isPopperDirectionTop,
-              "CustomSelect__open--not-adjacent":
-                (dropdownOffsetDistance as number) > 0,
-            })}
+            vkuiClass={classNames(
+              opened && "CustomSelect__open",
+              isPopperDirectionTop && "CustomSelect__open--popupDirectionTop",
+              (dropdownOffsetDistance as number) > 0 &&
+                "CustomSelect__open--not-adjacent"
+            )}
+            before={before}
             after={icon}
+            selectType={selectType}
           >
             {label}
           </SelectMimicry>
@@ -770,9 +777,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,10 +1,14 @@
 .CustomSelectDropdown__options {
   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;
 }
 
@@ -21,12 +25,13 @@
   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: solid 1px var(--field_border);
+  border: var(--thin-border) solid
+    var(--field_border, var(--vkui--color_separator_primary_alpha));
 }
 
 .CustomSelectDropdown__CustomScrollView {

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -50,11 +50,12 @@ export const CustomSelectDropdown: React.FC<CustomSelectDropdownProps> = ({
       sameWidth={sameWidth}
       onPlacementChange={onPlacementChange}
       placement={placement}
-      vkuiClass={classNames("CustomSelectDropdown__options", {
-        "CustomSelectDropdown__options--popupDirectionTop": isTop,
-        "CustomSelectDropdown__options--not-adjacent": offsetDistance > 0,
-        "CustomSelectDropdown__options--same-width": sameWidth,
-      })}
+      vkuiClass={classNames(
+        "CustomSelectDropdown__options",
+        isTop && "CustomSelectDropdown__options--popupDirectionTop",
+        offsetDistance > 0 && "CustomSelectDropdown__options--not-adjacent",
+        sameWidth && "CustomSelectDropdown__options--same-width"
+      )}
       forcePortal={forcePortal}
       {...restProps}
     >

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) {

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Icon16Done } from "@vkontakte/icons";
 import { classNames } from "../../lib/classNames";
 import { hasReactNode } from "../../lib/utils";
-import Text from "../Typography/Text/Text";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { Caption } from "../Typography/Caption/Caption";
 import { HasRootRef } from "../../types";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
@@ -12,20 +12,51 @@ import "./CustomSelectOption.css";
 export interface CustomSelectOptionProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {
+  /**
+   * Вставляет основной контент.
+   */
   option?: any;
-  selected?: boolean;
-  focused?: boolean;
-  hovered?: boolean;
+  /**
+   * Добавляет описание под основным блоком.
+   */
+  description?: React.ReactNode;
+  /**
+   * Вставляет элемент в начало блока перед основным контентом.
+   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.
+   */
   before?: React.ReactNode;
+  /**
+   * Вставляет элемент в конец блока после основного контента.
+   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.
+   */
   after?: React.ReactNode;
-  description?: React.ReactNode;
+  /**
+   * Позволяет создавать вложенность.
+   */
+  hierarchy?: number;
+  /**
+   * Включает состояние выбранного элемента списка.
+   */
+  selected?: boolean;
+  /**
+   * Включает состояние наведения.
+   */
+  hovered?: boolean;
+  /**
+   * Включает состояние фокуса.
+   */
+  focused?: boolean;
+  /**
+   * Блокирует весь блок.
+   */
   disabled?: boolean;
 }
 
 const warn = warnOnce("CustomSelectOption");
 
-const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
+export const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   children,
+  hierarchy = 0,
   hovered,
   selected,
   before,
@@ -33,20 +64,30 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
   option,
   description,
   disabled,
+  style: styleProp,
   ...restProps
 }: CustomSelectOptionProps) => {
   const title = typeof children === "string" ? children : undefined;
   const { sizeY } = useAdaptivity();
+  const style = React.useMemo(
+    () =>
+      hierarchy > 0
+        ? {
+            "--custom-select-option-hierarchy-level": hierarchy,
+            ...styleProp,
+          }
+        : styleProp,
+    [hierarchy, styleProp]
+  );
 
   if (!!option && process.env.NODE_ENV === "development") {
     warn("Свойство option было добавлено по ошибке и будет удалено в 5.0.0.");
   }
 
   return (
-    <Text
+    <Paragraph
       {...restProps}
       Component="div"
-      weight="regular"
       role="option"
       title={title}
       aria-disabled={disabled}
@@ -54,12 +95,12 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
       vkuiClass={classNames(
         "CustomSelectOption",
         `CustomSelectOption--sizeY-${sizeY}`,
-        {
-          "CustomSelectOption--hover": hovered && !disabled,
-          "CustomSelectOption--selected": selected,
-          "CustomSelectOption--disabled": disabled,
-        }
+        hovered && !disabled && "CustomSelectOption--hover",
+        selected && "CustomSelectOption--selected", // Note: пустой класс
+        disabled && "CustomSelectOption--disabled",
+        hierarchy > 0 && "CustomSelectOption--hierarchy"
       )}
+      style={style}
     >
       {hasReactNode(before) && (
         <div vkuiClass="CustomSelectOption__before">{before}</div>
@@ -80,9 +121,6 @@ const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({
           <Icon16Done vkuiClass="CustomSelectOption__selectedIcon" />
         )}
       </div>
-    </Text>
+    </Paragraph>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default CustomSelectOption;