@vkontakte/vkui 4.33.4 → 4.34.0

package/src/components/Search/Search.css

@@ -124,7 +124,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--search_bar_field_tint);
+  color: var(--search_bar_field_tint, var(--vkui--color_icon_secondary));
 }
 
 .Search__icon {
@@ -133,6 +133,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .Search__after {
@@ -207,7 +208,7 @@
 }
 
 .Search__placeholder {
-  color: var(--search_bar_field_tint);
+  color: var(--search_bar_field_tint, var(--vkui--color_icon_medium));
 }
 
 .Search__after-width {
@@ -301,11 +302,13 @@
 
 .Search--vkcom .Search__placeholder {
   padding-left: 16px;
+  color: var(--vkui--color_icon_secondary);
 }
 
 .Search--vkcom .Search__icons {
   top: 4px;
   right: calc(100% + 8px);
+  color: var(--search_bar_field_tint, var(--vkui--color_icon_medium));
 }
 
 .Search--vkcom.Search--has-value .Search__input {
@@ -319,6 +322,7 @@
 .Search--vkcom .Search__icon {
   width: 40px;
   height: 40px;
+  opacity: 0.8;
 }
 
 .Search--vkcom .Search__icon:hover {

package/src/components/Search/Search.tsx

@@ -26,9 +26,11 @@ interface SearchPlaceholderTypographyProps
   extends HasPlatform,
     React.HTMLAttributes<HTMLElement> {}
 
-const SearchPlaceholderTypography: React.FC<
-  SearchPlaceholderTypographyProps
-> = ({ platform, children, ...restProps }) => {
+const SearchPlaceholderTypography = ({
+  platform,
+  children,
+  ...restProps
+}: SearchPlaceholderTypographyProps) => {
   switch (platform) {
     case IOS:
       return (
@@ -65,7 +67,7 @@ export interface SearchProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-const SearchComponent: React.FC<SearchProps> = ({
+const SearchComponent = ({
   before = <Icon16SearchOutline aria-hidden />,
   className,
   defaultValue = "",
@@ -78,7 +80,7 @@ const SearchComponent: React.FC<SearchProps> = ({
   style,
   autoComplete = "off",
   ...inputProps
-}) => {
+}: SearchProps) => {
   const inputRef = useExternRef(getRef);
   const [isFocused, setFocused] = React.useState(false);
   const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });

package/src/components/SegmentedControl/SegmentedControl.css

@@ -24,7 +24,7 @@
   top: 0;
   left: 0;
   bottom: 0;
-  background-color: var(--vkui--color_background_modal);
+  background-color: var(--vkui--color_segmented_control);
   transition: transform 150ms;
   transform-origin: 0 0;
   border-radius: inherit;

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -32,7 +32,7 @@ const warn = warnOnce("SegmentedControl");
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export const SegmentedControl: React.FC<SegmentedControlProps> = ({
+export const SegmentedControl = ({
   size = "l",
   name,
   options,
@@ -42,7 +42,7 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = ({
   defaultValue,
   children,
   ...restProps
-}) => {
+}: SegmentedControlProps) => {
   const { sizeY } = useAdaptivity();
   const initialValue = defaultValue ?? options[0]?.value;
 

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

@@ -12,7 +12,7 @@
 }
 
 .SegmentedControlOption .Icon {
-  color: var(--vkui--color_icon_secondary);
+  color: var(--vkui--color_icon_primary);
 }
 
 .SegmentedControlOption:not(.SegmentedControlOption--checked):hover {

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

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { useFocusVisible } from "../../../hooks/useFocusVisible";
 import { callMultiple } from "../../../lib/callMultiple";
@@ -16,12 +15,12 @@ import "./SegmentedControlOption.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({
+export const SegmentedControlOption = ({
   className,
   style,
   children,
   ...restProps
-}) => {
+}: VisuallyHiddenInputProps) => {
   const { focusVisible, onBlur, onFocus } = useFocusVisible();
   const { sizeY } = useAdaptivity();
 

package/src/components/Select/Select.tsx

@@ -24,9 +24,11 @@ export const SelectType = {
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectTypography
  */
-export const SelectTypography: React.FC<
-  Pick<CustomSelectProps, "selectType">
-> = ({ selectType = SelectType.default, children, ...restProps }) => {
+export const SelectTypography = ({
+  selectType = SelectType.default,
+  children,
+  ...restProps
+}: React.PropsWithChildren<Pick<CustomSelectProps, "selectType">>) => {
   const platform = usePlatform();
   const { sizeY } = useAdaptivity();
 
@@ -53,10 +55,10 @@ export const SelectTypography: React.FC<
 
 export interface SelectProps extends CustomSelectProps, AdaptivityProps {}
 
-const SelectComponent: React.FC<SelectProps & AdaptivityContextInterface> = ({
+const SelectComponent = ({
   hasMouse,
   ...props
-}: SelectProps) => {
+}: SelectProps & AdaptivityContextInterface) => {
   // Use custom select if device has connected a mouse
   if (hasMouse) {
     const { children, ...restProps } = props;

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -21,7 +21,7 @@ export interface SelectMimicryProps
   selectType?: keyof typeof SelectType;
 }
 
-const SelectMimicryComponent: React.FC<SelectMimicryProps> = ({
+const SelectMimicryComponent = ({
   tabIndex = 0,
   placeholder,
   children,
@@ -36,7 +36,7 @@ const SelectMimicryComponent: React.FC<SelectMimicryProps> = ({
   after = <DropdownIcon />,
   selectType = SelectType.default,
   ...restProps
-}) => {
+}: SelectMimicryProps) => {
   const platform = usePlatform();
   const title = children || placeholder;
 

package/src/components/Separator/Separator.css

@@ -1,25 +1,25 @@
 .Separator {
-  color: var(--separator_common);
-}
-
-.Separator__in:not(.Separator__in--expanded) {
-  height: 1px;
-  background: currentColor;
-  transform-origin: center top;
+  color: var(--separator_common, var(--vkui--color_separator_primary));
 }
 
 @media (min-resolution: 2dppx) {
-  .Separator__in:not(.Separator__in--expanded) {
-    transform: scaleY(0.5);
+  .Separator {
+    color: var(--separator_common, var(--vkui--color_separator_primary2x));
   }
 }
 
 @media (min-resolution: 3dppx) {
-  .Separator__in:not(.Separator__in--expanded) {
-    transform: scaleY(0.32);
+  .Separator {
+    color: var(--separator_common, var(--vkui--color_separator_primary3x));
   }
 }
 
+.Separator__in:not(.Separator__in--expanded) {
+  height: var(--thin-border);
+  background: currentColor;
+  transform-origin: center top;
+}
+
 .Separator__in--expanded {
   height: 16px;
   background: transparent;

package/src/components/Separator/Separator.tsx

@@ -9,7 +9,7 @@ export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
   wide?: boolean;
 
   /**
-   * @deprecated Это свойство устарело и будет удалено в 5.0.0. Используйте [`Spacing`](#/Spacing).
+   * @deprecated Это свойство устарело и будет удалено в 5.0.0. Используйте [`Spacing`](https://vkcom.github.io/VKUI/#/Spacing).
    */
   expanded?: boolean;
 }
@@ -17,11 +17,7 @@ export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */
-export const Separator: React.FC<SeparatorProps> = ({
-  wide,
-  expanded,
-  ...restProps
-}) => (
+export const Separator = ({ wide, expanded, ...restProps }: SeparatorProps) => (
   <div
     {...restProps}
     aria-hidden="true"
@@ -30,6 +26,7 @@ export const Separator: React.FC<SeparatorProps> = ({
       wide && "Separator--wide", // TODO: v5 remove
       !wide && "Separator--padded"
     )}
+    role="separator"
   >
     <div
       vkuiClass={classNames(

package/src/components/SimpleCell/SimpleCell.tsx

@@ -52,9 +52,7 @@ export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}
 type SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &
   HasComponent;
 
-const SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (
-  props: SimpleCellTypographyProps
-) => {
+const SimpleCellTypography = (props: SimpleCellTypographyProps) => {
   const { sizeY } = useAdaptivity();
   const platform = usePlatform();
 
@@ -67,7 +65,7 @@ const SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (
   }
 };
 
-const SimpleCellComponent: React.FC<SimpleCellProps> = ({
+const SimpleCellComponent = ({
   badge,
   before,
   indicator,

package/src/components/SimpleCheckbox/Readme.md

@@ -1,6 +1,6 @@
 > **Deprecated:** этот компонент устарел и будет удален в 5.0.0.
 >
-> Используйте [`Checkbox`](#/Checkbox).
+> Используйте [`Checkbox`](https://vkcom.github.io/VKUI/#/Checkbox).
 
 Надстройка над `<input type="checkbox" />`. Компонент принимает все валидные для этого элемента свойства.
 

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -33,22 +33,19 @@ export interface SimpleCheckboxProps
 }
 
 /**
- * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`Checkbox`](#/Checkbox).
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`Checkbox`](https://vkcom.github.io/VKUI/#/Checkbox).
  * @see https://vkcom.github.io/VKUI/#/SimpleCheckbox
  */
-export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
-  props: SimpleCheckboxProps
-) => {
-  const {
-    className,
-    style,
-    getRootRef,
-    getRef,
-    indeterminate,
-    defaultIndeterminate,
-    onChange,
-    ...restProps
-  } = props;
+export const SimpleCheckbox = ({
+  className,
+  style,
+  getRootRef,
+  getRef,
+  indeterminate,
+  defaultIndeterminate,
+  onChange,
+  ...restProps
+}: SimpleCheckboxProps) => {
   const { sizeY } = useAdaptivity();
   const platform = usePlatform();
   const inputRef = useExternRef(getRef);
@@ -63,7 +60,7 @@ export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
   }, [defaultIndeterminate, indeterminate, inputRef]);
 
   const handleChange: SimpleCheckboxProps["onChange"] = React.useCallback(
-    (event) => {
+    (event: React.ChangeEvent<HTMLInputElement>) => {
       if (
         defaultIndeterminate !== undefined &&
         indeterminate === undefined &&

package/src/components/Slider/Slider.tsx

@@ -5,6 +5,7 @@ import {
   UniversalSliderProps,
   UniversalValue,
 } from "../RangeSlider/UniversalSlider";
+import { TouchEvent } from "../Touch/Touch";
 
 export type SliderProps = UniversalSliderProps<number>;
 
@@ -28,7 +29,7 @@ export const Slider = ({
 
   const handleChange: UniversalSliderProps<UniversalValue>["onChange"] =
     React.useCallback(
-      (nextValue, event) => {
+      (nextValue: UniversalValue, event: TouchEvent) => {
         if (props.disabled || _value === nextValue[1]) {
           return;
         }

package/src/components/SliderSwitch/Readme.md

@@ -1,6 +1,6 @@
 > **Deprecated:** этот компонент устарел и будет удален в 5.0.0.
 >
-> Используйте [`SegmentedControl`](#/SegmentedControl).
+> Используйте [`SegmentedControl`](https://vkcom.github.io/VKUI/#/SegmentedControl).
 
 ```jsx
 <View activePanel="progress">

package/src/components/SliderSwitch/SliderSwitch.tsx

@@ -30,7 +30,7 @@ interface SliderSwitchState {
 const warn = warnOnce("SliderSwitch");
 
 /**
- * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`SegmentedControl`](#/SegmentedControl).
+ * @deprecated Этот компонент устарел и будет удален в 5.0.0. Используйте [`SegmentedControl`](https://vkcom.github.io/VKUI/#/SegmentedControl).
  * @see https://vkcom.github.io/VKUI/#/SliderSwitch
  */
 class SliderSwitch extends React.Component<

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -17,10 +17,13 @@ export interface ButtonProps
 /**
  * @deprecated Этот компонент устарел и будет удален в 5.0.0.
  */
-export const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
-  props: ButtonProps
-) => {
-  const { active, hovered, children, getRootRef, ...restProps } = props;
+export const SliderSwitchButton = ({
+  active,
+  hovered,
+  children,
+  getRootRef,
+  ...restProps
+}: ButtonProps) => {
   const platform = usePlatform();
   const [focus, setFocus] = React.useState(false);
 

package/src/components/Snackbar/Snackbar.tsx

@@ -25,7 +25,7 @@ export interface SnackbarProps
   /**
    * Название кнопки действия в уведомлении
    */
-  action?: string | React.ComponentType;
+  action?: React.ReactNode;
 
   /**
    * Будет вызвано при клике на кнопку действия
@@ -54,22 +54,18 @@ export interface SnackbarProps
   onClose: () => void;
 }
 
-const SnackbarComponent: React.FC<
-  SnackbarProps & AdaptivityContextInterface
-> = (props) => {
-  const {
-    children,
-    layout,
-    action,
-    before,
-    after,
-    viewWidth,
-    duration = 0,
-    onActionClick,
-    onClose,
-    ...restProps
-  } = props;
-
+const SnackbarComponent = ({
+  children,
+  layout = "horizontal",
+  action,
+  before,
+  after,
+  viewWidth,
+  duration = 4000,
+  onActionClick,
+  onClose,
+  ...restProps
+}: SnackbarProps & AdaptivityContextInterface) => {
   const platform = usePlatform();
 
   const { waitTransitionFinish } = useWaitTransitionFinish();
@@ -243,11 +239,6 @@ const SnackbarComponent: React.FC<
 
 SnackbarComponent.displayName = "Snackbar";
 
-SnackbarComponent.defaultProps = {
-  duration: 4000,
-  layout: "horizontal",
-};
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
  */

package/src/components/Spacing/Spacing.tsx

@@ -8,7 +8,7 @@ export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   size?: number;
   /**
-   * @deprecated Это свойство устарело и будет удалено в 5.0.0. Используйте [`Separator`](#/Separator) вместе с Spacing.
+   * @deprecated Это свойство устарело и будет удалено в 5.0.0. Используйте [`Separator`](https://vkcom.github.io/VKUI/#/Separator) вместе с Spacing.
    * Настройка положения сепаратора:
    *
    * - separator=false (default) - без сепаратора

package/src/components/SplitCol/SplitCol.tsx

@@ -32,18 +32,17 @@ export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */
-export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
-  const {
-    children,
-    width,
-    maxWidth,
-    minWidth,
-    spaced,
-    animate = false,
-    fixed,
-    style,
-    ...restProps
-  } = props;
+export const SplitCol = ({
+  children,
+  width,
+  maxWidth,
+  minWidth,
+  spaced,
+  animate = false,
+  fixed,
+  style,
+  ...restProps
+}: SplitColProps) => {
   const baseRef = React.useRef<HTMLDivElement>(null);
 
   const fixedInnerRef = React.useRef<HTMLDivElement>(null);

package/src/components/SplitLayout/SplitLayout.tsx

@@ -24,7 +24,7 @@ export interface SplitLayoutProps
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
  */
-export const SplitLayout: React.FC<SplitLayoutProps> = ({
+export const SplitLayout = ({
   popout,
   modal,
   header,

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -28,7 +28,7 @@ const defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
  */
-export const SubnavigationBar: React.FC<SubnavigationBarProps> = ({
+export const SubnavigationBar = ({
   mode = "overflow",
   children,
   showArrows = true,

package/src/components/SubnavigationButton/Readme.md

@@ -1,4 +1,4 @@
-Компонент, используемый в качестве кнопок в [SubnavigationBar](#/SubnavigationBar).
+Компонент, используемый в качестве кнопок в [SubnavigationBar](https://vkcom.github.io/VKUI/#/SubnavigationBar).
 
 Этот компонент может использоваться:
 

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { HasComponent } from "../../types";
+import { HasComponent, HasChildren } from "../../types";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { getTitleFromChildren, hasReactNode } from "../../lib/utils";
@@ -29,9 +29,10 @@ export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
 }
 
 type SubnavButtonTypographyProps = Pick<SubnavigationButtonProps, "textLevel"> &
-  HasComponent;
+  HasComponent &
+  HasChildren;
 
-const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({
+const SubnavigationButtonTypography = ({
   textLevel,
   ...restProps
 }: SubnavButtonTypographyProps) => {
@@ -45,20 +46,17 @@ const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
  */
-export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (
-  props: SubnavigationButtonProps
-) => {
+export const SubnavigationButton = ({
+  size = "m",
+  selected,
+  textLevel = 1,
+  before,
+  after,
+  expandable,
+  children,
+  ...restProps
+}: SubnavigationButtonProps) => {
   const platform = usePlatform();
-  const {
-    size,
-    selected,
-    textLevel,
-    before,
-    after,
-    expandable,
-    children,
-    ...restProps
-  } = props;
 
   return (
     <Tappable
@@ -96,8 +94,3 @@ export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (
     </Tappable>
   );
 };
-
-SubnavigationButton.defaultProps = {
-  size: "m",
-  textLevel: 1,
-};

package/src/components/Switch/Switch.css

@@ -43,7 +43,7 @@
   border-radius: 50%;
   box-sizing: border-box;
   background: var(--vkui--color_icon_contrast_secondary);
-  box-shadow: 0 0 2px 0 rgb(0 0 0 / 12%), 0 2px 2px 0 rgb(0 0 0 / 24%);
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
 
   /* Делаем пин по центру */
   top: calc(
@@ -133,8 +133,8 @@
  */
 .Switch--ios .Switch__pseudo::before {
   background: var(--white);
-  box-shadow: 0 3px 8px rgb(0 0 0 / 15%), 0 3px 1px rgb(0 0 0 / 6%),
-    inset 0 0 0 0.5px rgb(0 0 0 / 4%);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06),
+    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
 }
 
 .Switch--ios .Switch__self:checked + .Switch__pseudo::before {

package/src/components/Switch/Switch.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { callMultiple } from "../../lib/callMultiple";
@@ -20,7 +19,7 @@ export interface SwitchProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */
-export const Switch: React.FC<SwitchProps> = ({
+export const Switch = ({
   style,
   className,
   getRootRef,

package/src/components/Tabbar/Tabbar.css

@@ -7,7 +7,10 @@
   height: var(--tabbar_height);
   padding-bottom: var(--safe-area-inset-bottom);
   box-sizing: content-box;
-  background: var(--header_alternate_background);
+  background: var(
+    --header_alternate_background,
+    var(--vkui--color_background_tertiary)
+  );
 }
 
 .Tabbar__in {
@@ -16,10 +19,18 @@
   overflow: hidden;
 }
 
+.Tabbar--shadow {
+  box-shadow: var(--vkui--elevation3);
+}
+
 /**
  * iOS
  */
 
+.Tabbar--ios.Tabbar--shadow {
+  box-shadow: none;
+}
+
 .Tabbar--ios.Tabbar--shadow::before {
   position: absolute;
   bottom: 100%;
@@ -42,12 +53,3 @@
     transform: scaleY(0.33);
   }
 }
-
-/**
- * Android & VKCOM
- */
-
-.Tabbar--android.Tabbar--shadow,
-.Tabbar--vkcom.Tabbar--shadow {
-  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-}