@vkontakte/vkui 4.31.0 → 4.32.0

package/src/components/CalendarRange/CalendarRange.tsx

@@ -57,6 +57,9 @@ const getIsDaySelected = (day: Date, value?: Array<Date | null>) => {
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/CalendarRange
+ */
 export const CalendarRange: React.FC<CalendarRangeProps> = ({
   value,
   onChange,

package/src/components/Card/Card.tsx

@@ -11,6 +11,9 @@ export interface CardProps
   mode?: "tint" | "shadow" | "outline";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Card
+ */
 export const Card: React.FC<CardProps> = ({
   mode = "tint",
   children,

package/src/components/CardGrid/CardGrid.tsx

@@ -11,6 +11,9 @@ export interface CardGridProps
   size: "s" | "m" | "l";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/CardGrid
+ */
 const CardGrid: React.FunctionComponent<CardGridProps> = ({
   children,
   size,

package/src/components/CardGrid/Readme.md

@@ -35,7 +35,7 @@
         <div style={{ paddingBottom: "30%" }} />
       </Card>
     </CardGrid>
-    <Separator expanded />
+    <Spacing size={16} />
   </Panel>
 </View>
 ```

package/src/components/CardScroll/CardScroll.tsx

@@ -19,6 +19,9 @@ export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
   withSpaces?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/CardScroll
+ */
 export const CardScroll: React.FC<CardScrollProps> = ({
   children,
   size = "s",

package/src/components/Cell/Cell.tsx

@@ -5,9 +5,10 @@ import { warnOnce } from "../../lib/warnOnce";
 import { getClassName } from "../../helpers/getClassName";
 import { ANDROID, IOS, VKCOM } from "../../lib/platform";
 import SimpleCell, { SimpleCellProps } from "../SimpleCell/SimpleCell";
-import { HasPlatform } from "../../types";
+import { HasPlatform, HasRootRef } from "../../types";
 import { Removable, RemovableProps } from "../Removable/Removable";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useExternRef } from "../../hooks/useExternRef";
 import { useDraggable } from "./useDraggable";
 import { ListContext } from "../List/ListContext";
 import { CellDragger } from "./CellDragger/CellDragger";
@@ -15,9 +16,10 @@ import { CellCheckbox, CellCheckboxProps } from "./CellCheckbox/CellCheckbox";
 import "./Cell.css";
 
 export interface CellProps
-  extends SimpleCellProps,
+  extends Omit<SimpleCellProps, "getRootRef">,
     HasPlatform,
-    RemovableProps {
+    RemovableProps,
+    HasRootRef<HTMLDivElement> {
   mode?: "removable" | "selectable";
   /**
    * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет
@@ -57,6 +59,10 @@ export interface CellProps
 }
 
 const warn = warnOnce("Cell");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Cell
+ */
 export const Cell: React.FC<CellProps> = ({
   mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0
   onRemove = noop,
@@ -104,7 +110,10 @@ export const Cell: React.FC<CellProps> = ({
 
   const platform = usePlatform();
 
-  const { dragging, rootElRef, ...draggableProps } = useDraggable({
+  const rootElRef = useExternRef(getRootRef);
+
+  const { dragging, ...draggableProps } = useDraggable({
+    rootElRef,
     onDragFinish,
   });
 
@@ -185,7 +194,7 @@ export const Cell: React.FC<CellProps> = ({
         style={style}
         getRootRef={rootElRef}
         removePlaceholder={removePlaceholder}
-        onRemove={(e) => onRemove(e, rootElRef?.current)}
+        onRemove={(e) => onRemove(e, rootElRef.current)}
       >
         {simpleCell}
       </Removable>

package/src/components/Cell/useDraggable.tsx

@@ -10,14 +10,15 @@ export interface DraggableProps {
 
 interface UseDraggableProps extends DraggableProps {
   dragging: boolean;
-  rootElRef: any;
 }
 
-export const useDraggable = ({
+export const useDraggable = <T extends HTMLElement>({
+  rootElRef,
   onDragFinish,
-}: Pick<CellProps, "onDragFinish">) => {
+}: Pick<CellProps, "onDragFinish"> & {
+  rootElRef: React.MutableRefObject<T | null>;
+}) => {
   const [dragging, setDragging] = React.useState<boolean>(false);
-  const rootElRef = React.useRef<HTMLElement>(null);
 
   const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);
   const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);
@@ -119,7 +120,6 @@ export const useDraggable = ({
     onDragMove,
     onDragEnd,
     dragging,
-    rootElRef,
   };
 
   return useDraggableProps;

package/src/components/CellButton/CellButton.tsx

@@ -10,6 +10,9 @@ export interface CellButtonProps extends SimpleCellProps {
   centered?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/CellButton
+ */
 const CellButton: React.FC<CellButtonProps> = ({
   centered = false,
   mode = "primary",

package/src/components/Checkbox/Checkbox.tsx

@@ -18,8 +18,8 @@ import {
   AdaptivityProps,
   SizeType,
 } from "../../hoc/withAdaptivity";
-import Text from "../Typography/Text/Text";
-import Headline from "../Typography/Headline/Headline";
+import { Text } from "../Typography/Text/Text";
+import { Headline } from "../Typography/Headline/Headline";
 import { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
 import "./Checkbox.css";
@@ -32,6 +32,9 @@ export interface CheckboxProps
   description?: React.ReactNode;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Checkbox
+ */
 export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
   children,
   className,
@@ -44,7 +47,7 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
 }: CheckboxProps) => {
   const platform = usePlatform();
 
-  const ContentComponent =
+  const ContentTypography =
     platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
 
   return (
@@ -81,16 +84,12 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
             <Icon24CheckBoxOff />
           )}
         </div>
-        <ContentComponent
-          weight="regular"
-          vkuiClass="Checkbox__content"
-          Component="div"
-        >
+        <ContentTypography vkuiClass="Checkbox__content" Component="div">
           <div vkuiClass="Checkbox__children">{children}</div>
           {hasReactNode(description) && (
             <Caption vkuiClass="Checkbox__description">{description}</Caption>
           )}
-        </ContentComponent>
+        </ContentTypography>
       </div>
     </Tappable>
   );

package/src/components/Chip/Chip.css

@@ -1,9 +1,10 @@
 .Chip {
   display: inline-block;
-  border: 1px solid var(--image_border);
-  background: var(--background_content);
-  border-radius: 4px;
-  height: 28px;
+  border: var(--thin-border) solid
+    var(--image_border, var(--vkui--color_image_border_alpha));
+  background: var(--background_content, var(--vkui--color_background_content));
+  border-radius: 6px;
+  height: 32px;
   box-sizing: border-box;
 }
 
@@ -23,7 +24,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   display: inline-block;
 }
 
@@ -40,7 +41,7 @@
   padding: 6px;
   margin: -1px;
   transform: translateX(-1px);
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
   border: none;
   border-radius: 2px;
   background: transparent;
@@ -54,3 +55,8 @@
 .Chip__after {
   margin-left: 6px;
 }
+
+/* TODO: новая адаптивность */
+.Chip--sizeY-compact {
+  height: 28px;
+}

package/src/components/Chip/Chip.tsx

@@ -4,6 +4,7 @@ import { getTitleFromChildren, hasReactNode, noop } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { Caption } from "../Typography/Caption/Caption";
 import Tappable from "../Tappable/Tappable";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./Chip.css";
 
 type ChipValue = string | number;
@@ -18,6 +19,9 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   after?: React.ReactNode;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Chip
+ */
 export const Chip: React.FC<ChipProps> = ({
   value = "",
   option,
@@ -29,6 +33,7 @@ export const Chip: React.FC<ChipProps> = ({
   children,
   ...restProps
 }: ChipProps) => {
+  const { sizeY } = useAdaptivity();
   const onRemoveWrapper = React.useCallback(
     (event: React.MouseEvent) => {
       onRemove(event, value);
@@ -39,8 +44,11 @@ export const Chip: React.FC<ChipProps> = ({
 
   return (
     <div
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames("Chip", { "Chip--removable": removable })}
+      vkuiClass={classNames(
+        "Chip",
+        removable && "Chip--removable",
+        `Chip--sizeY-${sizeY}` // TODO: v5 новая адаптивность
+      )}
       role="option"
       aria-label={title}
       {...restProps}

package/src/components/ChipsInput/ChipsInput.tsx

@@ -74,6 +74,9 @@ export const chipsInputDefaultProps: ChipsInputProps<any> = {
   },
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ChipsInput
+ */
 export const ChipsInput = <Option extends ChipsInputOption>(
   props: ChipsInputProps<Option>
 ) => {

package/src/components/ChipsSelect/ChipsSelect.css

@@ -4,20 +4,6 @@
 
 .ChipsSelect__empty {
   padding: 12px 0;
-}
-
-.ChipsSelect__empty {
   text-align: center;
   color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
-
-.ChipsSelect__open:not(.ChipsSelect__open--popupDirectionTop)
-  .FormField__border {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ChipsSelect__open.ChipsSelect__open--popupDirectionTop .FormField__border {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -370,8 +370,9 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
         vkuiClass={classNames(
-          opened && "ChipsSelect__open",
-          isPopperDirectionTop && "ChipsSelect__open--popupDirectionTop"
+          opened && "Select--open",
+          opened &&
+            (isPopperDirectionTop ? "Select--pop-up" : "Select--pop-down")
         )}
         getRef={getRef}
         disabled={disabled}
@@ -449,6 +450,9 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ChipsSelect
+ */
 export const ChipsSelect = withAdaptivity(ChipsSelectComponent, {
   sizeY: true,
 });

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -68,6 +68,9 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
     ? "dark"
     : "light";
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ConfigProvider
+ */
 const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
   webviewType = WebviewType.VKAPPS,

package/src/components/ContentCard/ContentCard.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Card, CardProps } from "../Card/Card";
 import { Caption } from "../Typography/Caption/Caption";
 import { Title } from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -48,6 +48,10 @@ export interface ContentCardProps
 }
 
 const warn = warnOnce("ContentCard");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/ContentCard
+ */
 const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
   const {
     subtitle,
@@ -132,9 +136,7 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
             </Title>
           )}
           {hasReactNode(text) && (
-            <Text vkuiClass="ContentCard__text" weight="regular">
-              {text}
-            </Text>
+            <Text vkuiClass="ContentCard__text">{text}</Text>
           )}
           {hasReactNode(caption) && (
             <Caption vkuiClass="ContentCard__text">{caption}</Caption>

package/src/components/Counter/Counter.css

@@ -14,18 +14,32 @@
 }
 
 .Counter--primary {
-  background: var(--counter_primary_background);
-  color: var(--counter_primary_text);
+  background: var(
+    --counter_primary_background,
+    var(--vkui--color_background_accent)
+  );
+  color: var(--counter_primary_text, var(--vkui--color_text_contrast));
 }
 
 .Counter--secondary {
-  background: var(--counter_secondary_background);
-  color: var(--counter_secondary_text);
+  background: var(
+    --counter_secondary_background,
+    var(--vkui--color_icon_tertiary)
+  );
+  color: var(--counter_secondary_text, var(--vkui--color_text_contrast));
 }
 
 .Counter--prominent {
-  background: var(--counter_prominent_background);
-  color: var(--counter_prominent_text);
+  background: var(
+    --counter_prominent_background,
+    var(--vkui--color_background_negative)
+  );
+  color: var(--counter_prominent_text, var(--vkui--color_text_contrast));
+}
+
+.Counter--contrast {
+  background: var(--vkui--color_background_contrast);
+  color: var(--vkui--color_text_accent);
 }
 
 .Counter--s-m {
@@ -40,11 +54,6 @@
   border-radius: 9px;
 }
 
-.Counter--vkcom.Counter--s-m .Counter__in {
-  padding-left: 6px;
-  padding-right: 6px;
-}
-
 /**
  * CMP:
  * Button
@@ -145,17 +154,14 @@
   );
 }
 
-.Button--lvl-secondary.Button--clr-accent .Counter--vkcom,
-.Button--lvl-tertiary.Button--clr-accent .Counter--vkcom,
-.Button--lvl-outline.Button--clr-accent .Counter--vkcom {
-  opacity: 0.72;
-}
-
 /**
  * CMP:
  * WriteBarIcon
  */
 .WriteBarIcon .Counter {
-  color: var(--button_commerce_foreground);
-  background: var(--button_commerce_background);
+  color: var(--button_commerce_foreground, var(--vkui--color_text_contrast));
+  background: var(
+    --button_commerce_background,
+    var(--vkui--color_background_positive)
+  );
 }

package/src/components/Counter/Counter.tsx

@@ -1,76 +1,47 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { Caption } from "../Typography/Caption/Caption";
-import Text from "../Typography/Text/Text";
-import { VKCOM } from "../../lib/platform";
+import { Headline } from "../Typography/Headline/Headline";
 import { hasReactNode } from "../../lib/utils";
-import { HasComponent, HasPlatform } from "../../types";
 import "./Counter.css";
 
 export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
    * Тип счетчика. При использовании компонента в качестве значения свойства `after` у `Button` эти значения игнорируются
    */
-  mode?: "secondary" | "primary" | "prominent";
+  mode?: "secondary" | "primary" | "prominent" | "contrast";
   size?: "s" | "m";
 }
 
-type CounterTypographyProps = Pick<CounterProps, "size"> &
-  HasPlatform &
-  HasComponent;
-
-const CounterTypography: React.FC<CounterTypographyProps> = ({
-  size,
-  platform,
+/**
+ * @see https://vkcom.github.io/VKUI/#/Counter
+ */
+export const Counter = ({
+  mode = "secondary",
+  size = "m",
+  children,
   ...restProps
-}) => {
-  return size === "s" ? (
-    <Caption
-      level="2"
-      weight={platform === VKCOM ? "1" : undefined}
-      {...restProps}
-    />
-  ) : (
-    <Text weight="medium" {...restProps} />
-  );
-};
-
-const Counter: React.FC<CounterProps> = (props: CounterProps) => {
-  const { mode, size, children, ...restProps } = props;
-  const platform = usePlatform();
-
+}: CounterProps) => {
   if (React.Children.count(children) === 0) {
     return null;
   }
 
+  const CounterTypography = size === "s" ? Caption : Headline;
+
   return (
     <span
       {...restProps}
       vkuiClass={classNames(
-        getClassName("Counter", platform),
+        "Counter",
         `Counter--${mode}`,
         `Counter--s-${size}`
       )}
     >
       {hasReactNode(children) && (
-        <CounterTypography
-          platform={platform}
-          size={size}
-          vkuiClass="Counter__in"
-        >
+        <CounterTypography Component="span" vkuiClass="Counter__in" level="2">
           {children}
         </CounterTypography>
       )}
     </span>
   );
 };
-
-Counter.defaultProps = {
-  mode: "secondary",
-  size: "m",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(Counter);

package/src/components/CustomScrollView/CustomScrollView.css

@@ -60,3 +60,15 @@
   opacity: 0.56;
   transform: scaleX(1.34);
 }
+
+/**
+ * CMP:
+ * CustomSelectDropdown
+ */
+.CustomSelectDropdown .CustomScrollView__box {
+  padding-right: 8px;
+}
+
+.CustomSelectDropdown--wide .CustomScrollView__box {
+  padding-right: 0;
+}