@vkontakte/vkui 4.34.0 → 4.35.0

package/src/components/Input/Input.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { FormField, FormFieldProps } from "../FormField/FormField";
 import { HasAlign, HasRef, HasRootRef } from "../../types";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
-import { usePlatform } from "../../hooks/usePlatform";
 import "./Input.css";
 
 export interface InputProps
@@ -27,13 +25,14 @@ const InputComponent = ({
   after,
   ...restProps
 }: InputProps) => {
-  const platform = usePlatform();
   return (
     <FormField
       vkuiClass={classNames(
-        getClassName("Input", platform),
+        "Input",
         !!align && `Input--${align}`,
-        `Input--sizeY-${sizeY}`
+        `Input--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность
+        before && "Input--hasBefore",
+        after && "Input--hasAfter"
       )}
       style={style}
       className={className}
@@ -53,3 +52,5 @@ const InputComponent = ({
 export const Input = withAdaptivity(InputComponent, {
   sizeY: true,
 });
+
+Input.displayName = "Input";

package/src/components/Input/Readme.md

@@ -1,34 +1,77 @@
 Надстройка над `<input type="text" />`. Компонент принимает все валидные для этого элемента свойства.
 
-```jsx
-const textInput = React.createRef();
-const clear = () => (textInput.current.value = "");
-
-<View activePanel="input">
-  <Panel id="input">
-    <PanelHeader>Input</PanelHeader>
-    <Group>
-      <FormItem top="Фамилия">
-        <Input type="text" defaultValue="Петров" />
-      </FormItem>
-      <FormItem>
-        <Input type="text" defaultValue="Иванов" align="center" />
-      </FormItem>
-      <FormItem>
-        <Input type="text" defaultValue="Сидоров" align="right" />
+```jsx { "props": { "layout": false, "iframe": false } }
+const ExampleBase = ({ formItemStatus }) => {
+  const [before, setBefore] = useState(undefined);
+  const [after, setAfter] = useState(undefined);
+  const [align, setAlign] = useState("left");
+  const [disabled, setDisabled] = useState(false);
+
+  return (
+    <FormLayout>
+      <FormItem top="align">
+        <Select
+          value={align}
+          onChange={(e) => setAlign(e.target.value)}
+          options={[
+            { label: "left", value: "left" },
+            { label: "center", value: "center" },
+            { label: "right", value: "right" },
+          ]}
+        />
       </FormItem>
-      <FormItem top="С иконкой">
+      <Checkbox
+        description="Icon24WalletOutline for example"
+        checked={!!before}
+        onChange={(e) =>
+          e.target.checked
+            ? setBefore(<Icon24WalletOutline />)
+            : setBefore(undefined)
+        }
+      >
+        before
+      </Checkbox>
+      <Checkbox
+        description="Icon20User for example"
+        checked={!!after}
+        onChange={(e) =>
+          e.target.checked ? setAfter(<Icon20User />) : setAfter(undefined)
+        }
+      >
+        after
+      </Checkbox>
+      <Checkbox
+        checked={disabled}
+        onChange={(e) => setDisabled(e.target.checked)}
+      >
+        disabled
+      </Checkbox>
+      <FormItem top="📝 Пример" status={formItemStatus}>
         <Input
+          before={before}
+          after={after}
           type="text"
-          defaultValue="Смирнов"
-          after={<Icon20User aria-hidden="true" />}
+          align={align}
+          defaultValue="Lorem ipsum dolor sit amet"
+          disabled={disabled}
         />
       </FormItem>
-      <FormItem top="С IconButton">
+    </FormLayout>
+  );
+};
+
+const ExampleWithIcon = ({ formItemStatus }) => {
+  const textInput = React.createRef();
+  const clear = () => (textInput.current.value = "");
+
+  return (
+    <FormLayout>
+      <FormItem top="📝 Пример с кликабельной иконкой" status={formItemStatus}>
         <Input
           getRef={textInput}
           type="text"
-          defaultValue="Кузнецов"
+          placeholder="Ну ведь брокколи это вкусно и полезно 😢"
+          defaultValue="Брокколи 🥦"
           after={
             <IconButton
               hoverMode="opacity"
@@ -40,7 +83,68 @@ const clear = () => (textInput.current.value = "");
           }
         />
       </FormItem>
-    </Group>
-  </Panel>
-</View>;
+    </FormLayout>
+  );
+};
+
+const Example = () => {
+  const [sizeY, setSizeY] = useState("regular");
+  const [formItemStatus, setFormItemStatus] = useState("default");
+
+  return (
+    <AdaptivityProvider sizeY={sizeY}>
+      <div style={rootContainerStyles}>
+        <div style={demoContainerStyles}>
+          <ExampleBase formItemStatus={formItemStatus} />
+          <Spacing size={16} />
+          <Separator />
+          <Spacing size={16} />
+          <ExampleWithIcon formItemStatus={formItemStatus} />
+        </div>
+
+        <div style={propsContainerStyles}>
+          <FormItem top="AdaptivityProvider[sizeY]">
+            <Select
+              value={sizeY}
+              onChange={(e) => setSizeY(e.target.value)}
+              options={[
+                { label: "compact", value: "compact" },
+                { label: "regular", value: "regular" },
+              ]}
+            />
+          </FormItem>
+          <FormItem top="FormItem[status]">
+            <Select
+              value={formItemStatus}
+              onChange={(e) => setFormItemStatus(e.target.value)}
+              options={[
+                { label: "default", value: "default" },
+                { label: "error", value: "error" },
+                { label: "valid", value: "valid" },
+              ]}
+            />
+          </FormItem>
+        </div>
+      </div>
+    </AdaptivityProvider>
+  );
+};
+
+const rootContainerStyles = {
+  display: "flex",
+  flexDirection: "row-reverse",
+  flexWrap: "wrap",
+};
+
+const demoContainerStyles = {
+  flexGrow: 2,
+  minWidth: 320,
+};
+
+const propsContainerStyles = {
+  minWidth: 200,
+  marginRight: "auto",
+};
+
+<Example />;
 ```

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/ScreenSpinner/ScreenSpinner.css

@@ -22,7 +22,7 @@
   background: var(--tabbar_background, var(--vkui--color_background_modal));
   box-shadow: var(--vkui--elevation4);
   border-radius: var(--vkui--size_border_radius--regular);
-  color: var(--overlay_status_icon, --vkui--color_icon_medium);
+  color: var(--overlay_status_icon, var(--vkui--color_icon_medium));
 }
 
 .ScreenSpinner__icon {

package/src/components/Select/Select.css

@@ -21,7 +21,8 @@
 .Select__container {
   flex-grow: 1;
   flex-shrink: 1;
-  padding: 7px 11px;
+  padding-right: 12px;
+  padding-left: 12px;
   color: var(--text_primary, var(--vkui--color_text_primary));
   box-sizing: border-box;
   position: relative;
@@ -29,6 +30,27 @@
   overflow: hidden;
 }
 
+.Select--hasBefore .Select__container {
+  padding-left: 0;
+}
+
+.Select--hasAfter .Select__container {
+  padding-right: 0;
+}
+
+.Select--multiline .Select__container {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+/**
+ * TODO v5.0.0 поправить под новую адаптивность
+ */
+.Select--sizeY-compact.Select--multiline .Select__container {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
 .Select__title {
   display: block;
 }
@@ -51,14 +73,6 @@
   text-align: center;
 }
 
-/**
- * sizeY REGULAR
- * TODO v5.0.0 поправить под новую адаптивность
- */
-.Select--sizeY-regular .Select__container {
-  padding: 11px;
-}
-
 /**
  * CMP:
  * CalendarHeader