@vkontakte/vkui 4.32.0 → 4.33.0

package/src/components/Textarea/Textarea.css

@@ -11,29 +11,33 @@
   appearance: none;
   line-height: 20px;
   font-size: 16px;
-  color: var(--text_primary);
-  padding: 11px;
-  max-height: 196px;
+  color: var(--text_primary, var(--vkui--color_text_primary));
+  padding: 12px;
+  max-height: 204px;
   border: none;
   z-index: 2;
   position: relative;
   background: transparent;
 }
 
+.Textarea__el[cols] {
+  width: initial;
+}
+
+/* TODO. v5.0.0 Новая адаптивность */
 .Textarea--sizeY-compact .Textarea__el {
-  padding-top: 7px;
-  padding-bottom: 7px;
   font-size: 15px;
+  max-height: 196px;
 }
 
 .Textarea__el::placeholder {
-  color: var(--field_text_placeholder);
+  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
 }
 
 .Textarea__el:disabled {
-  opacity: 0.4;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .Textarea__el:disabled::placeholder {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }

package/src/components/Textarea/Textarea.tsx

@@ -3,17 +3,16 @@ import { classNames } from "../../lib/classNames";
 import { FormField } from "../FormField/FormField";
 import { HasRef, HasRootRef } from "../../types";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
-import { getClassName } from "../../helpers/getClassName";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
 import "./Textarea.css";
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
     HasRef<HTMLTextAreaElement>,
     HasRootRef<HTMLElement>,
-    AdaptivityProps {
+    AdaptivityProps,
+    Pick<React.CSSProperties, "maxHeight"> {
   grow?: boolean;
   onResize?(el: HTMLTextAreaElement): void;
   defaultValue?: string;
@@ -22,62 +21,62 @@ export interface TextareaProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */
-const Textarea: React.FC<TextareaProps> = React.memo(
-  ({
-    defaultValue = "",
-    grow = true,
-    style,
-    onResize,
-    className,
-    getRootRef,
-    getRef,
-    sizeY,
-    rows = 2,
-    ...restProps
-  }: TextareaProps) => {
-    const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
-    const currentScrollHeight = React.useRef<number>();
-    const elementRef = useExternRef(getRef);
-    const platform = usePlatform();
+const TextareaComponent: React.FC<TextareaProps> = ({
+  defaultValue = "",
+  grow = true,
+  style,
+  onResize,
+  className,
+  getRootRef,
+  getRef,
+  sizeY,
+  rows = 2,
+  maxHeight,
+  ...restProps
+}: TextareaProps) => {
+  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
+  const currentScrollHeight = React.useRef<number>();
+  const elementRef = useExternRef(getRef);
 
-    // autosize input
-    React.useEffect(() => {
-      const el = elementRef.current;
+  // autosize input
+  React.useEffect(() => {
+    const el = elementRef.current;
 
-      if (grow && el?.offsetParent) {
-        el.style.height = "";
-        el.style.height = `${el.scrollHeight}px`;
+    if (grow && el?.offsetParent) {
+      el.style.height = "";
+      el.style.height = `${el.scrollHeight}px`;
 
-        if (el.scrollHeight !== currentScrollHeight.current && onResize) {
-          onResize(el);
-          currentScrollHeight.current = el.scrollHeight;
-        }
+      if (el.scrollHeight !== currentScrollHeight.current && onResize) {
+        onResize(el);
+        currentScrollHeight.current = el.scrollHeight;
       }
-    }, [grow, value, sizeY, elementRef, onResize]);
+    }
+  }, [grow, value, sizeY, elementRef, onResize]);
 
-    return (
-      <FormField
-        vkuiClass={classNames(
-          getClassName("Textarea", platform),
-          `Textarea--sizeY-${sizeY}`
-        )}
-        className={className}
-        style={style}
-        getRootRef={getRootRef}
-        disabled={restProps.disabled}
-      >
-        <textarea
-          {...restProps}
-          rows={rows}
-          vkuiClass="Textarea__el"
-          value={value}
-          onChange={onChange}
-          ref={elementRef}
-        />
-      </FormField>
-    );
-  }
-);
+  return (
+    <FormField
+      vkuiClass={classNames(
+        "Textarea",
+        // TODO. v5.0.0 Новая адаптивность
+        `Textarea--sizeY-${sizeY}`
+      )}
+      className={className}
+      style={style}
+      getRootRef={getRootRef}
+      disabled={restProps.disabled}
+    >
+      <textarea
+        {...restProps}
+        style={{ maxHeight }}
+        rows={rows}
+        vkuiClass="Textarea__el"
+        value={value}
+        onChange={onChange}
+        ref={elementRef}
+      />
+    </FormField>
+  );
+};
 
 // eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Textarea, { sizeY: true });
+export const Textarea = withAdaptivity(TextareaComponent, { sizeY: true });

package/src/components/Tooltip/Tooltip.tsx

@@ -155,9 +155,9 @@ function isVerticalPlacement(placement: Placement) {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-const Tooltip: React.FC<TooltipProps> = ({
+export const Tooltip: React.FC<TooltipProps> = ({
   children,
-  isShown: _isShown,
+  isShown: _isShown = true,
   offsetX = 0,
   offsetY = 15,
   alignX,
@@ -165,6 +165,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   onClose,
   cornerOffset = 0,
   cornerAbsoluteOffset,
+  mode = "accent",
   ...restProps
 }) => {
   const { entering } = useNavTransition();
@@ -293,6 +294,7 @@ const Tooltip: React.FC<TooltipProps> = ({
         ReactDOM.createPortal(
           <SimpleTooltip
             {...restProps}
+            mode={mode}
             ref={(el) => setTooltipRef(el)}
             arrowRef={(el) => setTooltipArrowRef(el)}
             style={{ arrow: styles.arrow, container: styles.popper }}
@@ -306,13 +308,3 @@ const Tooltip: React.FC<TooltipProps> = ({
     </React.Fragment>
   );
 };
-
-Tooltip.defaultProps = {
-  offsetX: 0,
-  offsetY: 15,
-  cornerOffset: 0,
-  isShown: true,
-  mode: "accent",
-};
-// eslint-disable-next-line import/no-default-export
-export default Tooltip;

package/src/components/UsersStack/Readme.md

@@ -53,7 +53,6 @@
             getAvatarUrl("user_xyz"),
           ]}
           size="m"
-          count={3}
           layout="vertical"
         >
           Алексей, Илья, Михаил

package/src/components/UsersStack/UsersStack.css

@@ -1,27 +1,30 @@
 .UsersStack {
   display: flex;
   align-items: center;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 .UsersStack__photos {
   display: flex;
 }
 
-.UsersStack__photo {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  border-radius: 50%;
-  background-color: var(--placeholder_icon_background);
+.UsersStack__fill {
+  fill: var(
+    --placeholder_icon_background,
+    var(--vkui--color_image_placeholder_alpha)
+  );
 }
 
 .UsersStack__photo--others {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
-  background: var(--content_placeholder_icon);
+  color: var(--vkui--color_icon_contrast_secondary);
+  background: var(
+    --content_placeholder_icon,
+    var(--vkui--color_icon_secondary)
+  );
+  border-radius: 50%;
 }
 
 .UsersStack--size-xs .UsersStack__photo {
@@ -43,27 +46,6 @@
   margin-left: -2px;
 }
 
-.UsersStack--size-xs .UsersStack__photo + .UsersStack__photo {
-  margin-left: -1px;
-  clip-path: url(#users_stack_mask_16_left);
-}
-
-.UsersStack--size-s .UsersStack__photo + .UsersStack__photo {
-  clip-path: url(#users_stack_mask_24_left);
-}
-
-.UsersStack--size-m .UsersStack__photo + .UsersStack__photo {
-  clip-path: url(#users_stack_mask_32_left);
-}
-
-.UsersStack--size-m.UsersStack--others .UsersStack__photo {
-  clip-path: url(#users_stack_mask_32_right);
-}
-
-.UsersStack--size-m.UsersStack--others .UsersStack__photo:last-child {
-  clip-path: none;
-}
-
 .UsersStack__text {
   min-width: 0;
   flex: 1;

package/src/components/UsersStack/UsersStack.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { Caption } from "../Typography/Caption/Caption";
-import { Subhead } from "../Typography/Subhead/Subhead";
 import { createMasks } from "./masks";
 import { useDOM } from "../../lib/dom";
 import "./UsersStack.css";
@@ -18,7 +16,7 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Размер аватарок
    */
-  size?: "xs" | "s" | "m";
+  size?: "xs" | "s" | "m"; // TODO: "s" | "m" | "l"
   /**
    * Вертикальный режим рекомендуется использовать с размером `m`
    */
@@ -33,16 +31,14 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/UsersStack
  */
-const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
-  const platform = usePlatform();
-  const {
-    photos = [],
-    visibleCount = 0,
-    size,
-    layout,
-    children,
-    ...restProps
-  } = props;
+export const UsersStack = ({
+  photos = [],
+  visibleCount = 3,
+  size = "s",
+  layout = "horizontal",
+  children,
+  ...restProps
+}: UsersStackProps) => {
   const { document } = useDOM();
 
   useIsomorphicLayoutEffect(() => {
@@ -50,57 +46,67 @@ const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
   }, [document]);
 
   const othersCount = Math.max(0, photos.length - visibleCount);
-  const canShowOthers = othersCount > 0 && size === "m";
+  const canShowOthers = othersCount > 0 && size !== "xs";
+  const CounterTypography = size === "m" ? Footnote : Caption;
+
+  const photoSize = {
+    xs: 16,
+    s: 24,
+    m: 32,
+  }[size];
+  const directionClip = canShowOthers ? "right" : "left";
 
   const photosShown = photos.slice(0, visibleCount);
 
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("UsersStack", platform),
+        "UsersStack",
         `UsersStack--size-${size}`,
         `UsersStack--l-${layout}`,
-        {
-          "UsersStack--others": canShowOthers,
-        }
+        canShowOthers && "UsersStack--others"
       )}
     >
       <div vkuiClass="UsersStack__photos" role="presentation">
-        {photosShown.map((photo, i) => (
-          <div
-            key={i}
-            vkuiClass="UsersStack__photo"
-            style={{ backgroundImage: `url(${photo})` }}
-          />
-        ))}
+        {photosShown.map((photo, i) => {
+          const direction =
+            i === 0 && !canShowOthers ? "circle" : directionClip;
+
+          const pathHref = `#users_stack_${photoSize}_${direction}`;
+          const clipPathHref = `url(#users_stack_mask_${photoSize}_${direction})`;
+
+          return (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              vkuiClass="UsersStack__photo"
+              key={i}
+              aria-hidden
+            >
+              <g clipPath={clipPathHref}>
+                <use vkuiClass="UsersStack__fill" href={pathHref} />
+                <image href={photo} width={photoSize} height={photoSize} />
+                <use href={pathHref} fill="none" stroke="rgba(0, 0, 0, 0.08)" />
+              </g>
+            </svg>
+          );
+        })}
 
         {canShowOthers && (
-          <Caption
+          <CounterTypography
+            caps
             weight="1"
+            level="2" // TODO: remove only level in #2343
             vkuiClass="UsersStack__photo UsersStack__photo--others"
-            aria-hidden="true"
+            aria-hidden
           >
             <span>+{othersCount}</span>
-          </Caption>
+          </CounterTypography>
         )}
       </div>
       {hasReactNode(children) && (
-        <Subhead Component="span" vkuiClass="UsersStack__text">
-          {children}
-        </Subhead>
+        <Footnote vkuiClass="UsersStack__text">{children}</Footnote>
       )}
     </div>
   );
 };
-
-UsersStack.defaultProps = {
-  photos: [],
-  size: "s",
-  visibleCount: 3,
-  layout: "horizontal",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(UsersStack);

package/src/components/UsersStack/masks.tsx

@@ -20,24 +20,47 @@ export function createMasks(document?: Document): void {
   svgElement.style.height = "0px";
 
   svgElement.innerHTML = `<defs>
+  <path id="users_stack_16_left" d="M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285" />
+  <circle id="users_stack_16_circle" cx="8" cy="8" r="8" />
+  
+  <path id="users_stack_24_left" d="M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625" />
+  <circle id="users_stack_24_circle" cx="12" cy="12" r="12" />
+  <path id="users_stack_24_right" d="M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625" />
+
+  <path id="users_stack_32_left" d="M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75" />
+  <circle id="users_stack_32_circle" cx="16" cy="16" r="16" />
+  <path id="users_stack_32_right" d="M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75" />
+
   <clipPath id="users_stack_mask_16_left">
-    <path transform="translate(1.5 0)" d="M1.20772 8C1.20772 6.32671 0.768742 4.75626 0 3.39821C1.44342 1.34278 3.8277 0 6.52463 0C10.9293 0 14.5 3.58172 14.5 8C14.5 12.4183 10.9293 16 6.52463 16C3.8277 16 1.44342 14.6572 0 12.6018C0.768742 11.2437 1.20772 9.6733 1.20772 8Z"></path>
+    <use href="#users_stack_16_left"/>
+  </clipPath>
+
+  <clipPath id="users_stack_mask_16_circle">
+    <use href="#users_stack_16_circle"/>
   </clipPath>
 
   <clipPath id="users_stack_mask_24_left">
-    <path d="M3.9971785,12 C3.9971785,9.49005736 3.33667467,7.13438366 2.18,5.09731189 C4.35181237,2.01417617 7.93927741,0 11.9971785,0 C18.6245955,0 23.9971785,5.372583 23.9971785,12 C23.9971785,18.627417 18.6245955,24 11.9971785,24 C7.93927741,24 4.35181237,21.9858238 2.18,18.9026881 C3.33667467,16.8656163 3.9971785,14.5099426 3.9971785,12 Z"></path>
+    <use href="#users_stack_24_left"/>
+  </clipPath>
+
+  <clipPath id="users_stack_mask_24_circle">
+    <use href="#users_stack_24_circle"/>
   </clipPath>
 
   <clipPath id="users_stack_mask_24_right">
-    <path d="M21.8171785,5.09731189 C20.6605038,7.13438366 20,9.49005736 20,12 C20,14.5099426 20.6605038,16.8656163 21.8171785,18.9026881 C19.6453661,21.9858238 16.0579011,24 12,24 C5.372583,24 3.90798505e-14,18.627417 3.90798505e-14,12 C3.90798505e-14,5.372583 5.372583,0 12,0 C16.0579011,0 19.6453661,2.01417617 21.8171785,5.09731189 Z"></path>
+    <use href="#users_stack_24_right"/>
   </clipPath>
 
   <clipPath id="users_stack_mask_32_left">
-    <path d="M2.13430019,23.9892466 C3.32858917,21.5820026 4,18.8694095 4,16 C4,13.1305905 3.32858917,10.4179974 2.13430019,8.0107534 C4.89924175,3.22241289 10.0733034,-2.30926389e-14 16,-2.30926389e-14 C24.836556,-2.30926389e-14 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 C10.0733034,32 4.89924175,28.7775871 2.13430019,23.9892466 L2.13430019,23.9892466 Z"></path>
+    <use href="#users_stack_32_left"/>
+  </clipPath>
+
+  <clipPath id="users_stack_mask_32_circle">
+    <use href="#users_stack_32_circle"/>
   </clipPath>
 
   <clipPath id="users_stack_mask_32_right">
-    <path d="M29.8656998,8.0107534 C28.6714108,10.4179974 28,13.1305905 28,16 C28,18.8694095 28.6714108,21.5820026 29.8656998,23.9892466 C27.1007583,28.7775871 21.9266966,32 16,32 C7.163444,32 3.90798505e-14,24.836556 3.90798505e-14,16 C3.90798505e-14,7.163444 7.163444,0 16,0 C21.9266966,0 27.1007583,3.22241289 29.8656998,8.0107534 Z"></path>
+    <use href="#users_stack_32_right"/>
   </clipPath>
 </defs>`;
 

package/src/components/View/View.css

@@ -5,6 +5,7 @@
   height: 100%;
   width: 100%;
   word-wrap: break-word;
+  font-family: var(--font-common);
 }
 
 .View--animated,
@@ -72,19 +73,6 @@
   display: none;
 }
 
-.View--vkcom,
-.View--android {
-  font-family: var(--font-common);
-}
-
-/**
- * Active panel
- */
-.View--vkcom .View__panel--active::before,
-.View--android .View__panel--active::before {
-  content: none;
-}
-
 /**
  * Panel transition
  */