@vkontakte/vkui 4.28.1 → 4.29.0

package/src/components/AppRoot/AppRoot.tsx

@@ -72,7 +72,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
 
     if (process.env.NODE_ENV === "development") {
       if (scroll !== "global" && mode !== "embedded") {
-        warn("Scroll modes only supported in embedded mode");
+        warn("Scroll modes only supported in embedded mode", "error");
       }
       if (_mode && _embedded) {
         warn(`mode="${mode}" overrides embedded`);
@@ -189,6 +189,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     ) : (
       <div
         ref={rootRef}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames("AppRoot", {
           "AppRoot--no-mouse": !hasMouse,
         })}

package/src/components/Avatar/Avatar.tsx

@@ -96,6 +96,7 @@ const Avatar: React.FC<AvatarProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Avatar", platform),
         `Avatar--type-${mode}`,
@@ -135,6 +136,7 @@ const Avatar: React.FC<AvatarProps> = ({
       {overlayIcon && (
         <Tappable
           Component="button"
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("Avatar__overlay", {
             "Avatar__overlay--visible": overlayAction === "always",
             "Avatar__overlay--light": overlayMode === "light",
@@ -150,6 +152,7 @@ const Avatar: React.FC<AvatarProps> = ({
       )}
       {badge && (
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("Avatar__badge", {
             "Avatar__badge--large": size >= 96,
             "Avatar__badge--shadow":

package/src/components/Banner/Banner.tsx

@@ -14,9 +14,9 @@ import {
 import Tappable from "../Tappable/Tappable";
 import IconButton from "../IconButton/IconButton";
 import Headline from "../Typography/Headline/Headline";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import Text from "../Typography/Text/Text";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import "./Banner.css";
 
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -127,6 +127,7 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
   return (
     <section
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Banner", platform),
         `Banner--md-${mode}`,

package/src/components/Button/Button.css

@@ -516,11 +516,11 @@
  *
  * FIXME Следует поправить компонент на уровне уровне дизайн-системы
  *  Сейчас нет возможности использовать `ButtonGroup`, т.к. эти стили конфликтуют с `ButtonGroup.css`:
- *  1. Есть привзяка к компоненту `.Button--lvl-tertiary`. Главная проблема, т.к. отступы в `ButtonGroup.css` не зависят от типа кнопки.
+ *  1. Есть привязка к компоненту `.Button--lvl-tertiary`. Главная проблема, т.к. отступы в `ButtonGroup.css` не зависят от типа кнопки.
  *  2. `margin-top` следует выставить обёртке `.Banner__actions`. Нужно иметь ввиду, что значение отступа меняются в зависимости от типа кнопки (см. п. 1)
- *  2. `margin-right` добавляет лишний оступ,
+ *  2. `margin-right` добавляет лишний отступ,
  *  3. `6px` конфликтуют со значениями в `gap`,
- *  4. У обёртки `.Banner__actions` выставлен отрицительный внешний снизу в 6px.
+ *  4. У обёртки `.Banner__actions` выставлен отрицательный внешний снизу в 6px.
  */
 .Banner__actions > .Button {
   margin-top: 12px;
@@ -560,9 +560,9 @@
  * FIXME Следует поправить компонент на уровне уровне дизайн-системы
  *  Сейчас нет возможности использовать `ButtonGroup`, т.к. эти стили конфликтуют с `ButtonGroup.css`:
  *  1. `flex: 1` конфликтует с `stretched={false}`.
- *  2. `margin-right` добавляет лишний оступ,
+ *  2. `margin-right` добавляет лишний отступ,
  *  3. `6px` конфликтуют со значениями в `gap`,
- *  4. У обёртки `.ModalCardBase__actions` выставлены отрицительные внешние отступы слева/справа в 6px.
+ *  4. У обёртки `.ModalCardBase__actions` выставлены отрицательные внешние отступы слева/справа в 6px.
  */
 .ModalCardBase__actions .Button {
   flex: 1;
@@ -585,9 +585,9 @@
  *
  * ====================
  *
- * @depracated Пользователям следует использовать `ButtonGroup` (см. пример `RichCell/Readme.md`).
+ * @deprecated Пользователям следует использовать `ButtonGroup` (см. пример `RichCell/Readme.md`).
  *
- * TODO Сейчас стиль сохранён для обртаной совместимости. Удалить в следующей мажорной версии.
+ * TODO Сейчас стиль сохранён для обратной совместимости. Удалить в 5.0.0.
  */
 .RichCell__actions > .Button + .Button {
   margin-left: 8px;

package/src/components/Button/Button.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { Caption } from "../Typography/Caption/Caption";
 import { HasAlign, HasComponent } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -141,25 +141,26 @@ function resolveButtonAppearance(
   };
 }
 
-const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
+const ButtonComponent: React.FC<ButtonProps> = ({
+  size = "s",
+  mode = "primary",
+  appearance,
+  stretched = false,
+  align = "center",
+  children,
+  before,
+  after,
+  getRootRef,
+  sizeY,
+  Component = "button",
+  loading,
+  onClick,
+  stopPropagation = true,
+  ...restProps
+}) => {
   const platform = usePlatform();
-  const {
-    size,
-    mode,
-    appearance,
-    stretched,
-    align,
-    children,
-    before,
-    after,
-    getRootRef,
-    sizeY,
-    Component = "button",
-    loading,
-    onClick,
-    ...restProps
-  } = props;
   const hasIcons = Boolean(before || after);
+  const hasIconOnly = !children && Boolean(after) !== Boolean(before);
   const { resolvedMode, resolvedAppearance } = resolveButtonAppearance(
     appearance,
     mode
@@ -172,6 +173,7 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
       Component={restProps.href ? "a" : Component}
       onClick={loading ? undefined : onClick}
       focusVisibleMode="outside"
+      stopPropagation={stopPropagation}
       vkuiClass={classNames(
         "Button",
         `Button--sz-${size}`,
@@ -179,13 +181,9 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
         `Button--clr-${resolvedAppearance}`,
         `Button--aln-${align}`,
         `Button--sizeY-${sizeY}`,
-        {
-          ["Button--stretched"]: stretched,
-          ["Button--with-icon"]: hasIcons,
-          ["Button--singleIcon"]: Boolean(
-            (!children && !after && before) || (!children && after && !before)
-          ),
-        }
+        stretched && "Button--stretched",
+        hasIcons && "Button--with-icon",
+        hasIconOnly && "Button--singleIcon"
       )}
       getRootRef={getRootRef}
       hoverMode={hasNewTokens ? "Button--hover" : "background"}
@@ -211,15 +209,6 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
   );
 };
 
-Button.defaultProps = {
-  mode: "primary",
-  align: "center",
-  size: "s",
-  stretched: false,
-  stopPropagation: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Button, {
+export const Button = withAdaptivity(ButtonComponent, {
   sizeY: true,
 });

package/src/components/Calendar/Calendar.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { isSameMonth, isSameDay } from "date-fns";
+import { isSameMonth, isSameDay } from "../../lib/date";
 import {
   CalendarHeader,
   CalendarHeaderProps,
@@ -94,12 +94,13 @@ export const Calendar: React.FC<CalendarProps> = ({
     size === "s"
   ) {
     warn(
-      "Нельзя включить селекты выбора месяца/года если размер календаря 's'"
+      "Нельзя включить селекты выбора месяца/года, если размер календаря 's'",
+      "error"
     );
   }
 
   if (process.env.NODE_ENV === "development" && enableTime && size === "s") {
-    warn("Нельзя включить выбор времени если размер календаря 's'");
+    warn("Нельзя включить выбор времени, если размер календаря 's'", "error");
   }
 
   const handleKeyDown = React.useCallback(

package/src/components/Calendar/Readme.md

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

package/src/components/CalendarDay/CalendarDay.tsx

@@ -66,6 +66,7 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
 
     return (
       <Tappable
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames("CalendarDay", `CalendarDay--size-${size}`, {
           "CalendarDay--today": today,
           "CalendarDay--selected": selected && !disabled,
@@ -92,6 +93,7 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
         onLeave={handleLeave}
       >
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("CalendarDay__hinted", {
             "CalendarDay__hinted--active": hinted,
             "CalendarDay__hinted--selection-start": hintedSelectionStart,
@@ -99,6 +101,7 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
           })}
         >
           <div
+            // eslint-disable-next-line vkui/no-object-expression-in-arguments
             vkuiClass={classNames("CalendarDay__inner", {
               "CalendarDay__inner--active": active && !disabled,
             })}

package/src/components/CalendarDays/CalendarDays.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { isSameDay, isSameMonth } from "date-fns";
+import { isSameDay, isSameMonth } from "../../lib/date";
 import { CalendarDay } from "../CalendarDay/CalendarDay";
 import { getDaysNames, getWeeks } from "../../lib/calendar";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { setMonth, setYear, subMonths, addMonths } from "date-fns";
+import { setMonth, setYear, subMonths, addMonths } from "../../lib/date";
 import {
   Icon20ChevronLeftOutline,
   Icon20ChevronRightOutline,
@@ -7,15 +7,16 @@ import {
 } from "@vkontakte/icons";
 import Tappable from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
-import CustomSelect, {
+import {
+  CustomSelect,
   CustomSelectProps,
   SelectType,
 } from "../CustomSelect/CustomSelect";
-import CustomSelectOption from "../CustomSelectOption/CustomSelectOption";
+import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption";
 import { SizeType } from "../../hoc/withAdaptivity";
 import { getMonths, getYears } from "../../lib/calendar";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
-import Text from "../Typography/Text/Text";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import "./CalendarHeader.css";
 
 export interface CalendarHeaderProps
@@ -101,22 +102,22 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
       <div vkuiClass="CalendarHeader__pickers">
         {disablePickers ? (
           <React.Fragment>
-            <Text
-              weight="medium"
+            <Paragraph
+              weight="2"
               vkuiClass="CalendarHeader__pickers-placeholder"
             >
               {new Intl.DateTimeFormat(locale, {
                 month: "long",
               }).format(viewDate)}
-            </Text>
-            <Text
-              weight="medium"
+            </Paragraph>
+            <Paragraph
+              weight="2"
               vkuiClass="CalendarHeader__pickers-placeholder"
             >
               {new Intl.DateTimeFormat(locale, {
                 year: "numeric",
               }).format(viewDate)}
-            </Text>
+            </Paragraph>
           </React.Fragment>
         ) : (
           <React.Fragment>

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/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 };
@@ -177,10 +177,12 @@ 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}
@@ -233,6 +235,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/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));
 }