@vkontakte/vkui 4.27.2 → 4.29.0

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -7,7 +7,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { getTitleFromChildren, isPrimitiveReactNode } from "../../lib/utils";
 import { IOS, VKCOM, ANDROID } from "../../lib/platform";
 import Text from "../Typography/Text/Text";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import "./PanelHeaderButton.css";
 
 export interface PanelHeaderButtonProps extends Omit<TappableProps, "label"> {
@@ -76,7 +76,8 @@ export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
 
     if (!hasAccessibleName) {
       warn(
-        "a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label."
+        "a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.",
+        "error"
       );
     }
   }
@@ -88,6 +89,7 @@ export const PanelHeaderButton: React.FC<PanelHeaderButtonProps> = ({
       Component={restProps.href ? "a" : "button"}
       activeEffectDelay={200}
       activeMode={activeMode}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("PanelHeaderButton", platform), {
         "PanelHeaderButton--primary": primary,
         "PanelHeaderButton--primitive": isPrimitive,

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -3,7 +3,7 @@ import { getClassName } from "../../helpers/getClassName";
 import Tappable from "../Tappable/Tappable";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Headline from "../Typography/Headline/Headline";
 import { IOS, Platform } from "../../lib/platform";
 import Text from "../Typography/Text/Text";
@@ -81,13 +81,7 @@ const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
       )}
       <InComponent {...inProps} vkuiClass="PanelHeaderContent__in">
         {hasReactNode(status) && (
-          <Caption
-            level="1"
-            weight="regular"
-            vkuiClass="PanelHeaderContent__status"
-          >
-            {status}
-          </Caption>
+          <Caption vkuiClass="PanelHeaderContent__status">{status}</Caption>
         )}
         <div vkuiClass="PanelHeaderContent__children">
           <PanelHeaderChildren

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -63,6 +63,7 @@ export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
   return (
     <FixedLayout
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("PanelHeaderContext", platform), {
         "PanelHeaderContext--opened": opened,
         "PanelHeaderContext--closing": closing,

package/src/components/Placeholder/Placeholder.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { hasReactNode } from "../../lib/utils";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Headline from "../Typography/Headline/Headline";
 import { HasRootRef } from "../../types";
 import "./Placeholder.css";
@@ -42,6 +42,7 @@ const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
     <div
       {...restProps}
       ref={getRootRef}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("Placeholder", {
         "Placeholder--stretched": stretched,
       })}

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -54,6 +54,7 @@ export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         baseClassNames,
         `PopoutWrapper--v-${alignY}`,

package/src/components/PopoutWrapper/Readme.md

@@ -9,4 +9,4 @@ import { PopoutWrapper } from "@vkontakte/vkui";
 </PopoutWrapper>;
 ```
 
-Все всплывающие окна передаются в свойство `popout` компонентов `View` или `Root`.
+Все всплывающие окна передаются в свойство `popout` компонента [`SplitLayout`](#/SplitLayout).

package/src/components/Popper/Popper.tsx

@@ -149,9 +149,9 @@ export const Popper: React.FC<PopperProps> = ({
 
   const resolvedPlacement = state?.placement;
   const isEdgePlacement =
-    !!resolvedPlacement && resolvedPlacement.includes("-"); // true, если поппер отрисован скраю
+    !!resolvedPlacement && resolvedPlacement.includes("-"); // true, если поппер отрисован с краю
 
-  // Если поппер рисуется скраю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
+  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
   // таргета из-за маленьких размеров последнего
   useIsomorphicLayoutEffect(() => {
     if (arrow && isEdgePlacement) {

package/src/components/Popper/Readme.md

@@ -2,7 +2,7 @@
 >
 > Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
-Низкоуровневый компонент для отрисовки выпадающего блока. Единственная его задача — корректно позициионироваться
+Низкоуровневый компонент для отрисовки выпадающего блока. Единственная его задача — корректно позиционироваться
 рядом с целевым элементом. На основе этого компонента сделаны [ClickPopper](#/ClickPopper) и [HoverPopper](#/HoverPopper),
 реализующие логику скрытия и показа по клику и по ховеру соответственно.
 

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { Icon24Dismiss } from "@vkontakte/icons";
-import Button from "../Button/Button";
+import { Button } from "../Button/Button";
 import SimpleCell from "../SimpleCell/SimpleCell";
 import Avatar from "../Avatar/Avatar";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { warnOnce } from "../../lib/warnOnce";
@@ -90,13 +90,11 @@ const PromoBanner = (props: PromoBannerProps) => {
   return (
     <div vkuiClass={getClassName("PromoBanner", platform)} {...restProps}>
       <div vkuiClass="PromoBanner__head">
-        <Caption weight="regular" level="1" vkuiClass="PromoBanner__label">
+        <Caption vkuiClass="PromoBanner__label">
           {bannerData.advertisingLabel || "Advertisement"}
         </Caption>
         {ageRestrictions != null && (
-          <Caption weight="regular" level="1" vkuiClass="PromoBanner__age">
-            {ageRestrictions}+
-          </Caption>
+          <Caption vkuiClass="PromoBanner__age">{ageRestrictions}+</Caption>
         )}
 
         {!props.isCloseButtonHidden && (

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -312,6 +312,7 @@ class PullToRefresh extends React.PureComponent<
           onStart={this.onTouchStart}
           onMove={this.onTouchMove}
           onEnd={this.onTouchEnd}
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames(getClassName("PullToRefresh", platform), {
             "PullToRefresh--watching": watching,
             "PullToRefresh--refreshing": refreshing,

package/src/components/PullToRefresh/PullToRefreshSpinner.tsx

@@ -34,6 +34,7 @@ const PullToRefreshSpinner: React.FunctionComponent<
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("PullToRefresh__spinner", {
         "PullToRefresh__spinner--on": on,
       })}

package/src/components/Radio/Radio.tsx

@@ -11,7 +11,7 @@ import {
   SizeType,
 } from "../../hoc/withAdaptivity";
 import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Headline from "../Typography/Headline/Headline";
 import Text from "../Typography/Text/Text";
 import "./Radio.css";
@@ -68,14 +68,7 @@ const Radio: React.FC<RadioProps> = (props: RadioProps) => {
         >
           <div vkuiClass="Radio__children">{children}</div>
           {hasReactNode(description) && (
-            <Caption
-              level="1"
-              Component="span"
-              weight="regular"
-              vkuiClass="Radio__description"
-            >
-              {description}
-            </Caption>
+            <Caption vkuiClass="Radio__description">{description}</Caption>
           )}
         </ContentComponent>
       </div>

package/src/components/RichCell/Readme.md

@@ -11,10 +11,10 @@
         caption="Вчера в 20:30"
         after="+ 1 500 ₽"
         actions={
-          <React.Fragment>
+          <ButtonGroup mode="horizontal" gap="s">
             <Button>Принять</Button>
             <Button mode="secondary">Отклонить</Button>
-          </React.Fragment>
+          </ButtonGroup>
         }
       >
         Тарас Иванов
@@ -36,10 +36,10 @@
           </UsersStack>
         }
         actions={
-          <React.Fragment>
+          <ButtonGroup mode="horizontal" gap="s">
             <Button>Добавить</Button>
             <Button mode="secondary">Скрыть</Button>
-          </React.Fragment>
+          </ButtonGroup>
         }
       >
         Илья Гришин

package/src/components/RichCell/RichCell.tsx

@@ -5,7 +5,7 @@ import { getClassName } from "../../helpers/getClassName";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import "./RichCell.css";
 
@@ -23,7 +23,8 @@ export interface RichCellProps extends TappableProps {
    */
   bottom?: React.ReactNode;
   /**
-   * Кнопка или набор кнопок `<Button size="s" />`. Располагается под `bottom`.
+   * Кнопка `<Button size="s" />`. Располагается под `bottom`.
+   * Для набора кнопок следует использовать обёртку `<ButtonGroup mode="horizontal" gap="s">...</ButtonGroup>`.
    */
   actions?: React.ReactNode;
   /**
@@ -58,6 +59,7 @@ const RichCell: React.FC<RichCellProps> = ({
   return (
     <Tappable
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("RichCell", platform),
         {

package/src/components/RichTooltip/Readme.md

@@ -2,11 +2,11 @@
 >
 > Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
-Тултип, открывающийся при наведеннии мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений
+Тултип, открывающийся при наведении мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений
 по содержимому. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
 
 ```jsx { "props": { "layout": false, "iframe": true } }
-<Checkbox>
+<Checkbox style={{userSelect: 'none'}}>
   Специальные возможности
   <RichTooltip style={{maxWidth: 320}} content={
     <Subhead weight="regular" style={{padding: '8px 12px', color: 'var(--text_primary)'}}>
@@ -54,6 +54,6 @@
     Илья Гришин
   </RichCell>
 }>
-  <Link style={{display: 'inline-block', margin: 20}}>Илья Гришин</Link>
+  <Link style={{display: 'inline-block', margin: 20, userSelect: 'none'}}>Илья Гришин</Link>
 </RichTooltip>
 ```

package/src/components/RichTooltip/RichTooltip.tsx

@@ -19,6 +19,7 @@ export const RichTooltip: React.FC<RichTooltipProps> = ({
 
   return (
     <HoverPopper
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("RichTooltip", platform), {
         [`RichTooltip--${appearance}`]: !!appearance,
       })}

package/src/components/Root/Root.css

@@ -79,7 +79,7 @@
 }
 
 .Root--ios .Root__view--show-back::after {
-  animation: vkui-root-ios-animation-show-back 0.6s var(--ios-easing);
+  animation: vkui-root-ios-animation-show-back 0.6s var(--ios-easing) forwards;
 }
 
 .Root--ios .Root__view--hide-forward::after {
@@ -91,7 +91,7 @@
 }
 
 .Root--ios .Root__view--hide-back {
-  animation: vkui-root-ios-animation-hide-back 0.6s var(--ios-easing);
+  animation: vkui-root-ios-animation-hide-back 0.6s var(--ios-easing) forwards;
 }
 
 @keyframes vkui-root-ios-animation-show-back {
@@ -148,7 +148,8 @@
 
 .Root--android .Root__view--hide-back,
 .Root--vkcom .Root__view--hide-back {
-  animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing);
+  animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing)
+    forwards;
 }
 
 @keyframes vkui-root-android-animation-hide-back {
@@ -174,11 +175,3 @@
     opacity: 1;
   }
 }
-
-/* iOS + Android */
-
-.Root--ios.Root--no-motion .Root__view,
-.Root--android.Root--no-motion .Root__view,
-.Root--vkcom.Root--no-motion .Root__view {
-  animation: none;
-}

package/src/components/Root/Root.tsx

@@ -80,7 +80,7 @@ const Root: React.FC<RootProps> = ({
       _setState({
         activeView: panel,
         prevView: activeView,
-        transition: true,
+        transition: !disableAnimation,
         isBack,
       });
     }
@@ -107,7 +107,7 @@ const Root: React.FC<RootProps> = ({
           to: activeView,
         });
     }
-  }, [transition]);
+  }, [transition, prevView]);
 
   const fallbackTransition = useTimeout(
     finishTransition,
@@ -118,8 +118,8 @@ const Root: React.FC<RootProps> = ({
       fallbackTransition.clear();
       return;
     }
-    disableAnimation ? finishTransition() : fallbackTransition.set();
-  }, [disableAnimation, fallbackTransition, finishTransition, transition]);
+    fallbackTransition.set();
+  }, [fallbackTransition, transition]);
 
   const onAnimationEnd = (e: React.AnimationEvent) => {
     if (
@@ -148,9 +148,9 @@ const Root: React.FC<RootProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("Root", platform), {
-        "Root--transition": !disableAnimation && transition,
-        "Root--no-motion": disableAnimation,
+        "Root--transition": transition,
       })}
     >
       {views.map((view) => {
@@ -168,6 +168,7 @@ const Root: React.FC<RootProps> = ({
             key={viewId}
             ref={(e) => viewId && (viewNodes[viewId] = e)}
             onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
+            // eslint-disable-next-line vkui/no-object-expression-in-arguments
             vkuiClass={classNames("Root__view", {
               "Root__view--hide-back":
                 transition && viewId === prevView && isBack,

package/src/components/Search/Search.tsx

@@ -13,7 +13,7 @@ import { Touch, TouchEvent } from "../Touch/Touch";
 import { VKUITouchEvent } from "../../lib/touch";
 import { noop } from "../../lib/utils";
 import Text from "../Typography/Text/Text";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Headline from "../Typography/Headline/Headline";
 import Separator from "../Separator/Separator";
 import { useExternRef } from "../../hooks/useExternRef";
@@ -121,6 +121,7 @@ const Search: React.FC<SearchProps> = ({
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("Search", platform), {
         "Search--focused": isFocused,
         "Search--has-value": !!value,

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -33,39 +33,49 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = ({
   options,
   getRootRef,
   onChange = noop,
-  value,
+  value: valueProp,
   defaultValue,
   children,
   ...restProps
 }) => {
-  let initialValue = defaultValue ?? value;
+  const initialValue = defaultValue ?? options[0]?.value;
 
-  if (!initialValue) {
-    initialValue = options[0]?.value;
+  if (process.env.NODE_ENV === "development") {
+    if (valueProp !== undefined && defaultValue !== undefined) {
+      warn(
+        "SegmentedControl должен быть либо управляемым, либо неуправляемым" +
+          "(укажите либо свойство value, либо свойство defaultValue, но не оба).",
+        "error"
+      );
+    }
   }
 
   const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);
-  const [activeValue, updateActiveValue] =
+  const [valueLocal, updateValueLocal] =
     React.useState<SegmentedControlValue>(initialValue);
 
+  const value = valueProp ?? valueLocal;
+
   const nameRef = React.useRef<string>(name ?? generateRandomId());
 
   useIsomorphicLayoutEffect(() => {
     const _activeOptionIdx = options.findIndex(
-      (option) => option.value === activeValue
+      (option) => option.value === value
     );
 
     if (_activeOptionIdx === -1 && process.env.NODE_ENV === "development") {
-      warn("defaultValue: такого значения нет среди опций!");
+      warn("defaultValue: такого значения нет среди опций!", "error");
     }
 
     updateActiveOptionIdx(_activeOptionIdx);
-  }, [activeValue, options]);
+  }, [value, options]);
 
   const translateX = `translateX(${100 * activeOptionIdx}%)`;
 
   const handleOnChange = (value: SegmentedControlValue) => {
-    updateActiveValue(value);
+    if (valueProp === undefined) {
+      updateValueLocal(value);
+    }
     onChange(value);
   };
 
@@ -93,7 +103,7 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = ({
             {...optionProps}
             vkuiClass="SegmentedControl__option"
             name={nameRef.current}
-            checked={activeValue === optionProps.value}
+            checked={value === optionProps.value}
             onChange={() => handleOnChange(optionProps.value)}
           >
             {label}

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css

@@ -15,7 +15,7 @@
   color: var(--vkui--color_icon_secondary);
 }
 
-.SegmentedControlOption:hover {
+.SegmentedControlOption:not(.SegmentedControlOption--checked):hover {
   opacity: 0.5;
 }
 

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx

@@ -22,6 +22,7 @@ export const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({
     <label
       className={className}
       style={style}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("SegmentedControlOption", {
         "SegmentedControlOption--checked": restProps.checked,
         "SegmentedControlOption--focus-visible": focusVisible,

package/src/components/Select/Select.css

@@ -22,7 +22,7 @@
   flex-grow: 1;
   flex-shrink: 1;
   padding: 11px;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   box-sizing: border-box;
   position: relative;
   z-index: 2;
@@ -40,7 +40,7 @@
 }
 
 .Select--not-selected .Select__title {
-  color: var(--field_text_placeholder);
+  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
 }
 
 .Select--align-right .Select__title {
@@ -57,3 +57,8 @@
 .Select--sizeY--compact .Select__container {
   padding: 7px 11px;
 }
+
+.Select--sizeY--compact .Select__container--plain,
+.Select__container--plain {
+  padding: 0 6px 0 8px;
+}

package/src/components/Select/Select.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import NativeSelect from "../NativeSelect/NativeSelect";
-import CustomSelect, { CustomSelectProps } from "../CustomSelect/CustomSelect";
+import { CustomSelect, CustomSelectProps } from "../CustomSelect/CustomSelect";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import {
   AdaptivityContextInterface,
@@ -9,7 +9,7 @@ import {
 
 export interface SelectProps extends CustomSelectProps, AdaptivityProps {}
 
-const Select: React.FC<SelectProps & AdaptivityContextInterface> = ({
+const SelectComponent: React.FC<SelectProps & AdaptivityContextInterface> = ({
   hasMouse,
   ...props
 }: SelectProps) => {
@@ -33,7 +33,6 @@ const Select: React.FC<SelectProps & AdaptivityContextInterface> = ({
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Select, {
+export const Select = withAdaptivity(SelectComponent, {
   hasMouse: true,
 });

package/src/components/SelectMimicry/SelectMimicry.css

@@ -0,0 +1,10 @@
+.Select--mimicry-plain {
+  padding: 8px 8px 8px 0;
+  text-transform: capitalize;
+  border-radius: 8px;
+}
+
+.Select--mimicry-plain .FormField__border {
+  background-color: transparent;
+  border: none;
+}

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -13,7 +13,9 @@ import { getClassName } from "../../helpers/getClassName";
 import Headline from "../Typography/Headline/Headline";
 import Text from "../Typography/Text/Text";
 import { VKCOM } from "../../lib/platform";
+import { SelectType } from "../CustomSelect/CustomSelect";
 import "../Select/Select.css";
+import "./SelectMimicry.css";
 
 export interface SelectMimicryProps
   extends React.HTMLAttributes<HTMLElement>,
@@ -22,6 +24,8 @@ export interface SelectMimicryProps
     AdaptivityProps {
   multiline?: boolean;
   disabled?: boolean;
+  after?: React.ReactNode;
+  selectType?: SelectType;
 }
 
 const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
@@ -35,6 +39,8 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
   onClick,
   sizeX,
   sizeY,
+  after = <DropdownIcon />,
+  selectType = SelectType.Default,
   ...restProps
 }: SelectMimicryProps) => {
   const platform = usePlatform();
@@ -46,9 +52,11 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
     <FormField
       {...restProps}
       tabIndex={disabled ? undefined : tabIndex}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Select", platform),
         "Select--mimicry",
+        `Select--mimicry-${selectType}`,
         {
           "Select--not-selected": !children,
           "Select--multiline": multiline,
@@ -60,12 +68,15 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
       getRootRef={getRootRef}
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
-      after={<DropdownIcon />}
+      after={after}
     >
       <TypographyComponent
         Component="div"
-        weight="regular"
-        vkuiClass="Select__container"
+        weight={selectType === SelectType.Plain ? "semibold" : "regular"}
+        vkuiClass={classNames(
+          "Select__container",
+          `Select__container--${selectType}`
+        )}
       >
         <span vkuiClass="Select__title">{children || placeholder}</span>
       </TypographyComponent>

package/src/components/Separator/Separator.tsx

@@ -23,11 +23,13 @@ const Separator: React.FC<SeparatorProps> = ({
     <div
       {...restProps}
       aria-hidden="true"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("Separator", platform), {
         "Separator--wide": wide,
       })}
     >
       <div
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames("Separator__in", {
           "Separator__in--expanded": expanded,
         })}

package/src/components/SimpleCell/SimpleCell.tsx

@@ -9,9 +9,9 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
-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 Headline from "../Typography/Headline/Headline";
 import "./SimpleCell.css";
 
@@ -85,6 +85,7 @@ const SimpleCell: React.FC<SimpleCellProps> = ({
   return (
     <Tappable
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("SimpleCell", platform),
         {