@vkontakte/vkui 4.38.0 → 4.38.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.38.0",
+  "version": "4.38.2",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/BaseGallery/BaseGallery.css

@@ -19,10 +19,13 @@
   width: 100%;
   height: 100%;
   min-height: 100px;
-  cursor: grab;
   align-items: stretch;
 }
 
+.Gallery--draggable .Gallery__layer {
+  cursor: grab;
+}
+
 .Gallery__layer:empty {
   min-height: 0;
 }

package/src/components/BaseGallery/BaseGallery.tsx

@@ -42,7 +42,7 @@ export const BaseGallery = ({
   children,
   slideWidth = "100%",
   slideIndex = 0,
-  isDraggable = true,
+  isDraggable: isDraggableProp = true,
   onDragStart,
   onDragEnd,
   onChange,
@@ -256,7 +256,7 @@ export const BaseGallery = ({
   };
 
   const onMoveX = (e: TouchEvent) => {
-    if (isDraggable && !layoutState.current.isFullyVisible) {
+    if (isDraggableProp && !layoutState.current.isFullyVisible) {
       e.originalEvent.preventDefault();
 
       if (e.isSlideX) {
@@ -331,6 +331,8 @@ export const BaseGallery = ({
       // otherwise we need to check current slide index (align = right or align = center)
       (align !== "left" && slideIndex < layoutState.current.slides.length - 1));
 
+  const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;
+
   return (
     <div
       {...restProps}
@@ -338,6 +340,7 @@ export const BaseGallery = ({
         "Gallery",
         `Gallery--${align}`,
         shiftState.dragging && "Gallery--dragging",
+        isDraggable && "Gallery--draggable",
         slideWidth === "custom" && "Gallery--custom-width"
       )}
       ref={rootRef}

package/src/components/CardGrid/CardGrid.css

@@ -24,7 +24,7 @@
 }
 
 .CardGrid--m .Card {
-  width: calc((100% - 8px) / 2);
+  width: calc(50% - (var(--vkui--size_cardgrid_padding--regular) / 2));
 }
 
 .CardGrid--m .Card:nth-child(n + 3) {
@@ -36,7 +36,7 @@
 }
 
 .CardGrid--s .Card {
-  width: calc((100% - 2 * 8px) / 3);
+  width: calc((100% - 2 * var(--vkui--size_cardgrid_padding--regular)) / 3);
 }
 
 .CardGrid--s .Card:nth-child(n + 4) {
@@ -53,7 +53,7 @@
 }
 
 .CardGrid + .CardGrid {
-  margin-top: 16px;
+  margin-top: calc(var(--vkui--size_cardgrid_padding_vertical--regular) * 2);
 }
 
 /**
@@ -61,14 +61,14 @@
  */
 
 .Group--card .CardGrid {
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .Group .CardGrid:first-child {
-  margin-top: 8px;
+  margin-top: var(--vkui--size_cardgrid_padding_vertical--regular);
 }
 
 .Group .CardGrid:last-child {
-  margin-bottom: 8px;
+  margin-bottom: var(--vkui--size_cardgrid_padding_vertical--regular);
 }

package/src/components/ContentCard/ContentCard.tsx

@@ -75,6 +75,8 @@ export const ContentCard = ({
   referrerPolicy,
   sizes,
   useMap,
+  hasHover = false,
+  hasActive = false,
   ...restProps
 }: ContentCardProps) => {
   const source = image || src;
@@ -97,8 +99,8 @@ export const ContentCard = ({
       <Tappable
         {...restProps}
         disabled={restProps.disabled || (!restProps.onClick && !restProps.href)}
-        hasHover={false}
-        hasActive={false}
+        hasHover={hasHover}
+        hasActive={hasActive}
         vkuiClass="ContentCard__tappable"
       >
         {(source || srcSet) && (

package/src/components/Counter/Counter.css

@@ -58,9 +58,7 @@
  * CMP:
  * Button
  */
-.Button--lvl-primary.Button--clr-accent .Counter,
-.Button--lvl-secondary.Button--clr-neutral .Counter,
-.Button--lvl-tertiary.Button--clr-neutral .Counter {
+.Button--lvl-primary.Button--clr-accent .Counter {
   background-color: var(
     --button_primary_foreground,
     var(--vkui--color_background_contrast)
@@ -125,9 +123,16 @@
 .Button--lvl-primary.Button--clr-neutral .Counter {
   background-color: var(
     --media_overlay_button_background,
-    var(--vkui--color_background_contrast)
+    var(--vkui--color_background_content)
   );
-  color: var(--text_primary, var(--vkui--color_text_primary));
+  color: var(--vkui--color_text_primary_invariably);
+}
+
+.Button--lvl-secondary.Button--clr-neutral .Counter,
+.Button--lvl-tertiary.Button--clr-neutral .Counter,
+.Button--lvl-outline.Button--clr-neutral .Counter {
+  background-color: var(--accent, var(--vkui--color_background_accent));
+  color: var(--white, var(--vkui--color_text_contrast));
 }
 
 .Button--lvl-primary.Button--clr-overlay .Counter {

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -26,5 +26,7 @@ export const DropdownIcon = ({
     Icon = sizeY === SizeType.COMPACT ? Icon20ChevronUp : Icon24ChevronUp;
   }
 
-  return <Icon vkuiClass={classNames("DropdownIcon")} {...restProps} />;
+  return (
+    <Icon vkuiClass={classNames("DropdownIcon")} aria-hidden {...restProps} />
+  );
 };

package/src/components/FixedLayout/FixedLayout.css

@@ -74,3 +74,11 @@
       ) + var(--safe-area-inset-top)
   );
 }
+
+/**
+ * CMP:
+ * PanelHeaderContext
+ */
+.FixedLayout.PanelHeaderContext {
+  z-index: 4;
+}

package/src/components/FormField/FormField.css

@@ -147,6 +147,10 @@
   border-top-right-radius: 0;
 }
 
+.Select .FormField__after {
+  pointer-events: none;
+}
+
 /**
  * CMP:
  * CalendarHeader

package/src/components/FormLayoutGroup/FormLayoutGroup.css

@@ -54,6 +54,7 @@
   flex: 1;
 }
 
-.FormLayoutGroup--segmented > *:not(:first-child) {
+.FormLayoutGroup--segmented
+  > *:not(:first-child):not(.FormLayoutGroup__offset) {
   margin-left: calc(-1 * var(--thin-border));
 }

package/src/components/InfoRow/InfoRow.tsx

@@ -12,7 +12,7 @@ export interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {
  * @see https://vkcom.github.io/VKUI/#/InfoRow
  */
 export const InfoRow = ({ header, children, ...restProps }: InfoRowProps) => (
-  <Headline {...restProps} vkuiClass="InfoRow" weight="3">
+  <Headline Component="span" {...restProps} vkuiClass="InfoRow" weight="3">
     {hasReactNode(header) && (
       <Subhead Component="span" vkuiClass="InfoRow__header">
         {header}

package/src/components/Link/Link.css

@@ -11,7 +11,8 @@
   border-radius: 0;
 }
 
-@media (hover: hover) {
+/* See https://www.ctrl.blog/entry/css-media-hover-samsung.html */
+@media (hover: hover) and (pointer: fine) {
   .Link:hover {
     text-decoration: underline;
   }

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -59,21 +59,15 @@ export const MiniInfoCell = ({
   children,
   ...restProps
 }: MiniInfoCellProps) => {
-  const isClickable = !!restProps.onClick;
+  const cellClasses = classNames(
+    "MiniInfoCell",
+    mode !== "base" && `MiniInfoCell--md-${mode}`,
+    textWrap !== "nowrap" && `MiniInfoCell--wr-${textWrap}`,
+    `MiniInfoCell--lvl-${textLevel}`
+  );
 
-  return (
-    <Tappable
-      Component="div"
-      disabled={!isClickable}
-      role={isClickable ? "button" : undefined}
-      {...restProps}
-      vkuiClass={classNames(
-        "MiniInfoCell",
-        mode !== "base" && `MiniInfoCell--md-${mode}`,
-        textWrap !== "nowrap" && `MiniInfoCell--wr-${textWrap}`,
-        `MiniInfoCell--lvl-${textLevel}`
-      )}
-    >
+  const cellContent = (
+    <React.Fragment>
       <span vkuiClass="MiniInfoCell__icon">{before}</span>
       <Paragraph
         vkuiClass="MiniInfoCell__content"
@@ -84,6 +78,21 @@ export const MiniInfoCell = ({
       {hasReactNode(after) && (
         <span vkuiClass="MiniInfoCell__after">{after}</span>
       )}
+    </React.Fragment>
+  );
+
+  return restProps.onClick ? (
+    <Tappable
+      Component="div"
+      role="button"
+      {...restProps}
+      vkuiClass={cellClasses}
+    >
+      {cellContent}
     </Tappable>
+  ) : (
+    <div {...restProps} vkuiClass={cellClasses}>
+      {cellContent}
+    </div>
   );
 };

package/src/components/Removable/Removable.css

@@ -103,6 +103,10 @@
   align-items: flex-start;
 }
 
+.Removable__offset {
+  display: none;
+}
+
 .FormItem--withTop .FormItem__removable ~ .Removable__offset,
 .FormLayoutGroup--removable .FormItem--withTop ~ .Removable__offset {
   order: -1;

package/src/components/Root/Readme.md

@@ -1,4 +1,4 @@
-Используется для создания модальных окон. Содержимое `Root` – это коллекция `View`. У каждой `View` должен быть `id`.
+Содержимое `Root` – это коллекция `View`. У каждой `View` должен быть `id`.
 Свойство `activeView` определяет, какая `View` сейчас активна.
 
 При смене значения свойства `activeView` происходит плавный переход от одной `View` к другой.

package/src/components/SimpleCell/Readme.md

@@ -32,10 +32,10 @@ const Example = () => {
         </Group>
         <Group>
           <Header mode="secondary">Настройки</Header>
-          <SimpleCell disabled after={<Switch defaultChecked />}>
+          <SimpleCell Component="label" after={<Switch defaultChecked />}>
             Сжимать фотографии
           </SimpleCell>
-          <SimpleCell disabled after={<Switch />}>
+          <SimpleCell Component="label" after={<Switch />}>
             Сжимать видео
           </SimpleCell>
         </Group>

package/src/components/Tappable/Tappable.css

@@ -13,6 +13,7 @@
 .Tappable[disabled],
 .Tappable[aria-disabled="true"] {
   cursor: default;
+  pointer-events: none;
 }
 
 .Tappable--focus-visible {

package/src/components/UsersStack/UsersStack.css

@@ -4,10 +4,23 @@
   color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
+.UsersStack--l-vertical {
+  flex-direction: column;
+  justify-content: center;
+}
+
 .UsersStack__photos {
   display: flex;
 }
 
+.UsersStack--l-horizontal .UsersStack__photos {
+  margin-right: 8px;
+}
+
+.UsersStack--l-vertical .UsersStack__photos {
+  margin-bottom: 8px;
+}
+
 .UsersStack__fill {
   fill: var(
     --placeholder_icon_background,
@@ -49,18 +62,9 @@
 .UsersStack__text {
   min-width: 0;
   flex: 1;
-  margin: 0 0 0 8px;
-}
-
-/* Vertical layout */
-
-.UsersStack--l-vertical {
-  flex-direction: column;
-  justify-content: center;
 }
 
 .UsersStack--l-vertical .UsersStack__text {
-  margin: 8px 0 0;
   text-align: center;
 }
 
@@ -71,45 +75,3 @@
 .ModalCardBase .UsersStack {
   margin-top: 20px;
 }
-
-.UsersStack__mask--16-left {
-  clip-path: path(
-    "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"
-  );
-}
-
-.UsersStack__mask--16-circle {
-  clip-path: circle(8px);
-}
-
-.UsersStack__mask--24-left {
-  clip-path: path(
-    "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"
-  );
-}
-
-.UsersStack__mask--24-circle {
-  clip-path: circle(12px);
-}
-
-.UsersStack__mask--24-right {
-  clip-path: path(
-    "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"
-  );
-}
-
-.UsersStack__mask--32-left {
-  clip-path: path(
-    "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"
-  );
-}
-
-.UsersStack__mask--32-circle {
-  clip-path: circle(16px);
-}
-
-.UsersStack__mask--32-right {
-  clip-path: path(
-    "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"
-  );
-}

package/src/components/UsersStack/UsersStack.tsx

@@ -3,6 +3,7 @@ import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Caption } from "../Typography/Caption/Caption";
+import { useId } from "../../hooks/useId";
 import "./UsersStack.css";
 
 export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -102,6 +103,8 @@ export const UsersStack = ({
   children,
   ...restProps
 }: UsersStackProps) => {
+  const cmpId = useId();
+
   const canShowOthers = count > 0 && size !== "xs";
   const CounterTypography = size === "m" ? Footnote : Caption;
 
@@ -112,7 +115,45 @@ export const UsersStack = ({
   }[size];
   const directionClip = canShowOthers ? "right" : "left";
 
-  const photosShown = photos.slice(0, visibleCount);
+  const photosElements = photos.slice(0, visibleCount).map((photo, i) => {
+    const direction = i === 0 && !canShowOthers ? "circle" : directionClip;
+
+    const id = `UsersStackDefs${cmpId}${i}`;
+    const hrefID = `#${id}`;
+    const maskID = `UsersStackMask${cmpId}${i}`;
+
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        vkuiClass="UsersStack__photo"
+        key={i}
+        aria-hidden
+      >
+        <defs>
+          <PathElement id={id} direction={direction} photoSize={photoSize} />
+        </defs>
+        <clipPath id={maskID}>
+          <use href={hrefID} />
+        </clipPath>
+        <g clipPath={`url(#${maskID})`}>
+          <use href={hrefID} vkuiClass="UsersStack__fill" />
+          <image href={photo} width={photoSize} height={photoSize} />
+          <use href={hrefID} fill="none" stroke="rgba(0, 0, 0, 0.08)" />
+        </g>
+      </svg>
+    );
+  });
+  const othersElement = canShowOthers ? (
+    <CounterTypography
+      caps
+      weight="1"
+      level="2" // TODO: remove only level in #2343
+      vkuiClass="UsersStack__photo UsersStack__photo--others"
+      aria-hidden
+    >
+      <span>+{count}</span>
+    </CounterTypography>
+  ) : null;
 
   return (
     <div
@@ -124,48 +165,12 @@ export const UsersStack = ({
         canShowOthers && "UsersStack--others"
       )}
     >
-      <div vkuiClass="UsersStack__photos" role="presentation">
-        {photosShown.map((photo, i) => {
-          const direction =
-            i === 0 && !canShowOthers ? "circle" : directionClip;
-
-          return (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              vkuiClass="UsersStack__photo"
-              key={i}
-              aria-hidden
-            >
-              <g vkuiClass={`UsersStack__mask--${photoSize}-${direction}`}>
-                <PathElement
-                  direction={direction}
-                  photoSize={photoSize}
-                  vkuiClass="UsersStack__fill"
-                />
-                <image href={photo} width={photoSize} height={photoSize} />
-                <PathElement
-                  direction={direction}
-                  photoSize={photoSize}
-                  fill="none"
-                  stroke="rgba(0, 0, 0, 0.08)"
-                />
-              </g>
-            </svg>
-          );
-        })}
-
-        {canShowOthers && (
-          <CounterTypography
-            caps
-            weight="1"
-            level="2" // TODO: remove only level in #2343
-            vkuiClass="UsersStack__photo UsersStack__photo--others"
-            aria-hidden
-          >
-            <span>+{count}</span>
-          </CounterTypography>
-        )}
-      </div>
+      {(photosElements.length > 0 || othersElement) && (
+        <div vkuiClass="UsersStack__photos" role="presentation">
+          {photosElements}
+          {othersElement}
+        </div>
+      )}
       {hasReactNode(children) && (
         <Footnote vkuiClass="UsersStack__text">{children}</Footnote>
       )}

package/src/hooks/useId.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+// Workaround for https://github.com/webpack/webpack/issues/14814
+// https://github.com/eps1lon/material-ui/blob/8d5f135b4d7a58253a99ab56dce4ac8de61f5dc1/packages/mui-utils/src/useId.ts#L21
+const maybeReactUseId: undefined | (() => string) = (React as any)[
+  "useId".toString()
+];
+
+let id = 0;
+
+// TODO: Remove after React 18
+function useIncrementingCounterID(): string {
+  const [state] = React.useState(() => id++);
+
+  return `:r${state}:`;
+}
+
+export const useId: () => string = maybeReactUseId ?? useIncrementingCounterID;