@vkontakte/vkui 4.34.1 → 4.35.1

package/src/components/HorizontalCell/HorizontalCell.css

@@ -12,20 +12,32 @@
 }
 
 .HorizontalCell__content {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   word-break: break-all;
   text-overflow: ellipsis;
 }
 
 .HorizontalCell__subtitle {
-  color: var(--text_secondary);
-  line-height: 18px;
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
+}
+
+.HorizontalCell__content .HorizontalCell__subtitle {
+  margin-top: 2px;
 }
 
 .HorizontalCell--s {
   max-width: 80px;
 }
 
+.HorizontalCell__image {
+  padding: 4px 6px;
+}
+
+.HorizontalCell__content {
+  padding: 2px 6px 8px;
+  text-align: left;
+}
+
 .HorizontalCell--s .HorizontalCell__image {
   padding: 4px 8px;
 }
@@ -43,53 +55,23 @@
   width: auto;
 }
 
-.HorizontalCell--m .HorizontalCell__image,
-.HorizontalCell--l .HorizontalCell__image {
-  padding: 4px 6px;
-}
-
-.HorizontalCell--m .HorizontalCell__content,
-.HorizontalCell--l .HorizontalCell__content {
-  padding: 2px 6px 8px;
-  text-align: left;
-}
-
-/* iOS */
-.HorizontalCell--ios:first-child::before,
-.HorizontalCell--ios:last-child::after {
+.HorizontalCell:first-child::before,
+.HorizontalCell:last-child::after {
   content: "";
-  min-width: 4px;
+  min-width: 10px;
 }
 
-.HorizontalCell--ios.HorizontalCell--s:first-child,
-.HorizontalCell--ios.HorizontalCell--s:last-child {
-  max-width: 88px;
-}
-
-.HorizontalCell--ios.HorizontalCell--m:first-child,
-.HorizontalCell--ios.HorizontalCell--m:last-child {
-  width: 106px;
-}
-
-/* Android and vkcom */
-.HorizontalCell--android:first-child::before,
-.HorizontalCell--android:last-child::after,
-.HorizontalCell--vkcom:first-child::before,
-.HorizontalCell--vkcom:last-child::after {
-  content: "";
+.HorizontalCell--s:first-child::before,
+.HorizontalCell--s:last-child::after {
   min-width: 8px;
 }
 
-.HorizontalCell--android.HorizontalCell--s:first-child,
-.HorizontalCell--android.HorizontalCell--s:last-child,
-.HorizontalCell--vkcom.HorizontalCell--s:first-child,
-.HorizontalCell--vkcom.HorizontalCell--s:last-child {
+.HorizontalCell--s:first-child,
+.HorizontalCell--s:last-child {
   max-width: 88px;
 }
 
-.HorizontalCell--android.HorizontalCell--m:first-child,
-.HorizontalCell--android.HorizontalCell--m:last-child,
-.HorizontalCell--vkcom.HorizontalCell--m:first-child,
-.HorizontalCell--vkcom.HorizontalCell--m:last-child {
-  width: 116px;
+.HorizontalCell--m:first-child,
+.HorizontalCell--m:last-child {
+  width: 110px;
 }

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
 import { Tappable } from "../Tappable/Tappable";
 import { Subhead } from "../Typography/Subhead/Subhead";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { Avatar } from "../Avatar/Avatar";
 import { HasComponent, HasRef, HasRootRef } from "../../types";
 import "./HorizontalCell.css";
@@ -53,14 +52,9 @@ export const HorizontalCell = ({
   getRef,
   ...restProps
 }: HorizontalCellProps) => {
-  const platform = usePlatform();
-
   return (
     <div
-      vkuiClass={classNames(
-        getClassName("HorizontalCell", platform),
-        `HorizontalCell--${size}`
-      )}
+      vkuiClass={classNames("HorizontalCell", `HorizontalCell--${size}`)}
       ref={getRootRef}
       style={style}
       className={className}
@@ -80,7 +74,7 @@ export const HorizontalCell = ({
             </CellTypography>
           )}
           {hasReactNode(subtitle) && (
-            <Caption vkuiClass="HorizontalCell__subtitle">{subtitle}</Caption>
+            <Footnote vkuiClass="HorizontalCell__subtitle">{subtitle}</Footnote>
           )}
         </div>
       </Tappable>

package/src/components/HorizontalScroll/HorizontalScroll.css

@@ -38,3 +38,26 @@
   .HorizontalScroll__in-wrapper {
   transform: translateX(-8px);
 }
+
+/**
+ * CMP:
+ * Tabs
+ */
+.Tabs .HorizontalScroll {
+  min-width: 100%;
+}
+
+.Tabs__in .HorizontalScroll__in-wrapper {
+  display: flex;
+  align-items: stretch;
+}
+
+/* TODO v5.0.0 новая адаптивность */
+.Tabs--sizeX-compact.Tabs--withGaps .HorizontalScroll__in-wrapper::after,
+.Tabs--sizeX-compact.Tabs--withGaps .HorizontalScroll__in-wrapper::before {
+  display: block;
+  width: 8px;
+  flex-shrink: 0;
+  height: 1px;
+  content: "";
+}

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -241,3 +241,5 @@ const HorizontalScrollComponent = ({
 export const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
   hasMouse: true,
 });
+
+HorizontalScroll.displayName = "HorizontalScroll";

package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import {
   Icon24Chevron,
-  Icon24ChevronLeft,
+  Icon24ChevronCompactLeft,
   Icon16Chevron,
   Icon16ChevronLeft,
 } from "@vkontakte/icons";
@@ -29,7 +29,7 @@ export const HorizontalScrollArrow = ({
   if (size === "m") {
     ArrowIcon = direction === "left" ? Icon16ChevronLeft : Icon16Chevron;
   } else {
-    ArrowIcon = direction === "left" ? Icon24ChevronLeft : Icon24Chevron;
+    ArrowIcon = direction === "left" ? Icon24ChevronCompactLeft : Icon24Chevron;
   }
 
   return (

package/src/components/Input/Input.css

@@ -54,6 +54,8 @@
 
 .Input__el::placeholder {
   color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
+  /* Для Firefox */
+  opacity: 1;
 }
 
 .Input__el:disabled::placeholder {

package/src/components/Input/Input.tsx

@@ -52,3 +52,5 @@ const InputComponent = ({
 export const Input = withAdaptivity(InputComponent, {
   sizeY: true,
 });
+
+Input.displayName = "Input";

package/src/components/MiniInfoCell/MiniInfoCell.css

@@ -13,7 +13,7 @@
 
 .MiniInfoCell__icon {
   margin-right: 12px;
-  color: var(--icon_outline_secondary, var(--vkui--color_icon_medium));
+  color: var(--icon_outline_secondary, var(--vkui--color_icon_secondary));
 }
 
 .MiniInfoCell__content {
@@ -43,12 +43,22 @@
   margin-bottom: -2px;
 }
 
-.MiniInfoCell--md-add,
+/**
+* TODO Когда избавимся от appearance токенов - объединить классы
+ */
+
+.MiniInfoCell--md-add {
+  color: var(--accent, var(--vkui--color_text_link));
+}
+
 .MiniInfoCell--md-add .MiniInfoCell__icon {
   color: var(--accent, var(--vkui--color_icon_accent));
 }
 
-.MiniInfoCell--md-more,
+.MiniInfoCell--md-more {
+  color: var(--link_alternate, var(--vkui--color_text_link));
+}
+
 .MiniInfoCell--md-more .MiniInfoCell__icon {
   color: var(--link_alternate, var(--vkui--color_icon_accent));
 }

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { Text } from "../Typography/Text/Text";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import { Tappable } from "../Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import "./MiniInfoCell.css";
@@ -75,12 +75,12 @@ export const MiniInfoCell = ({
       )}
     >
       <span vkuiClass="MiniInfoCell__icon">{before}</span>
-      <Text
+      <Paragraph
         vkuiClass="MiniInfoCell__content"
         weight={mode === "more" ? "2" : undefined}
       >
         {children}
-      </Text>
+      </Paragraph>
       {hasReactNode(after) && (
         <span vkuiClass="MiniInfoCell__after">{after}</span>
       )}

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -145,3 +145,5 @@ export const ModalCardBase = withAdaptivity<
     hasMouse: true,
   }
 );
+
+ModalCardBase.displayName = "ModalCardBase";

package/src/components/NativeSelect/NativeSelect.tsx

@@ -107,3 +107,5 @@ export const NativeSelect = withAdaptivity(NativeSelectComponent, {
   sizeX: true,
   sizeY: true,
 });
+
+NativeSelect.displayName = "NativeSelect";

package/src/components/Panel/Panel.tsx

@@ -60,3 +60,5 @@ export const Panel = withAdaptivity<PanelProps & AdaptivityContextInterface>(
     sizeX: true,
   }
 );
+
+Panel.displayName = "Panel";

package/src/components/PanelHeader/PanelHeader.tsx

@@ -171,3 +171,5 @@ export const PanelHeader = withAdaptivity(PanelHeaderComponent, {
   sizeX: true,
   sizeY: true,
 });
+
+PanelHeader.displayName = "PanelHeader";

package/src/components/Popper/Popper.css

@@ -14,38 +14,3 @@
 .Popper {
   z-index: 100;
 }
-
-.Popper__arrow-in {
-  content: "";
-  display: block;
-  width: 20px;
-  height: 8px;
-}
-
-[data-popper-placement^="bottom"] .Popper__arrow {
-  bottom: 100%;
-}
-
-[data-popper-placement^="top"] .Popper__arrow {
-  top: 100%;
-}
-
-[data-popper-placement^="top"] .Popper__arrow-in {
-  transform: rotate(180deg);
-}
-
-[data-popper-placement^="left"] .Popper__arrow {
-  left: calc(100% - 6px);
-}
-
-[data-popper-placement^="left"] .Popper__arrow-in {
-  transform: rotate(90deg);
-}
-
-[data-popper-placement^="right"] .Popper__arrow {
-  right: calc(100% - 6px);
-}
-
-[data-popper-placement^="right"] .Popper__arrow-in {
-  transform: rotate(270deg);
-}

package/src/components/Popper/Popper.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { usePopper, Modifier } from "react-popper";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { PopperArrow } from "../PopperArrow/PopperArrow";
 import { HasRef } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
@@ -25,6 +26,10 @@ export type Placement =
   | "left"
   | "right";
 
+export interface PopperRenderContentProps {
+  className: string;
+}
+
 export interface PopperCommonProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRef<HTMLDivElement> {
@@ -40,7 +45,13 @@ export interface PopperCommonProps
    * Отступ по главной оси
    */
   offsetDistance?: number;
+  /**
+   * Отображать ли стрелку, указывающую на якорный элемент
+   */
   arrow?: boolean;
+  /**
+   * Стиль стрелки
+   */
   arrowClassName?: string;
   /**
    * Выставлять ширину равной target элементу
@@ -52,6 +63,14 @@ export interface PopperCommonProps
    * Массив кастомных модификаторов для Popper (необходимо мемоизировать)
    */
   customModifiers?: Array<Modifier<string>>;
+  /**
+   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.
+   *
+   * Если хочется управлять этим контейнером, то используйте данную функцию.
+   *
+   * > ⚠️ Параметр `children` будет проигнорирован.
+   */
+  renderContent?(props: PopperRenderContentProps): React.ReactNode;
 }
 
 export interface PopperProps extends PopperCommonProps {
@@ -78,7 +97,8 @@ export const Popper = ({
   offsetSkidding = 0,
   forcePortal = true,
   style: compStyles,
-  customModifiers = [],
+  customModifiers,
+  renderContent,
   ...restProps
 }: PopperProps) => {
   const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(
@@ -140,7 +160,9 @@ export const Popper = ({
       modifiers.push(sameWidth);
     }
 
-    modifiers.push(...customModifiers);
+    if (customModifiers) {
+      modifiers.push(...customModifiers);
+    }
     return modifiers;
   }, [
     arrow,
@@ -208,31 +230,17 @@ export const Popper = ({
       }}
     >
       {arrow && (
-        <div
-          {...attributes.arrow}
-          vkuiClass="Popper__arrow"
-          data-popper-arrow={true}
+        <PopperArrow
+          attributes={attributes.arrow}
           style={styles.arrow}
-        >
-          <svg
-            vkuiClass="Popper__arrow-in"
-            className={arrowClassName}
-            width="20"
-            height="8"
-            viewBox="0 0 20 8"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
+          arrowClassName={arrowClassName}
+        />
+      )}
+      {renderContent ? (
+        renderContent({ className: "Popper__content" })
+      ) : (
+        <div vkuiClass="Popper__content">{children}</div>
       )}
-      <div vkuiClass="Popper__content">{children}</div>
     </div>
   );
 

package/src/components/PopperArrow/PopperArrow.css

@@ -0,0 +1,34 @@
+.PopperArrow__in {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 8px;
+}
+
+[data-popper-placement^="bottom"] .PopperArrow {
+  bottom: 100%;
+}
+
+[data-popper-placement^="top"] .PopperArrow {
+  top: 100%;
+}
+
+[data-popper-placement^="top"] .PopperArrow__in {
+  transform: rotate(180deg);
+}
+
+[data-popper-placement^="left"] .PopperArrow {
+  left: calc(100% - 6px);
+}
+
+[data-popper-placement^="left"] .PopperArrow__in {
+  transform: rotate(90deg);
+}
+
+[data-popper-placement^="right"] .PopperArrow {
+  right: calc(100% - 6px);
+}
+
+[data-popper-placement^="right"] .PopperArrow__in {
+  transform: rotate(270deg);
+}

package/src/components/PopperArrow/PopperArrow.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import "./PopperArrow.css";
+
+export interface PopperArrowProps {
+  style?: React.CSSProperties;
+  attributes?: React.HTMLAttributes<HTMLDivElement> | null;
+  arrowClassName?: string;
+}
+
+export const PopperArrow = ({
+  style,
+  attributes,
+  arrowClassName,
+}: PopperArrowProps) => {
+  return (
+    <div
+      style={style}
+      {...attributes}
+      vkuiClass="PopperArrow"
+      data-popper-arrow={true}
+    >
+      <svg
+        vkuiClass="PopperArrow__in"
+        className={arrowClassName}
+        width="20"
+        height="8"
+        viewBox="0 0 20 8"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  );
+};

package/src/components/Radio/Radio.tsx

@@ -99,3 +99,5 @@ const RadioComponent = ({
 export const Radio = withAdaptivity(RadioComponent, {
   sizeY: true,
 });
+
+Radio.displayName = "Radio";

package/src/components/RangeSlider/UniversalSlider.tsx

@@ -157,3 +157,5 @@ const UniversalSliderDumb = ({
 export const UniversalSlider = withAdaptivity(UniversalSliderDumb, {
   sizeY: true,
 });
+
+UniversalSlider.displayName = "UniversalSlider";

package/src/components/RichTooltip/RichTooltip.css

@@ -1,10 +1,50 @@
 .RichTooltip {
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 4px 32px rgba(0, 0, 0, 0.16);
-  border-radius: 8px;
-  background: var(--background_content);
+  box-shadow: var(--vkui--elevation3);
+  border-radius: var(--vkui--size_border_radius--regular);
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_modal)
+  );
   animation: vkui-popper-fadein 0.2s ease;
+  color: var(--vkui--color_text_primary);
 }
 
 .RichTooltip__arrow {
-  color: var(--background_content);
+  color: var(--background_content, var(--vkui--color_background_modal));
+}
+
+.RichTooltip--accent {
+  background-color: var(--vkui--color_background_accent_tint);
+  color: var(--vkui--color_text_contrast);
+}
+
+.RichTooltip--accent .RichTooltip__arrow {
+  color: var(--vkui--color_background_accent_tint);
+}
+
+.RichTooltip--white {
+  background-color: var(--vkui--color_background_contrast);
+  color: var(--vkui--color_text_primary_invariably);
+}
+
+.RichTooltip--white .RichTooltip__arrow {
+  color: var(--vkui--color_background_contrast);
+}
+
+.RichTooltip--black {
+  background-color: var(--vkui--color_background_contrast_inverse);
+  color: var(--vkui--color_text_contrast);
+}
+
+.RichTooltip--black .RichTooltip__arrow {
+  color: var(--vkui--color_background_contrast_inverse);
+}
+
+.RichTooltip--inversion {
+  background-color: var(--vkui--color_background_modal_inverse);
+  color: var(--vkui--color_text_contrast_themed);
+}
+
+.RichTooltip--inversion .RichTooltip__arrow {
+  color: var(--vkui--color_background_modal_inverse);
 }

package/src/components/RichTooltip/RichTooltip.tsx

@@ -1,12 +1,15 @@
 import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useAppearance } from "../../hooks/useAppearance";
 import { classNames } from "../../lib/classNames";
 import { prefixClass } from "../../lib/prefixClass";
 import "./RichTooltip.css";
 
-export type RichTooltipProps = Omit<HoverPopperProps, "arrowClassName">;
+export interface RichTooltipProps
+  extends Omit<HoverPopperProps, "arrowClassName"> {
+  /**
+   * Стиль отображения подсказки
+   */
+  appearance?: "accent" | "neutral" | "white" | "black" | "inversion";
+}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip
@@ -14,17 +17,12 @@ export type RichTooltipProps = Omit<HoverPopperProps, "arrowClassName">;
 export const RichTooltip = ({
   children,
   arrow = true,
+  appearance = "neutral",
   ...popperProps
 }: RichTooltipProps) => {
-  const platform = usePlatform();
-  const appearance = useAppearance();
-
   return (
     <HoverPopper
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("RichTooltip", platform), {
-        [`RichTooltip--${appearance}`]: !!appearance,
-      })}
+      vkuiClass={classNames("RichTooltip", `RichTooltip--${appearance}`)}
       arrow={arrow}
       arrowClassName={prefixClass("RichTooltip__arrow")}
       {...popperProps}

package/src/components/Select/Select.tsx

@@ -85,3 +85,5 @@ const SelectComponent = ({
 export const Select = withAdaptivity(SelectComponent, {
   hasMouse: true,
 });
+
+Select.displayName = "Select";

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -79,3 +79,5 @@ export const SelectMimicry = withAdaptivity(SelectMimicryComponent, {
   sizeX: true,
   sizeY: true,
 });
+
+SelectMimicry.displayName = "SelectMimicry";