@vkontakte/vkui 4.32.0 → 4.33.2

package/src/components/BaseGallery/types.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { HasAlign, HasRef, HasRootRef } from "../../types";
+import { TouchEventHandler } from "../Touch/Touch";
+
+export interface GallerySlidesState {
+  coordX: number;
+  width: number;
+}
+
+export interface ShiftingState {
+  deltaX: number;
+  shiftX: number;
+  animation?: boolean;
+  dragging: boolean;
+}
+
+export interface LayoutState {
+  containerWidth: number;
+  viewporOffsettWidth: number;
+  layerWidth: number;
+  min?: number;
+  max: number;
+  slides: GallerySlidesState[];
+  isFullyVisible: boolean;
+}
+
+export interface BaseGalleryProps
+  extends Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      "onChange" | "onDragStart" | "onDragEnd"
+    >,
+    HasAlign,
+    HasRootRef<HTMLDivElement>,
+    HasRef<HTMLElement> {
+  slideWidth?: string | number;
+  slideIndex?: number;
+  onDragStart?: TouchEventHandler;
+  onDragEnd?: TouchEventHandler;
+  onChange?(current: number): void;
+  onEnd?({ targetIndex }: { targetIndex: number }): void;
+  /**
+   * Будет вызвано при клике на кнопку-стрелку влево
+   */
+  onPrevClick?(): void;
+  /**
+   * Будет вызвано при клике на кнопку-стрелку вправо
+   */
+  onNextClick?(): void;
+  bullets?: "dark" | "light" | false;
+  isDraggable?: boolean;
+  showArrows?: boolean;
+}

package/src/components/Button/Button.css

@@ -13,6 +13,10 @@
   min-width: var(--vkui--size_button_minimum_width--regular);
 }
 
+.Button--loading {
+  cursor: progress;
+}
+
 .Button--singleIcon {
   min-width: var(--vkui--size_button_small_height--compact);
 }

package/src/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { Title } from "../Typography/Title/Title";
 import { Text } from "../Typography/Text/Text";
 import { Subhead } from "../Typography/Subhead/Subhead";
@@ -183,7 +183,8 @@ const ButtonComponent: React.FC<ButtonProps> = ({
         `Button--sizeY-${sizeY}`,
         stretched && "Button--stretched",
         hasIcons && "Button--with-icon",
-        hasIconOnly && "Button--singleIcon"
+        hasIconOnly && "Button--singleIcon",
+        loading && "Button--loading"
       )}
       getRootRef={getRootRef}
       hoverMode={hasNewTokens ? "Button--hover" : "background"}

package/src/components/CalendarDay/CalendarDay.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from "../../hooks/useKeyboardInputTracker";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
 import "./CalendarDay.css";

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -5,7 +5,7 @@ import {
   Icon20ChevronRightOutline,
   Icon12Dropdown,
 } from "@vkontakte/icons";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { SelectType } from "../Select/Select";
 import { CustomSelect } from "../CustomSelect/CustomSelect";

package/src/components/Cell/Cell.tsx

@@ -4,7 +4,7 @@ import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { getClassName } from "../../helpers/getClassName";
 import { ANDROID, IOS, VKCOM } from "../../lib/platform";
-import SimpleCell, { SimpleCellProps } from "../SimpleCell/SimpleCell";
+import { SimpleCell, SimpleCellProps } from "../SimpleCell/SimpleCell";
 import { HasPlatform, HasRootRef } from "../../types";
 import { Removable, RemovableProps } from "../Removable/Removable";
 import { usePlatform } from "../../hooks/usePlatform";

package/src/components/CellButton/CellButton.css

@@ -35,12 +35,18 @@
   padding-right: 8px;
 }
 
-.CellButton,
+.CellButton {
+  color: var(--accent, var(--vkui--color_text_accent));
+}
+
 .CellButton > .Icon {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
+}
+
+.CellButton--danger {
+  color: var(--destructive, var(--vkui--color_text_negative));
 }
 
-.CellButton--danger,
 .CellButton--danger > .Icon {
-  color: var(--destructive);
+  color: var(--destructive, var(--vkui--color_icon_negative));
 }

package/src/components/CellButton/CellButton.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import SimpleCell, { SimpleCellProps } from "../SimpleCell/SimpleCell";
+import { SimpleCell, SimpleCellProps } from "../SimpleCell/SimpleCell";
 import "./CellButton.css";
 
 export interface CellButtonProps extends SimpleCellProps {
@@ -13,27 +11,20 @@ export interface CellButtonProps extends SimpleCellProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/CellButton
  */
-const CellButton: React.FC<CellButtonProps> = ({
+export const CellButton: React.FC<CellButtonProps> = ({
   centered = false,
   mode = "primary",
   ...restProps
 }: CellButtonProps) => {
-  const platform = usePlatform();
-
   return (
     <SimpleCell
       stopPropagation={true}
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("CellButton", platform),
+        "CellButton",
         `CellButton--${mode}`,
-        {
-          ["CellButton--centered"]: centered,
-        }
+        centered && "CellButton--centered"
       )}
     />
   );
 };
-
-export { CellButton };

package/src/components/Checkbox/Checkbox.css

@@ -1,5 +1,10 @@
 .Checkbox {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 var(--vkui--size_base_padding_horizontal--regular);
+  min-width: var(--vkui--size_field_height--regular);
+  min-height: var(--vkui--size_field_height--regular);
 }
 
 .FormItem .Checkbox {
@@ -8,38 +13,33 @@
   margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
 }
 
-.Checkbox__input {
-  display: none;
-}
-
-.Checkbox__container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
 .Checkbox__icon {
   flex-shrink: 0;
   margin-right: 12px;
 }
 
 .Checkbox__icon--on {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
+  display: none;
+}
+
+.Checkbox__icon--indeterminate {
+  color: var(--accent, var(--vkui--color_icon_accent));
   display: none;
 }
 
 .Checkbox__icon--off {
-  color: var(--icon_tertiary);
+  color: var(--icon_tertiary, var(--vkui--color_icon_tertiary));
 }
 
 .Checkbox__content {
   flex-grow: 1;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   word-break: break-word;
 }
 
 .Checkbox__description {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
   display: block;
   margin-bottom: 12px;
   margin-top: 2px;
@@ -53,38 +53,37 @@
   margin-bottom: 12px;
 }
 
-.Checkbox__input:checked ~ .Checkbox__container .Checkbox__icon--on {
-  display: block;
+.Checkbox__input:checked ~ .Checkbox__icon--on {
+  display: flex;
 }
 
-.Checkbox__input:checked ~ .Checkbox__container .Checkbox__icon--off {
+.Checkbox__input:indeterminate ~ .Checkbox__icon--indeterminate,
+.Checkbox__input:checked ~ .Checkbox__icon--off {
   display: none;
 }
 
-.Checkbox__input[disabled] ~ .Checkbox__container {
-  opacity: 0.6;
+.Checkbox__input:indeterminate ~ .Checkbox__icon--indeterminate {
+  display: flex;
 }
 
-/**
- * iOS
- */
-
-.Checkbox--ios {
-  padding: 0 12px;
+.Checkbox__input:indeterminate ~ .Checkbox__icon--on,
+.Checkbox__input:indeterminate ~ .Checkbox__icon--off {
+  display: none;
 }
 
-/**
- * Android
- */
-
-.Checkbox--android {
-  padding: 0 16px;
+.Checkbox__input[disabled] ~ * {
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 /**
  * sizeY COMPACT
  */
 
+.Checkbox--sizeY-compact {
+  min-width: var(--vkui--size_field_height--compact);
+  min-height: var(--vkui--size_field_height--compact);
+}
+
 .Checkbox--sizeY-compact .Checkbox__children {
   margin-top: 8px;
 }
@@ -97,31 +96,18 @@
   margin-bottom: 8px;
 }
 
-/**
- * VKCOM
- */
-
-.Checkbox--vkcom {
-  padding: 0 16px;
-}
-
-.Checkbox--vkcom .Checkbox__icon {
-  margin-right: 10px;
-}
-
-.Checkbox--vkcom .Checkbox__input[disabled] ~ .Checkbox__container {
-  opacity: 0.4;
-}
-
-.Checkbox--vkcom .Checkbox__children {
-  margin-top: 8px;
+.Checkbox--simple {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  border-radius: 50%;
 }
 
-.Checkbox--vkcom .Checkbox__children:last-child {
-  margin-bottom: 8px;
+.Checkbox--simple .Checkbox__content {
+  display: none;
 }
 
-.Checkbox--vkcom .Checkbox__description {
-  margin-top: 1px;
-  margin-bottom: 8px;
+.Checkbox--simple .Checkbox__icon {
+  margin: 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";
@@ -19,9 +19,11 @@ import {
   SizeType,
 } from "../../hoc/withAdaptivity";
 import { Text } from "../Typography/Text/Text";
-import { Headline } from "../Typography/Headline/Headline";
 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,12 @@ export interface CheckboxProps
     HasRef<HTMLInputElement>,
     AdaptivityProps {
   description?: React.ReactNode;
+  indeterminate?: boolean;
+  defaultIndeterminate?: boolean;
 }
 
+const warn = warnOnce("Checkbox");
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
@@ -42,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 ContentTypography =
-    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}
@@ -63,34 +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>
-        <ContentTypography vkuiClass="Checkbox__content" Component="div">
-          <div vkuiClass="Checkbox__children">{children}</div>
-          {hasReactNode(description) && (
-            <Caption vkuiClass="Checkbox__description">{description}</Caption>
-          )}
-        </ContentTypography>
+      <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.tsx

@@ -3,7 +3,7 @@ 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";
 

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -71,7 +71,7 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
 /**
  * @see https://vkcom.github.io/VKUI/#/ConfigProvider
  */
-const ConfigProvider: React.FC<ConfigProviderProps> = ({
+export const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
   webviewType = WebviewType.VKAPPS,
   isWebView = vkBridge.isWebView(),
@@ -142,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));
 }