@vkontakte/vkui 4.29.0 → 4.31.0

package/src/components/Tooltip/Readme.md

@@ -48,12 +48,12 @@ class Example extends React.Component {
           <PanelHeader>Tooltip</PanelHeader>
           <Group>
             <List>
-              <Cell>Музыка</Cell>
-              <Cell>Видео</Cell>
-              <Cell>Игры</Cell>
-              <Cell>Закладки</Cell>
-              <Cell>Документы</Cell>
-              <Cell>Денежные переводы</Cell>
+              <SimpleCell>Музыка</SimpleCell>
+              <SimpleCell>Видео</SimpleCell>
+              <SimpleCell>Игры</SimpleCell>
+              <SimpleCell>Закладки</SimpleCell>
+              <SimpleCell>Документы</SimpleCell>
+              <SimpleCell>Денежные переводы</SimpleCell>
             </List>
           </Group>
           <Group>
@@ -64,9 +64,11 @@ class Example extends React.Component {
               onClose={() => this.setState({ tooltip: false })}
               offsetX={10}
             >
-              <Cell onClick={() => this.setState({ activePanel: "tooltip2" })}>
+              <SimpleCell
+                onClick={() => this.setState({ activePanel: "tooltip2" })}
+              >
                 VK Pay
-              </Cell>
+              </SimpleCell>
             </Tooltip>
           </Group>
         </Panel>
@@ -74,39 +76,25 @@ class Example extends React.Component {
         <Panel id="tooltip2">
           <PanelHeader
             left={
-              <PanelHeaderButton
-                onClick={() => this.setState({ activePanel: "tooltip" })}
+              <Tooltip
+                isShown={this.state.tooltip2}
+                onClose={() =>
+                  this.setState({ tooltip2: false, tooltip3: true })
+                }
+                text="Нажмите на кнопку, если хотите вернуться"
+                header="Возвратиться"
               >
-                {this.props.platform === ANDROID ||
-                this.props.platform === VKCOM ? (
-                  <Icon24Back />
-                ) : (
-                  <Icon28ChevronBack />
-                )}
-              </PanelHeaderButton>
-            }
-            right={
-              <PanelHeaderButton>
-                <Tooltip
-                  isShown={this.state.tooltip2}
-                  onClose={() =>
-                    this.setState({ tooltip2: false, tooltip3: true })
-                  }
-                  cornerOffset={-10}
-                  offsetX={7}
-                  text="Обновлённый раздел поможет найти друзей"
-                  header="Рекомендации друзей"
-                >
-                  <Icon24Add />
-                </Tooltip>
-              </PanelHeaderButton>
+                <PanelHeaderBack
+                  onClick={() => this.setState({ activePanel: "tooltip" })}
+                />
+              </Tooltip>
             }
           >
             Tooltip
           </PanelHeader>
           <Group>
             <List>
-              <Cell
+              <SimpleCell
                 before={
                   <Tooltip
                     text="Теперь у нас появились аватарки в списках. Правда круто?"
@@ -120,25 +108,25 @@ class Example extends React.Component {
                 description="Веб-сайт"
               >
                 Команда ВКонтакте
-              </Cell>
-              <Cell before={<Avatar />} description="Музыкант">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Музыкант">
                 Robbie Williams
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
-              <Cell before={<Avatar />} description="Издательский дом">
+              </SimpleCell>
+              <SimpleCell before={<Avatar />} description="Издательский дом">
                 ПостНаука
-              </Cell>
+              </SimpleCell>
             </List>
           </Group>
         </Panel>

package/src/components/Tooltip/Tooltip.tsx

@@ -179,8 +179,8 @@ const Tooltip: React.FC<TooltipProps> = ({
     (multiChildren || primitiveChild) &&
       warn(
         [
-          "children must be a single React element, got",
-          multiChildren && "multiple",
+          "children должен быть одним React элементом, получено",
+          multiChildren && "несколько",
           primitiveChild && JSON.stringify(children),
         ]
           .filter(Boolean)

package/src/components/Typography/Text/Text.tsx

@@ -28,7 +28,10 @@ const Text: React.FC<TextProps> = ({
     typeof Component !== "string" &&
     getRootRef
   ) {
-    warn("getRootRef can only be used with DOM components", "error");
+    warn(
+      `Свойство "getRootRef" может использоваться только с компонентами DOM`,
+      "error"
+    );
   }
 
   return (

package/src/hooks/useAdaptivity.ts

@@ -3,10 +3,25 @@ import {
   AdaptivityContext,
   AdaptivityProps,
   AdaptivityContextInterface,
+  ViewWidth,
+  ViewHeight,
 } from "../components/AdaptivityProvider/AdaptivityContext";
+import { usePlatform } from "./usePlatform";
+import { VKCOM } from "../lib/platform";
 
 export type { AdaptivityProps };
 
 export const useAdaptivity = (): AdaptivityContextInterface => {
   return React.useContext(AdaptivityContext);
 };
+
+export const useAdaptivityIsDesktop = (): boolean => {
+  const platform = usePlatform();
+  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
+
+  return (
+    (viewWidth >= ViewWidth.SMALL_TABLET &&
+      (hasMouse || viewHeight >= ViewHeight.MEDIUM)) ||
+    platform === VKCOM
+  );
+};

package/src/hooks/useCalendar.ts

@@ -8,8 +8,13 @@ import {
   isAfter,
   startOfDay,
 } from "../lib/date";
+import { CalendarProps } from "../components/Calendar/Calendar";
 
-export interface UseCalendarDependencies {
+export interface UseCalendarDependencies
+  extends Pick<
+    CalendarProps,
+    "onHeaderChange" | "onNextMonth" | "onPrevMonth"
+  > {
   value?: Array<Date | null> | Date;
   disablePast?: boolean;
   disableFuture?: boolean;
@@ -21,19 +26,30 @@ export function useCalendar({
   disablePast,
   disableFuture,
   shouldDisableDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
 }: UseCalendarDependencies) {
   const [viewDate, setViewDate] = React.useState(
     (Array.isArray(value) ? value[0] : value) ?? new Date()
   );
   const [focusedDay, setFocusedDay] = React.useState<Date>();
 
-  const setPrevMonth = React.useCallback(
-    () => setViewDate(subMonths(viewDate, 1)),
-    [viewDate]
-  );
-  const setNextMonth = React.useCallback(
-    () => setViewDate(addMonths(viewDate, 1)),
-    [viewDate]
+  const setPrevMonth = React.useCallback(() => {
+    onPrevMonth?.();
+    setViewDate(subMonths(viewDate, 1));
+  }, [viewDate, onPrevMonth]);
+  const setNextMonth = React.useCallback(() => {
+    onNextMonth?.();
+    setViewDate(addMonths(viewDate, 1));
+  }, [viewDate, onNextMonth]);
+
+  const handleSetViewDate = React.useCallback(
+    (value: Date) => {
+      onHeaderChange?.(value);
+      setViewDate(value);
+    },
+    [onHeaderChange]
   );
 
   const isDayFocused = React.useCallback(
@@ -66,7 +82,7 @@ export function useCalendar({
 
   return {
     viewDate,
-    setViewDate,
+    setViewDate: handleSetViewDate,
     setPrevMonth,
     setNextMonth,
     focusedDay,

package/src/index.ts

@@ -200,7 +200,7 @@ export { Select } from "./components/Select/Select";
 export type { SelectProps } from "./components/Select/Select";
 export { default as SelectMimicry } from "./components/SelectMimicry/SelectMimicry";
 export type { SelectMimicryProps } from "./components/SelectMimicry/SelectMimicry";
-export { default as NativeSelect } from "./components/NativeSelect/NativeSelect";
+export { NativeSelect } from "./components/NativeSelect/NativeSelect";
 export type { NativeSelectProps } from "./components/NativeSelect/NativeSelect";
 export { CustomSelect } from "./components/CustomSelect/CustomSelect";
 export type {
@@ -308,6 +308,7 @@ export { usePlatform } from "./hooks/usePlatform";
 export { useAdaptivity } from "./hooks/useAdaptivity";
 export { useAppearance } from "./hooks/useAppearance";
 export { usePagination } from "./hooks/usePagination";
+export { useScrollLock } from "./components/AppRoot/ScrollContext";
 
 /**
  * Utils

package/src/lib/getNavId.ts

@@ -9,7 +9,7 @@ export interface NavIdProps {
 export function getNavId(props: NavIdProps, warn?: WarnOnceHandler) {
   const id = props.nav || props.id;
   if (process.env.NODE_ENV === "development" && !id && warn) {
-    warn('Navigation item should have "nav" or "id" prop', "error");
+    warn('Навигационный элемент должен иметь свойство "nav" или "id"', "error");
   }
   return id;
 }

package/src/lib/platform.ts

@@ -1,4 +1,6 @@
 import { BrowserInfo, computeBrowserInfo } from "./browser";
+import { querystring } from "@vkontakte/vkjs";
+import { canUseDOM } from "./dom";
 
 export enum Platform {
   ANDROID = "android",
@@ -6,6 +8,34 @@ export enum Platform {
   VKCOM = "vkcom",
 }
 
+const PLATFORM_ALIAS = {
+  desktop_web: Platform.VKCOM,
+};
+
+function isPlatformAlias(
+  platformAlias: string
+): platformAlias is keyof typeof PLATFORM_ALIAS {
+  return platformAlias in PLATFORM_ALIAS;
+}
+
+/**
+ * Значение, которое передаётся в качестве query-параметра при открытии VK Mini Apps
+ * @see {@link https://dev.vk.com/mini-apps/development/launch-params#vk_platform vk_platform}
+ */
+function getPlatformByQueryString(queryString: string): Platform | undefined {
+  const parsedQuery = querystring.parse(queryString);
+  const platformAliasByQuery = parsedQuery["vk_platform"];
+
+  return typeof platformAliasByQuery === "string" &&
+    isPlatformAlias(platformAliasByQuery)
+    ? PLATFORM_ALIAS[platformAliasByQuery]
+    : undefined;
+}
+
+const platformByQueryString = canUseDOM
+  ? getPlatformByQueryString(location.search)
+  : undefined;
+
 export const ANDROID = Platform.ANDROID;
 export const IOS = Platform.IOS;
 export const VKCOM = Platform.VKCOM;
@@ -17,6 +47,10 @@ export type PlatformType =
   | string;
 
 export function platform(browserInfo?: BrowserInfo): PlatformType {
+  if (platformByQueryString) {
+    return platformByQueryString;
+  }
+
   if (!browserInfo) {
     browserInfo = computeBrowserInfo();
   }

package/src/styles/bright_light.css

@@ -52,6 +52,7 @@ body[scheme="bright_light"],
   --content_tint_foreground: #7f8285;
   --content_warning_background: #fff2d6;
   --control_background: #ebedf0;
+  --control_background_secondary: #ffffff;
   --control_foreground: #5181b8;
   --control_tint: #ffffff;
   --control_tint_muted: #76787a;
@@ -65,6 +66,7 @@ body[scheme="bright_light"],
   --dynamic_blue: #2688eb;
   --dynamic_gray: #a3adb8;
   --dynamic_green: #4bb34b;
+  --dynamic_neon_pink: #f45fff;
   --dynamic_orange: #ffa000;
   --dynamic_purple: #735ce6;
   --dynamic_raspberry_pink: #e03fab;

package/src/styles/constants.css

@@ -32,14 +32,15 @@
   --thin-border: 1px;
 
   /* paddings */
+  /* TODO: v5 удалить */
   --formitem_padding: 16px;
 
   /* colors */
   --white: #fff;
   --blue_200: #5c9ce6;
 
-  /* iOS insets */
-  --safe-area-inset-top: 20px;
+  /* insets */
+  --safe-area-inset-top: 0px;
   --safe-area-inset-right: 0px;
   --safe-area-inset-bottom: 0px;
   --safe-area-inset-left: 0px;

package/src/styles/space_gray.css

@@ -5,7 +5,7 @@
 body[scheme="space_gray"],
 [scheme="space_gray"],
 .vkuispace_gray {
-  --accent: #71aaeb;
+  --accent: #529ef4;
   --accent_alternate: #ffffff;
   --action_sheet_action_foreground: #ffffff;
   --action_sheet_separator: rgba(255, 255, 255, 0.12);
@@ -23,7 +23,7 @@ body[scheme="space_gray"],
   --background_light: #232324;
   --background_page: #0a0a0a;
   --background_suggestions: #2c2d2e;
-  --background_text_highlighted: rgba(113, 170, 235, 0.24);
+  --background_text_highlighted: rgba(82, 158, 244, 0.24);
   --button_bot_shadow: #19191a;
   --button_commerce_background: #4bb34b;
   --button_commerce_foreground: #ffffff;
@@ -51,6 +51,7 @@ body[scheme="space_gray"],
   --content_tint_foreground: #909499;
   --content_warning_background: #857250;
   --control_background: #454647;
+  --control_background_secondary: #76787a;
   --control_foreground: #e1e3e6;
   --control_tint: #19191a;
   --control_tint_muted: #909499;
@@ -64,6 +65,7 @@ body[scheme="space_gray"],
   --dynamic_blue: #2688eb;
   --dynamic_gray: #a3adb8;
   --dynamic_green: #4bb34b;
+  --dynamic_neon_pink: #f45fff;
   --dynamic_orange: #ffa000;
   --dynamic_purple: #937ff5;
   --dynamic_raspberry_pink: #f060c0;
@@ -90,7 +92,7 @@ body[scheme="space_gray"],
   --header_search_field_background: #363738;
   --header_search_field_tint: #aaaeb3;
   --header_tab_active_background: #5d5f61;
-  --header_tab_active_indicator: #71aaeb;
+  --header_tab_active_indicator: #529ef4;
   --header_tab_active_text: #e1e3e6;
   --header_tab_inactive_text: #76787a;
   --header_text: #e1e3e6;
@@ -141,7 +143,7 @@ body[scheme="space_gray"],
   --im_forward_line_tint: rgba(255, 255, 255, 0.24);
   --im_reply_separator: #ffffff;
   --im_service_message_text: #76787a;
-  --im_text_name: #71aaeb;
+  --im_text_name: #529ef4;
   --im_toolbar_separator: #aaaeb3;
   --im_toolbar_voice_msg_background: #454647;
   --image_border: rgba(255, 255, 255, 0.08);
@@ -171,7 +173,7 @@ body[scheme="space_gray"],
   --loader_track_value_fill: #ffffff;
   --media_overlay_button_background: #ffffff;
   --media_overlay_button_foreground: #2c2d2e;
-  --modal_card_background: #2c2d2e;
+  --modal_card_background: #232324;
   --modal_card_border: rgba(255, 255, 255, 0.12);
   --modal_card_header_close: #ffffff;
   --music_playback_icon: #ffffff;
@@ -217,14 +219,14 @@ body[scheme="space_gray"],
   --tabbar_active_icon: #ffffff;
   --tabbar_background: #2c2d2e;
   --tabbar_inactive_icon: #76787a;
-  --tabbar_tablet_active_icon: #71aaeb;
+  --tabbar_tablet_active_icon: #529ef4;
   --tabbar_tablet_background: #232324;
   --tabbar_tablet_inactive_icon: #76787a;
   --tabbar_tablet_text_primary: #e1e3e6;
   --tabbar_tablet_text_secondary: #76787a;
   --text_action_counter: #aaaeb3;
-  --text_link: #71aaeb;
-  --text_link_highlighted_background: #71aaeb;
+  --text_link: #529ef4;
+  --text_link_highlighted_background: #529ef4;
   --text_muted: #c4c8cc;
   --text_name: #e1e3e6;
   --text_placeholder: #aaaeb3;

package/src/styles/vkcom_dark.css

@@ -21,7 +21,7 @@ body[scheme="vkcom_dark"],
   --background_hover: rgba(255, 255, 255, 0.08);
   --background_keyboard: #333333;
   --background_light: #292929;
-  --background_page: #0a0a0a;
+  --background_page: #141414;
   --background_suggestions: #333333;
   --background_text_highlighted: rgba(81, 129, 184, 0.2);
   --button_bot_shadow: #222222;
@@ -53,10 +53,11 @@ body[scheme="vkcom_dark"],
   --content_placeholder_icon: #b2b2b2;
   --content_placeholder_text: #b2b2b2;
   --content_positive_background: rgba(75, 179, 75, 0.16);
-  --content_tint_background: #292929;
+  --content_tint_background: #333333;
   --content_tint_foreground: #939393;
   --content_warning_background: rgba(255, 202, 99, 0.16);
   --control_background: #555555;
+  --control_background_secondary: #828282;
   --control_foreground: #e1e3e6;
   --control_tint: #222222;
   --control_tint_muted: #939393;
@@ -70,6 +71,7 @@ body[scheme="vkcom_dark"],
   --dynamic_blue: #5181b8;
   --dynamic_gray: #aeb7c2;
   --dynamic_green: #4bb34b;
+  --dynamic_neon_pink: #f45fff;
   --dynamic_orange: #ffa000;
   --dynamic_purple: #937ff5;
   --dynamic_raspberry_pink: #f060c0;
@@ -177,7 +179,7 @@ body[scheme="vkcom_dark"],
   --loader_track_value_fill: #ffffff;
   --media_overlay_button_background: #ffffff;
   --media_overlay_button_foreground: #333333;
-  --modal_card_background: #333333;
+  --modal_card_background: #292929;
   --modal_card_border: rgba(255, 255, 255, 0.12);
   --modal_card_header_close: #ffffff;
   --music_playback_icon: #ffffff;
@@ -203,7 +205,7 @@ body[scheme="vkcom_dark"],
   --segmented_control_tint: #828282;
   --selection_off_icon: #656565;
   --separator_alpha: rgba(255, 255, 255, 0.16);
-  --separator_alternate: #292929;
+  --separator_alternate: #333333;
   --separator_common: #424242;
   --skeleton_foreground_from: #292929;
   --skeleton_foreground_to: #333333;

package/src/styles/vkcom_light.css

@@ -54,7 +54,7 @@ body[scheme="vkcom_light"],
   --button_tertiary_background: rgba(0, 0, 0, 0);
   --button_tertiary_foreground: #2a5885;
   --cell_button_foreground: #2a5885;
-  --content_negative_background: #ff5c5c;
+  --content_negative_background: #faebeb;
   --content_placeholder_icon: #99a2ad;
   --content_placeholder_text: #818c99;
   --content_positive_background: #def0d3;
@@ -62,6 +62,7 @@ body[scheme="vkcom_light"],
   --content_tint_foreground: #828282;
   --content_warning_background: #faefd2;
   --control_background: #edeef0;
+  --control_background_secondary: #ffffff;
   --control_foreground: #5181b8;
   --control_tint: #ffffff;
   --control_tint_muted: #828282;
@@ -75,6 +76,7 @@ body[scheme="vkcom_light"],
   --dynamic_blue: #5181b8;
   --dynamic_gray: #aeb7c2;
   --dynamic_green: #1b7a1b;
+  --dynamic_neon_pink: #f45fff;
   --dynamic_orange: #ffa000;
   --dynamic_purple: #735ce6;
   --dynamic_raspberry_pink: #e03fab;
@@ -211,7 +213,7 @@ body[scheme="vkcom_light"],
   --separator_alternate: #e7e8ec;
   --separator_common: #dce1e6;
   --skeleton_foreground_from: #f0f2f5;
-  --skeleton_foreground_to: #e7e8ec;
+  --skeleton_foreground_to: #edeef0;
   --skeleton_shimmer_from: #ffffff;
   --skeleton_shimmer_to: rgba(255, 255, 255, 0);
   --snippet_background: #ffffff;

package/src/testing/utils.tsx

@@ -142,9 +142,13 @@ export const mockScrollContext = (
 ): [React.FC, jest.Mock] => {
   const getScroll = () => ({ x: 0, y: getY() });
   const scrollTo = jest.fn();
+  const enableScrollLock = jest.fn();
+  const disableScrollLock = jest.fn();
   return [
     (props) => (
-      <ScrollContext.Provider value={{ getScroll, scrollTo }}>
+      <ScrollContext.Provider
+        value={{ getScroll, scrollTo, enableScrollLock, disableScrollLock }}
+      >
         {props.children}
       </ScrollContext.Provider>
     ),

package/tsconfig.json

@@ -29,6 +29,7 @@
     ".github/**/*.js",
     "eslint-plugin-vkui/*.js",
     "postcss-plugin-vk-sans/*.js",
+    "postcss-custom-properties-fallback/*.js",
     "*.js"
   ],
   "files": [