@vkontakte/vkui 4.29.0 → 4.31.0

package/jest.unit.config.js

@@ -4,6 +4,7 @@ module.exports = {
   roots: [
     path.join(__dirname, "src"),
     path.join(__dirname, "postcss-plugin-vk-sans"),
+    path.join(__dirname, "postcss-custom-properties-fallback"),
   ],
   setupFilesAfterEnv: [path.join(__dirname, "src/testing/setup.ts")],
   collectCoverage: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.29.0",
+  "version": "4.31.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -43,11 +43,11 @@
     "@types/webpack-dev-server": "^3.11.2",
     "@typescript-eslint/eslint-plugin": "^2.28.0",
     "@typescript-eslint/parser": "^2.0.0",
-    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.29.0",
+    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.40.4",
     "@vkontakte/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.145.1",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.7.0",
+    "@vkontakte/vkui-tokens": "4.10.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -86,6 +86,8 @@
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.2.1",
     "postcss-modules": "^4.3.0",
+    "postcss-value-parser": "^4.2.0",
+    "postcss-values-parser": "^6.0.2",
     "prettier": "^2.5.1",
     "process": "^0.11.10",
     "prop-types": "^15.6.2",

package/postcss-custom-properties-fallback/__tests__/custom_properties.css

@@ -0,0 +1,5 @@
+/* stylelint-disable-next-line vkui/atomic */
+:root {
+  --color: red;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}

package/postcss-custom-properties-fallback/index.js

@@ -0,0 +1,83 @@
+/* stylelint-disable */
+const fs = require("fs");
+const valueParser = require("postcss-value-parser");
+const { nodeToString, parse: parseValues } = require("postcss-values-parser");
+const { parse } = require("postcss");
+
+const isTransformableDecl = (decl) =>
+  /(^|[^\w-])var\([\W\w]+\)/.test(decl.value);
+
+function parseCustomProperties(importFrom) {
+  const customProperties = new Map();
+
+  parse(fs.readFileSync(importFrom, "utf8")).walkRules((rule) => {
+    if (rule.selector === ":root") {
+      rule.walkDecls((decl) => {
+        if (decl.prop.startsWith("--")) {
+          customProperties.set(
+            decl.prop,
+            parseValues(String(decl.value)).nodes
+          );
+        }
+      });
+    }
+  });
+
+  return customProperties;
+}
+
+module.exports = (opts) => {
+  return {
+    postcssPlugin: "custom-properties-fallback",
+    prepare() {
+      const customProperties = parseCustomProperties(opts.importFrom);
+      const shouldTransformableDecl =
+        opts.shouldTransformableDecl || isTransformableDecl;
+
+      return {
+        Declaration(node) {
+          if (shouldTransformableDecl(node)) {
+            const parsed = valueParser(node.value);
+
+            parsed.walk((node) => {
+              if (node.type !== "function" || node.nodes.length !== 1) {
+                return;
+              }
+
+              const firstValue = node.nodes[0].value;
+
+              if (
+                !customProperties.has(firstValue) ||
+                customProperties.get(firstValue).length === 0
+              ) {
+                return;
+              }
+
+              const fallback = customProperties.get(firstValue);
+
+              node.nodes.push(
+                {
+                  type: "divider",
+                  value: ",",
+                },
+                {
+                  type: "word",
+                  value:
+                    fallback.length > 1
+                      ? fallback
+                          .map((fallbackNode) => nodeToString(fallbackNode))
+                          .join(" ")
+                      : fallback,
+                }
+              );
+            });
+
+            node.value = parsed.toString();
+          }
+        },
+      };
+    },
+  };
+};
+
+module.exports.postcss = true;

package/postcss-plugin-vk-sans/index.js

@@ -1,5 +1,4 @@
 /* stylelint-disable */
-const postcss = require("postcss");
 const fs = require("fs");
 const path = require("path");
 
@@ -88,14 +87,18 @@ const updateFontSizeStats = (value = "", platform) => {
   return ++cache.fontSizeUsages[value];
 };
 
-const extendConfigWithCustomProperties = (customPropertiesFile, platform) => {
+const extendConfigWithCustomProperties = (
+  customPropertiesFile,
+  platform,
+  parse
+) => {
   const customProperties = fs.readFileSync(
     path.resolve(customPropertiesFile),
     "utf8"
   );
   const customPropertiesValues = {};
 
-  postcss.parse(customProperties).walkRules((rule) => {
+  parse(customProperties).walkRules((rule) => {
     if (
       rule.parent.type === "root" &&
       rule.type === "rule" &&
@@ -153,38 +156,42 @@ const initializeConfig = (platform, overrides) => {
   }
 };
 
-const initializeCustomPropertiesFiles = (customPropertiesFiles, platform) => {
+const initializeCustomPropertiesFiles = (
+  customPropertiesFiles,
+  platform,
+  parse
+) => {
   customPropertiesFiles.forEach((i) => {
     if (!initializedCustomPropertiesFiles.has(i)) {
-      extendConfigWithCustomProperties(i, platform);
+      extendConfigWithCustomProperties(i, platform, parse);
       initializedCustomPropertiesFiles.add(i);
     }
   });
 };
 
-const VkSansMandatoryDeclarations = postcss.plugin(
-  "vk-sans-mandatory-declarations",
-  (opts) => {
-    const {
-      debug,
-      overrides,
-      platform = "test",
-      features = defaultFeatures,
-      customPropertiesFiles,
-      ignoreFiles,
-      ignoreSelectors,
-      explicitNormalLetterSpacing,
-      respectImportant,
-      varName = "--palette-vk-font",
-    } = opts;
-
-    return (css) => {
+module.exports = (opts) => {
+  const {
+    debug,
+    overrides,
+    platform = "test",
+    features = defaultFeatures,
+    customPropertiesFiles,
+    ignoreFiles,
+    ignoreSelectors,
+    explicitNormalLetterSpacing,
+    respectImportant,
+    varName = "--palette-vk-font",
+  } = opts;
+
+  return {
+    postcssPlugin: "vk-sans-mandatory-declarations",
+    Once(css, { parse }) {
       if (!cache.config[platform]) {
         initializeConfig(platform, overrides);
       }
 
       if (customPropertiesFiles) {
-        initializeCustomPropertiesFiles(customPropertiesFiles, platform);
+        initializeCustomPropertiesFiles(customPropertiesFiles, platform, parse);
       }
 
       if (
@@ -336,8 +343,8 @@ const VkSansMandatoryDeclarations = postcss.plugin(
           }
         });
       }
-    };
-  }
-);
+    },
+  };
+};
 
-module.exports = VkSansMandatoryDeclarations;
+module.exports.postcss = true;

package/src/components/ActionSheet/ActionSheet.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
-import { ViewWidth, ViewHeight } from "../../hoc/withAdaptivity";
 import { IOS } from "../../lib/platform";
 import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
 import { ActionSheetDropdown } from "./ActionSheetDropdown";
@@ -9,10 +8,11 @@ import { ActionSheetContext, ItemClickHandler } from "./ActionSheetContext";
 import { Caption } from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useTimeout } from "../../hooks/useTimeout";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
 import { warnOnce } from "../../lib/warnOnce";
 import { SharedDropdownProps, PopupDirection, ToggleRef } from "./types";
+import { useScrollLock } from "../AppRoot/ScrollContext";
 import "./ActionSheet.css";
 
 export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -61,13 +61,15 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
   };
 
   if (process.env.NODE_ENV === "development" && !restProps.onClose) {
-    warn("can't close on outer click without onClose", "error");
+    warn(
+      `Без свойства "onClose" нельзя закрыть ActionSheet по клику вне компонента`,
+      "error"
+    );
   }
 
-  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop = useAdaptivityIsDesktop();
+
+  useScrollLock(!isDesktop);
 
   let timeout = platform === IOS ? 300 : 200;
 

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -38,7 +38,7 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
   useEffectDev(() => {
     const toggleEl = getEl(toggleRef);
     if (!toggleEl) {
-      warn("toggleRef not passed", "error");
+      warn(`Свойство "toggleRef" не передано`, "error");
     }
   }, [toggleRef]);
 

package/src/components/ActionSheet/Readme.md

@@ -1,6 +1,7 @@
 ActionSheet – имитация [нативного компонента](https://developer.apple.com/ios/human-interface-guidelines/views/action-sheets/).
 Удобно использовать, когда нужно дать пользователю выбрать одно из множества действий. В качестве `children` принимает
 коллекцию `ActionSheetItem`.
+На больших экранах прокрутка не отключается.
 
 Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](#/SplitLayout).
 

package/src/components/Alert/Alert.tsx

@@ -19,6 +19,11 @@ import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
+import { withContext } from "../../hoc/withContext";
+import {
+  ScrollContext,
+  ScrollContextInterface,
+} from "../AppRoot/ScrollContext";
 import "./Alert.css";
 
 export type AlertActionInterface = AlertAction &
@@ -40,6 +45,8 @@ export interface AlertProps
   header?: React.ReactNode;
   text?: React.ReactNode;
   onClose?: VoidFunction;
+  /** @ignore */
+  scroll?: ScrollContextInterface;
 }
 
 export type TAlertProps = AlertProps & AdaptivityContextInterface;
@@ -61,6 +68,14 @@ class AlertComponent extends React.Component<TAlertProps, AlertState> {
     };
   }
 
+  componentDidMount() {
+    this.props.scroll?.enableScrollLock();
+  }
+
+  componentWillUnmount() {
+    this.props.scroll?.disableScrollLock();
+  }
+
   element: React.RefObject<HTMLDivElement>;
 
   private transitionFinishTimeout: number | undefined = undefined;
@@ -282,8 +297,12 @@ class AlertComponent extends React.Component<TAlertProps, AlertState> {
   }
 }
 
-export const Alert = withPlatform(
-  withAdaptivity(AlertComponent, {
-    viewWidth: true,
-  })
+export const Alert = withContext(
+  withPlatform(
+    withAdaptivity(AlertComponent, {
+      viewWidth: true,
+    })
+  ),
+  ScrollContext,
+  "scroll"
 );

package/src/components/AppRoot/AppRoot.tsx

@@ -21,6 +21,7 @@ import { warnOnce } from "../../lib/warnOnce";
 import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker";
 import { useInsets } from "../../hooks/useInsets";
 import { Insets } from "@vkontakte/vk-bridge";
+import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import "./AppRoot.css";
 
 // Используйте classList, но будьте осторожны
@@ -60,6 +61,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     );
     const { window, document } = useDOM();
     const insets = useInsets();
+    const { appearance } = React.useContext(ConfigProviderContext);
 
     const initialized = React.useRef(false);
     if (!initialized.current) {
@@ -72,10 +74,13 @@ export const AppRoot = withAdaptivity<AppRootProps>(
 
     if (process.env.NODE_ENV === "development") {
       if (scroll !== "global" && mode !== "embedded") {
-        warn("Scroll modes only supported in embedded mode", "error");
+        warn(
+          `Свойство scroll="${scroll}" поддерживается только в режиме embedded`,
+          "error"
+        );
       }
       if (_mode && _embedded) {
-        warn(`mode="${mode}" overrides embedded`);
+        warn(`Свойство mode="${mode}" приоритетнее, чем "embedded"`);
       }
     }
 
@@ -155,6 +160,16 @@ export const AppRoot = withAdaptivity<AppRootProps>(
       return () => container?.classList.remove("vkui--sizeX-regular");
     }, [sizeX]);
 
+    useIsomorphicLayoutEffect(() => {
+      if (mode !== "full" || appearance === undefined) {
+        return noop;
+      }
+      document!.documentElement.style.setProperty("color-scheme", appearance);
+
+      return () =>
+        document!.documentElement.style.removeProperty("color-scheme");
+    }, [appearance]);
+
     const scrollController = React.useMemo<ScrollContextInterface>(
       () =>
         scroll === "contain"

package/src/components/AppRoot/ScrollContext.ts

@@ -1,21 +1,39 @@
 import * as React from "react";
 import { noop } from "../../lib/utils";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { clamp } from "../../helpers/math";
 
+const clearDisableScrollStyle = (node: HTMLElement) => {
+  Object.assign(node.style, {
+    position: "",
+    top: "",
+    left: "",
+    right: "",
+    overflowY: "",
+    overflowX: "",
+  });
+};
+
 export interface ScrollContextInterface {
   getScroll(): { x: number; y: number };
   scrollTo(x?: number, y?: number): void;
+  enableScrollLock(): void;
+  disableScrollLock(): void;
 }
 
 export const ScrollContext = React.createContext<ScrollContextInterface>({
   getScroll: () => ({ x: 0, y: 0 }),
   scrollTo: noop,
+  enableScrollLock: noop,
+  disableScrollLock: noop,
 });
 
+export const useScroll = () => React.useContext(ScrollContext);
+
 export const globalScrollController = (
   window: Window | undefined,
   document: HTMLDocument | undefined
-) => ({
+): ScrollContextInterface => ({
   getScroll: () => ({ x: window!.pageXOffset, y: window!.pageYOffset }),
   scrollTo: (x = 0, y = 0) => {
     // Some iOS versions do not normalize scroll — do it manually.
@@ -24,11 +42,39 @@ export const globalScrollController = (
       y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0
     );
   },
+  enableScrollLock: () => {
+    const scrollY = window!.pageYOffset;
+    const scrollX = window!.pageXOffset;
+    const overflowY =
+      window!.innerWidth > document!.documentElement.clientWidth
+        ? "scroll"
+        : "";
+    const overflowX =
+      window!.innerHeight > document!.documentElement.clientHeight
+        ? "scroll"
+        : "";
+
+    Object.assign(document!.body.style, {
+      position: "fixed",
+      top: `-${scrollY}px`,
+      left: `-${scrollX}px`,
+      right: "0",
+      overflowY,
+      overflowX,
+    });
+  },
+  disableScrollLock: () => {
+    const scrollY = document!.body.style.top;
+    const scrollX = document!.body.style.left;
+
+    clearDisableScrollStyle(document!.body);
+    window!.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+  },
 });
 
 export const elementScrollController = (
   elRef: React.RefObject<HTMLElement>
-) => ({
+): ScrollContextInterface => ({
   getScroll: () => ({
     x: elRef.current?.scrollLeft ?? 0,
     y: elRef.current?.scrollTop ?? 0,
@@ -41,4 +87,46 @@ export const elementScrollController = (
       y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0
     );
   },
+  enableScrollLock: () => {
+    const el = elRef.current;
+    if (!el) {
+      return;
+    }
+    const scrollY = el.scrollTop;
+    const scrollX = el.scrollLeft;
+    const overflowY = el.scrollWidth > el.clientWidth ? "scroll" : "";
+    const overflowX = el.scrollHeight > el.clientHeight ? "scroll" : "";
+
+    Object.assign(el.style, {
+      position: "absolute",
+      top: `-${scrollY}px`,
+      left: `-${scrollX}px`,
+      right: "0",
+      overflowY,
+      overflowX,
+    });
+  },
+  disableScrollLock: () => {
+    const el = elRef.current;
+    if (!el) {
+      return;
+    }
+
+    const scrollY = el.style.top;
+    const scrollX = el.style.left;
+
+    clearDisableScrollStyle(el);
+    el.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+  },
 });
+
+export const useScrollLock = (enabled = true) => {
+  const { enableScrollLock, disableScrollLock } = useScroll();
+  useIsomorphicLayoutEffect(() => {
+    if (enabled) {
+      enableScrollLock();
+      return disableScrollLock;
+    }
+    return noop;
+  }, [enableScrollLock, disableScrollLock, enabled]);
+};

package/src/components/Button/Button.css

@@ -568,11 +568,13 @@
   flex: 1;
   margin-left: 6px;
   margin-right: 6px;
+  width: 0;
 }
 
 .ModalCardBase__actions--v .Button {
   margin-left: 0;
   margin-right: 0;
+  width: 100%;
 }
 
 .ModalCardBase__actions--v .Button + .Button {

package/src/components/Calendar/Calendar.tsx

@@ -28,6 +28,10 @@ export interface CalendarProps
       | "nextMonthAriaLabel"
       | "changeMonthAriaLabel"
       | "changeYearAriaLabel"
+      | "onNextMonth"
+      | "onPrevMonth"
+      | "prevMonthIcon"
+      | "nextMonthIcon"
     >,
     HasRootRef<HTMLDivElement> {
   value?: Date;
@@ -43,6 +47,15 @@ export interface CalendarProps
   onChange?(value?: Date): void;
   shouldDisableDate?(value: Date): boolean;
   onClose?(): void;
+  /**
+   * Дата отображаемого месяца.
+   * При использовании обновление даты должно происходить вне компонента.
+   */
+  viewDate?: Date;
+  /**
+   * Изменение даты в шапке календаря.
+   */
+  onHeaderChange?(value: Date): void;
 }
 
 const warn = warnOnce("Calendar");
@@ -68,6 +81,12 @@ export const Calendar: React.FC<CalendarProps> = ({
   showNeighboringMonth,
   changeDayAriaLabel = "Изменить день",
   size = "m",
+  viewDate: externalViewDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
+  prevMonthIcon,
+  nextMonthIcon,
   ...props
 }) => {
   const {
@@ -80,7 +99,15 @@ export const Calendar: React.FC<CalendarProps> = ({
     isDayFocused,
     isDayDisabled,
     resetSelectedDay,
-  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });
+  } = useCalendar({
+    value,
+    disableFuture,
+    disablePast,
+    shouldDisableDate,
+    onHeaderChange,
+    onNextMonth,
+    onPrevMonth,
+  });
 
   useIsomorphicLayoutEffect(() => {
     if (value) {
@@ -140,7 +167,7 @@ export const Calendar: React.FC<CalendarProps> = ({
       vkuiClass={classNames("Calendar", `Calendar--size-${size}`)}
     >
       <CalendarHeader
-        viewDate={viewDate}
+        viewDate={externalViewDate || viewDate}
         onChange={setViewDate}
         onNextMonth={setNextMonth}
         onPrevMonth={setPrevMonth}
@@ -150,9 +177,11 @@ export const Calendar: React.FC<CalendarProps> = ({
         nextMonthAriaLabel={nextMonthAriaLabel}
         changeMonthAriaLabel={changeMonthAriaLabel}
         changeYearAriaLabel={changeYearAriaLabel}
+        prevMonthIcon={prevMonthIcon}
+        nextMonthIcon={nextMonthIcon}
       />
       <CalendarDays
-        viewDate={viewDate}
+        viewDate={externalViewDate || viewDate}
         value={value}
         weekStartsOn={weekStartsOn}
         isDayFocused={isDayFocused}

package/src/components/CalendarHeader/CalendarHeader.css

@@ -21,6 +21,9 @@
   justify-content: center;
   align-items: center;
   padding: 3px;
+}
+
+.CalendarHeader__nav-icon--accent {
   color: var(--vkui--color_icon_accent);
 }
 

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -29,8 +29,16 @@ export interface CalendarHeaderProps
   nextMonthAriaLabel?: string;
   changeMonthAriaLabel?: string;
   changeYearAriaLabel?: string;
+  prevMonthIcon?: React.ReactNode;
+  nextMonthIcon?: React.ReactNode;
   onChange(viewDate: Date): void;
+  /**
+   * Нажатие на кнопку переключения на следующий месяц.
+   */
   onNextMonth?(): void;
+  /**
+   * Нажатие на кнопку переключения на предыдущий месяц.
+   */
   onPrevMonth?(): void;
 }
 
@@ -59,6 +67,20 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
   nextMonthAriaLabel = "Следующий месяц",
   changeMonthAriaLabel = "Изменить месяц",
   changeYearAriaLabel = "Изменить год",
+  prevMonthIcon = (
+    <Icon20ChevronLeftOutline
+      vkuiClass="CalendarHeader__nav-icon--accent"
+      width={30}
+      height={30}
+    />
+  ),
+  nextMonthIcon = (
+    <Icon20ChevronRightOutline
+      vkuiClass="CalendarHeader__nav-icon--accent"
+      width={30}
+      height={30}
+    />
+  ),
 }) => {
   const locale = React.useContext(LocaleProviderContext);
   const onMonthsChange = React.useCallback(
@@ -96,7 +118,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
             subMonths(viewDate, 1)
           )}`}
         >
-          <Icon20ChevronLeftOutline width={30} height={30} />
+          {prevMonthIcon}
         </Tappable>
       )}
       <div vkuiClass="CalendarHeader__pickers">
@@ -160,7 +182,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
             addMonths(viewDate, 1)
           )}`}
         >
-          <Icon20ChevronRightOutline width={30} height={30} />
+          {nextMonthIcon}
         </Tappable>
       )}
     </div>