@vkontakte/vkui 4.28.1 → 4.30.0

package/src/components/PanelHeader/PanelHeader.tsx

@@ -91,6 +91,7 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("PanelHeader", platform),
         {
@@ -119,10 +120,10 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
       ) : (
         <PanelHeaderIn {...props} />
       )}
-      {separator && visor && platform !== VKCOM && (
+      {separator && visor && (
         <Separator
-          vkuiClass="PanelHeader__separator"
-          expanded={sizeX === SizeType.REGULAR}
+          expanded={sizeX === SizeType.REGULAR && platform !== VKCOM}
+          wide={platform === VKCOM}
         />
       )}
     </div>

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -36,6 +36,7 @@ const PanelHeaderBack: React.FunctionComponent<PanelHeaderBackProps> = ({
   return (
     <PanelHeaderButton
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("PanelHeaderBack", platform), {
         "PanelHeaderBack--has-label": showLabel && !!label,
       })}

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/PanelHeaderContext/PanelHeaderContext.tsx

@@ -9,6 +9,7 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { useTimeout } from "../../hooks/useTimeout";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useScrollLock } from "../AppRoot/ScrollContext";
 import "./PanelHeaderContext.css";
 
 export interface PanelHeaderContextProps
@@ -35,6 +36,8 @@ export const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({
     opened && setVisible(true);
   }, [opened]);
 
+  useScrollLock(!isDesktop && opened);
+
   // start closing on outer click
   useGlobalEventListener(
     document,
@@ -63,6 +66,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/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/PromoBanner/PromoBanner.tsx

@@ -1,6 +1,6 @@
 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";

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/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";
 
@@ -59,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

@@ -6,7 +6,7 @@
 по содержимому. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
 
 ```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/ScreenSpinner/ScreenSpinner.tsx

@@ -3,6 +3,7 @@ import Spinner, { SpinnerProps } from "../Spinner/Spinner";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useScrollLock } from "../AppRoot/ScrollContext";
 import "./ScreenSpinner.css";
 
 export type ScreenSpinnerProps = React.HTMLAttributes<HTMLDivElement> &
@@ -14,6 +15,8 @@ const ScreenSpinner: React.FC<ScreenSpinnerProps> = (
   const { style, className, ...restProps } = props;
   const platform = usePlatform();
 
+  useScrollLock();
+
   return (
     <PopoutWrapper
       hasMask={false}

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 {

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 { NativeSelect } from "../NativeSelect/NativeSelect";
+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.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
-import { FormField } from "../FormField/FormField";
+import { FormField, FormFieldProps } from "../FormField/FormField";
 import { HasAlign, HasRootRef } from "../../types";
 import {
   withAdaptivity,
@@ -21,10 +21,10 @@ export interface SelectMimicryProps
   extends React.HTMLAttributes<HTMLElement>,
     HasAlign,
     HasRootRef<HTMLElement>,
-    AdaptivityProps {
+    AdaptivityProps,
+    Pick<FormFieldProps, "before" | "after"> {
   multiline?: boolean;
   disabled?: boolean;
-  after?: React.ReactNode;
   selectType?: SelectType;
 }
 
@@ -39,6 +39,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
   onClick,
   sizeX,
   sizeY,
+  before,
   after = <DropdownIcon />,
   selectType = SelectType.Default,
   ...restProps
@@ -52,6 +53,7 @@ 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",
@@ -67,6 +69,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
       getRootRef={getRootRef}
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
+      before={before}
       after={after}
     >
       <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),
         {

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -79,12 +79,17 @@ export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
   if (IS_DEV) {
     if (defaultIndeterminate && restProps.defaultChecked) {
       warn(
-        "defaultIndeterminate and defaultChecked cannot be true at the same time"
+        "defaultIndeterminate и defaultChecked не могут быть true одновременно",
+        "error"
       );
     }
 
     if (indeterminate && restProps.checked) {
-      warn("indeterminate and checked cannot be true at the same time");
+      warn("indeterminate и checked не могут быть true одновременно", "error");
+    }
+
+    if (restProps.defaultChecked && restProps.checked) {
+      warn("defaultChecked и checked не могут быть true одновременно", "error");
     }
   }
 

package/src/components/SliderSwitch/SliderSwitch.tsx

@@ -176,6 +176,7 @@ class SliderSwitch extends React.Component<
           <div vkuiClass="SliderSwitch__border" />
         )}
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("SliderSwitch__slider", {
             ["SliderSwitch--firstActive"]: firstActive,
             ["SliderSwitch--secondActive"]: secondActive,

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -31,6 +31,7 @@ export const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
   return (
     <Tappable
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("SliderSwitch__button", platform), {
         ["SliderSwitch__button--active"]: active,
         ["SliderSwitch__button--hover"]: !active && hovered,

package/src/components/Snackbar/Snackbar.css

@@ -46,6 +46,7 @@
   flex: 1;
   display: flex;
   align-items: center;
+  overflow: hidden;
 }
 
 .Snackbar--l-vertical .Snackbar__content {
@@ -55,10 +56,12 @@
 
 .Snackbar__content-text {
   flex: 1;
-}
-
-.Snackbar__content-text {
   color: var(--text_primary);
+  width: 100%;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .Snackbar--l-horizontal .Snackbar__action {

package/src/components/Snackbar/Snackbar.tsx

@@ -7,7 +7,7 @@ import { ANDROID, VKCOM } from "../../lib/platform";
 import { rubber } from "../../lib/touch";
 import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
 import Text from "../Typography/Text/Text";
-import Button from "../Button/Button";
+import { Button } from "../Button/Button";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -195,6 +195,7 @@ const SnackbarComponent: React.FC<
     <AppRootPortal>
       <div
         {...restProps}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames(
           getClassName("Snackbar", platform),
           `Snackbar--l-${resolvedLayout}`,

package/src/components/Spacing/Spacing.tsx

@@ -36,6 +36,7 @@ export const Spacing: React.FC<SpacingProps> = ({
     <div
       {...restProps}
       aria-hidden="true"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("Spacing", platform), {
         "Spacing--separator": !!separator,
         "Spacing--separator-center":

package/src/components/SplitCol/SplitCol.tsx

@@ -58,6 +58,7 @@ export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
         minWidth: minWidth,
       }}
       ref={baseRef}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("SplitCol", {
         "SplitCol--spaced": spaced,
         "SplitCol--fixed": fixed,

package/src/components/SplitLayout/SplitLayout.css

@@ -26,7 +26,9 @@
 
 .SplitLayout--android .SplitLayout__inner--header,
 .SplitLayout--vkcom .SplitLayout__inner--header {
-  margin-top: calc(-1 * var(--panelheader_height_android));
+  margin-top: calc(
+    -1 * calc(var(--panelheader_height_android) + var(--safe-area-inset-top))
+  );
 }
 
 .SplitLayout__popout {