@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/Checkbox/Checkbox.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import Tappable, { ACTIVE_EFFECT_DELAY } from "../Tappable/Tappable";
-import { getClassName } from "../../helpers/getClassName";
+import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { IOS, VKCOM } from "../../lib/platform";
 
@@ -9,6 +8,7 @@ import {
   Icon20CheckBoxOff,
   Icon24CheckBoxOn,
   Icon24CheckBoxOff,
+  Icon20CheckBoxIndetermanate,
 } from "@vkontakte/icons";
 
 import { HasRef, HasRootRef } from "../../types";
@@ -18,10 +18,12 @@ 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 { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
+import { useExternRef } from "../../hooks/useExternRef";
+import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
+import { warnOnce } from "../../lib/warnOnce";
 import "./Checkbox.css";
 
 export interface CheckboxProps
@@ -30,8 +32,15 @@ export interface CheckboxProps
     HasRef<HTMLInputElement>,
     AdaptivityProps {
   description?: React.ReactNode;
+  indeterminate?: boolean;
+  defaultIndeterminate?: boolean;
 }
 
+const warn = warnOnce("Checkbox");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Checkbox
+ */
 export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
   children,
   className,
@@ -39,20 +48,67 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
   getRootRef,
   getRef,
   description,
+  indeterminate,
+  defaultIndeterminate,
   sizeY,
+  onChange,
   ...restProps
 }: CheckboxProps) => {
+  const inputRef = useExternRef(getRef);
   const platform = usePlatform();
 
-  const ContentComponent =
-    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
+  React.useEffect(() => {
+    const indeterminateValue =
+      indeterminate === undefined ? defaultIndeterminate : indeterminate;
+
+    if (inputRef.current) {
+      inputRef.current.indeterminate = Boolean(indeterminateValue);
+    }
+  }, [defaultIndeterminate, indeterminate, inputRef]);
+
+  const handleChange: CheckboxProps["onChange"] = React.useCallback(
+    (event) => {
+      if (
+        defaultIndeterminate !== undefined &&
+        indeterminate === undefined &&
+        restProps.checked === undefined &&
+        inputRef.current
+      ) {
+        inputRef.current.indeterminate = false;
+      }
+      if (indeterminate !== undefined && inputRef.current) {
+        inputRef.current.indeterminate = indeterminate;
+      }
+      onChange && onChange(event);
+    },
+    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]
+  );
+
+  if (process.env.NODE_ENV === "development") {
+    if (defaultIndeterminate && restProps.defaultChecked) {
+      warn(
+        "defaultIndeterminate и defaultChecked не могут быть true одновременно",
+        "error"
+      );
+    }
+
+    if (indeterminate && restProps.checked) {
+      warn("indeterminate и checked не могут быть true одновременно", "error");
+    }
+
+    if (restProps.defaultChecked && restProps.checked) {
+      warn("defaultChecked и checked не могут быть true одновременно", "error");
+    }
+  }
 
   return (
     <Tappable
       Component="label"
       vkuiClass={classNames(
-        getClassName("Checkbox", platform),
-        `Checkbox--sizeY-${sizeY}`
+        "Checkbox",
+        `Checkbox--sizeY-${sizeY}`,
+        !(hasReactNode(children) || hasReactNode(description)) &&
+          `Checkbox--simple`
       )}
       className={className}
       style={style}
@@ -60,38 +116,40 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
       activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}
       getRootRef={getRootRef}
     >
-      <input
+      <VisuallyHiddenInput
         {...restProps}
+        onChange={handleChange}
         type="checkbox"
         vkuiClass="Checkbox__input"
-        ref={getRef}
+        getRef={inputRef}
       />
-      <div vkuiClass="Checkbox__container">
-        <div vkuiClass="Checkbox__icon Checkbox__icon--on">
-          {sizeY === SizeType.COMPACT || platform === VKCOM ? (
-            <Icon20CheckBoxOn />
-          ) : (
-            <Icon24CheckBoxOn />
-          )}
-        </div>
-        <div vkuiClass="Checkbox__icon Checkbox__icon--off">
-          {sizeY === SizeType.COMPACT || platform === VKCOM ? (
-            <Icon20CheckBoxOff />
-          ) : (
-            <Icon24CheckBoxOff />
-          )}
-        </div>
-        <ContentComponent
-          weight="regular"
-          vkuiClass="Checkbox__content"
-          Component="div"
-        >
-          <div vkuiClass="Checkbox__children">{children}</div>
-          {hasReactNode(description) && (
-            <Caption vkuiClass="Checkbox__description">{description}</Caption>
-          )}
-        </ContentComponent>
+      <div vkuiClass="Checkbox__icon Checkbox__icon--on">
+        {sizeY === SizeType.COMPACT || platform === VKCOM ? (
+          <Icon20CheckBoxOn aria-hidden />
+        ) : (
+          <Icon24CheckBoxOn aria-hidden />
+        )}
+      </div>
+      <div vkuiClass="Checkbox__icon Checkbox__icon--off">
+        {sizeY === SizeType.COMPACT || platform === VKCOM ? (
+          <Icon20CheckBoxOff aria-hidden />
+        ) : (
+          <Icon24CheckBoxOff aria-hidden />
+        )}
+      </div>
+      <div vkuiClass="Checkbox__icon Checkbox__icon--indeterminate">
+        <Icon20CheckBoxIndetermanate
+          aria-hidden
+          width={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}
+          height={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}
+        />
       </div>
+      <Text vkuiClass="Checkbox__content" Component="div">
+        <div vkuiClass="Checkbox__children">{children}</div>
+        {hasReactNode(description) && (
+          <Caption vkuiClass="Checkbox__description">{description}</Caption>
+        )}
+      </Text>
     </Tappable>
   );
 };

package/src/components/Checkbox/Readme.md

@@ -18,3 +18,22 @@
   </Panel>
 </View>
 ```
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div
+  style={{
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    padding: "24px 16px",
+    background: "white",
+    gap: 20,
+  }}
+>
+  <Checkbox defaultChecked />
+  <Checkbox />
+  <Checkbox defaultChecked />
+  <Checkbox indeterminate />
+  <Checkbox defaultIndeterminate />
+</div>
+```

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

@@ -3,7 +3,8 @@ import { Icon16Cancel } from "@vkontakte/icons";
 import { getTitleFromChildren, hasReactNode, noop } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { Caption } from "../Typography/Caption/Caption";
-import Tappable from "../Tappable/Tappable";
+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,7 +68,10 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
     ? "dark"
     : "light";
 
-const ConfigProvider: React.FC<ConfigProviderProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/ConfigProvider
+ */
+export const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
   webviewType = WebviewType.VKAPPS,
   isWebView = vkBridge.isWebView(),
@@ -139,6 +142,3 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
     </ConfigProviderContext.Provider>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default ConfigProvider;

package/src/components/ContentCard/ContentCard.css

@@ -1,39 +1,31 @@
 .ContentCard--disabled {
-  opacity: 0.6;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .ContentCard__body {
-  padding: 12px 16px;
+  padding: var(--vkui--size_base_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .ContentCard__tappable {
-  border-radius: 8px;
+  border-radius: var(--vkui--size_card_border_radius--regular);
   text-decoration: none;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   display: block;
 }
 
 .ContentCard__img {
   object-fit: cover;
   display: block;
-  border-radius: 8px 8px 0 0;
+  border-radius: var(--vkui--size_card_border_radius--regular)
+    var(--vkui--size_card_border_radius--regular) 0 0;
 }
 
 .ContentCard__text:not(:last-child) {
   margin-bottom: 4px;
 }
 
-.ContentCard__caption {
-  color: var(--text_secondary);
-}
-
-/*
- * iOS
- */
-.ContentCard--ios .ContentCard__tappable {
-  border-radius: 10px;
-}
-
-.ContentCard--ios .ContentCard__img {
-  border-radius: 10px 10px 0 0;
+.ContentCard__caption,
+.ContentCard__subtitle {
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }

package/src/components/ContentCard/ContentCard.tsx

@@ -1,11 +1,9 @@
 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 Tappable, { TappableProps } from "../Tappable/Tappable";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
+import { Headline } from "../Typography/Headline/Headline";
+import { Text } from "../Typography/Text/Text";
+import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { HasRef, HasRootRef } from "../../types";
@@ -48,36 +46,37 @@ export interface ContentCardProps
 }
 
 const warn = warnOnce("ContentCard");
-const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
-  const {
-    subtitle,
-    header,
-    text,
-    caption,
-    // card props
-    className,
-    mode,
-    style,
-    getRootRef,
-    // img props
-    getRef,
-    maxHeight,
-    image,
-    src,
-    srcSet,
-    alt,
-    width,
-    height,
-    crossOrigin,
-    decoding,
-    loading,
-    referrerPolicy,
-    sizes,
-    useMap,
-    ...restProps
-  } = props;
-  const platform = usePlatform();
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ContentCard
+ */
+export const ContentCard = ({
+  subtitle,
+  header,
+  text,
+  caption,
+  // card props
+  className,
+  mode = "shadow",
+  style,
+  getRootRef,
+  // img props
+  getRef,
+  maxHeight,
+  image,
+  src,
+  srcSet,
+  alt,
+  width,
+  height,
+  crossOrigin,
+  decoding,
+  loading,
+  referrerPolicy,
+  sizes,
+  useMap,
+  ...restProps
+}: ContentCardProps) => {
   const source = image || src;
 
   if (image && process.env.NODE_ENV === "development") {
@@ -88,10 +87,10 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
     <Card
       mode={mode}
       getRootRef={getRootRef}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("ContentCard", platform), {
-        "ContentCard--disabled": restProps.disabled,
-      })}
+      vkuiClass={classNames(
+        "ContentCard",
+        restProps.disabled && "ContentCard--disabled"
+      )}
       style={style}
       className={className}
     >
@@ -122,32 +121,30 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
         )}
         <div vkuiClass="ContentCard__body">
           {hasReactNode(subtitle) && (
-            <Caption caps vkuiClass="ContentCard__text" weight="1" level="3">
+            <Caption
+              vkuiClass="ContentCard__text ContentCard__subtitle"
+              weight="1"
+              level="3"
+              caps
+            >
               {subtitle}
             </Caption>
           )}
           {hasReactNode(header) && (
-            <Title vkuiClass="ContentCard__text" weight="3" level="1">
+            <Headline vkuiClass="ContentCard__text" weight="2" level="1">
               {header}
-            </Title>
+            </Headline>
           )}
           {hasReactNode(text) && (
-            <Text vkuiClass="ContentCard__text" weight="regular">
-              {text}
-            </Text>
+            <Text vkuiClass="ContentCard__text">{text}</Text>
           )}
           {hasReactNode(caption) && (
-            <Caption vkuiClass="ContentCard__text">{caption}</Caption>
+            <Caption vkuiClass="ContentCard__text ContentCard__caption">
+              {caption}
+            </Caption>
           )}
         </div>
       </Tappable>
     </Card>
   );
 };
-
-ContentCard.defaultProps = {
-  mode: "shadow",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ContentCard;

package/src/components/ContentCard/Readme.md

@@ -36,6 +36,12 @@ const Example = () => {
               header="ContentCard example"
               caption="VKUI Styleguide > Blocks > ContentCard"
             />
+            <ContentCard
+              subtitle="VKUI"
+              header="ContentCard example"
+              caption="VKUI Styleguide > Blocks > ContentCard"
+              mode="tint"
+            />
             <ContentCard
               onClick={() => {}}
               src="https://images.unsplash.com/photo-1603988492906-4fb0fb251cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"

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)
+  );
 }