@vkontakte/vkui 4.25.2 → 4.26.0

package/src/components/PromoBanner/PromoBanner.tsx

@@ -6,6 +6,7 @@ import Avatar from "../Avatar/Avatar";
 import Caption from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
+import { warnOnce } from "../../lib/warnOnce";
 import "./PromoBanner.css";
 
 type StatsType =
@@ -46,6 +47,7 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
   onClose: () => void;
 }
 
+const warn = warnOnce("PromoBanner");
 const PromoBanner = (props: PromoBannerProps) => {
   const platform = usePlatform();
   const { bannerData = {}, onClose, ...restProps } = props;
@@ -55,6 +57,12 @@ const PromoBanner = (props: PromoBannerProps) => {
       ? parseInt(bannerData.ageRestrictions)
       : bannerData.ageRestriction;
 
+  if (bannerData.ageRestriction && process.env.NODE_ENV === "development") {
+    warn(
+      "Свойство bannerData.ageRestriction устарело и будет удалено в 5.0.0. Используйте bannerData.ageRestrictions"
+    );
+  }
+
   const [currentPixel, setCurrentPixel] = React.useState("");
 
   const statsPixels = React.useMemo(

package/src/components/Root/Root.tsx

@@ -15,8 +15,6 @@ import { useTimeout } from "../../hooks/useTimeout";
 import { usePlatform } from "../../hooks/usePlatform";
 import "./Root.css";
 
-const warn = warnOnce("Root");
-
 export interface RootProps
   extends React.HTMLAttributes<HTMLDivElement>,
     NavIdProps {
@@ -43,6 +41,7 @@ export interface RootState {
   prevView?: string;
 }
 
+const warn = warnOnce("Root");
 const Root: React.FC<RootProps> = ({
   popout = null,
   modal,
@@ -135,6 +134,17 @@ const Root: React.FC<RootProps> = ({
     }
   };
 
+  if (process.env.NODE_ENV === "development") {
+    popout &&
+      warn(
+        "Свойство popout устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
+      );
+    modal &&
+      warn(
+        "Свойство modal устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
+      );
+  }
+
   return (
     <div
       {...restProps}

package/src/components/TabbarItem/TabbarItem.tsx

@@ -7,6 +7,7 @@ import { hasReactNode } from "../../lib/utils";
 import Tappable from "../Tappable/Tappable";
 import { Platform } from "../../lib/platform";
 import { HasComponent, HasRootRef } from "../../types";
+import { warnOnce } from "../../lib/warnOnce";
 import "./TabbarItem.css";
 
 export interface TabbarItemProps
@@ -28,6 +29,7 @@ export interface TabbarItemProps
   label?: React.ReactNode;
 }
 
+const warn = warnOnce("TabbarItem");
 const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
   children,
   selected,
@@ -41,7 +43,12 @@ const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
 }: TabbarItemProps) => {
   const platform = usePlatform();
 
-  // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением
+  if (label && process.env.NODE_ENV === "development") {
+    warn(
+      "Свойство label устарело и будет удалено в 5.0.0. Используйте indicator."
+    );
+  }
+
   return (
     <Component
       {...restProps}

package/src/components/View/View.tsx

@@ -24,8 +24,6 @@ import { warnOnce } from "../../lib/warnOnce";
 import { swipeBackExcluded } from "./utils";
 import "./View.css";
 
-const warn = warnOnce("View");
-
 enum SwipeBackResults {
   fail = 1,
   success,
@@ -107,6 +105,7 @@ export interface ViewState {
   browserSwipe: boolean;
 }
 
+const warn = warnOnce("View");
 class View extends React.Component<ViewProps & DOMProps, ViewState> {
   constructor(props: ViewProps) {
     super(props);
@@ -153,6 +152,20 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
 
   panelNodes: { [id: string]: HTMLDivElement | null } = {};
 
+  componentDidMount() {
+    if (process.env.NODE_ENV === "development") {
+      const { popout, modal } = this.props;
+      popout &&
+        warn(
+          "Свойство popout устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
+        );
+      modal &&
+        warn(
+          "Свойство modal устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
+        );
+    }
+  }
+
   componentWillUnmount() {
     const id = getNavId(this.props);
     if (id) {

package/src/index.ts

@@ -41,14 +41,14 @@ export type { FixedLayoutProps } from "./components/FixedLayout/FixedLayout";
  */
 export { PopoutWrapper } from "./components/PopoutWrapper/PopoutWrapper";
 export type { PopoutWrapperProps } from "./components/PopoutWrapper/PopoutWrapper";
-export { default as Alert } from "./components/Alert/Alert";
+export { Alert } from "./components/Alert/Alert";
 export type {
   AlertProps,
   AlertActionInterface,
 } from "./components/Alert/Alert";
 export { ActionSheet } from "./components/ActionSheet/ActionSheet";
 export type { ActionSheetProps } from "./components/ActionSheet/ActionSheet";
-export { default as ActionSheetItem } from "./components/ActionSheetItem/ActionSheetItem";
+export { ActionSheetItem } from "./components/ActionSheetItem/ActionSheetItem";
 export type { ActionSheetItemProps } from "./components/ActionSheetItem/ActionSheetItem";
 export { default as ScreenSpinner } from "./components/ScreenSpinner/ScreenSpinner";
 export type { ScreenSpinnerProps } from "./components/ScreenSpinner/ScreenSpinner";
@@ -239,7 +239,7 @@ export type { ModalCardBaseProps } from "./components/ModalCardBase/ModalCardBas
  * Wrappers
  */
 export { AppRoot } from "./components/AppRoot/AppRoot";
-export { default as AdaptivityProvider } from "./components/AdaptivityProvider/AdaptivityProvider";
+export { AdaptivityProvider } from "./components/AdaptivityProvider/AdaptivityProvider";
 export { default as ConfigProvider } from "./components/ConfigProvider/ConfigProvider";
 export type { ConfigProviderProps } from "./components/ConfigProvider/ConfigProvider";
 export {

package/src/lib/platform.ts

@@ -10,7 +10,11 @@ export const ANDROID = Platform.ANDROID;
 export const IOS = Platform.IOS;
 export const VKCOM = Platform.VKCOM;
 
-export type PlatformType = Platform.ANDROID | Platform.IOS | Platform.VKCOM;
+export type PlatformType =
+  | Platform.ANDROID
+  | Platform.IOS
+  | Platform.VKCOM
+  | string;
 
 export function platform(browserInfo?: BrowserInfo): PlatformType {
   if (!browserInfo) {

package/src/styles/themes.css

@@ -2,3 +2,9 @@
 @import "./space_gray.css";
 @import "./vkcom_light.css";
 @import "./vkcom_dark.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkBaseDark/cssVars/declarations/onlyVariablesLocal.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkIOS/cssVars/declarations/onlyVariablesLocal.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkIOSDark/cssVars/declarations/onlyVariablesLocal.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkCom/cssVars/declarations/onlyVariablesLocal.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css";

package/src/testing/utils.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { render, RenderResult, screen } from "@testing-library/react";
-import AdaptivityProvider from "../components/AdaptivityProvider/AdaptivityProvider";
+import { AdaptivityProvider } from "../components/AdaptivityProvider/AdaptivityProvider";
 import { AdaptivityProps } from "../components/AdaptivityProvider/AdaptivityContext";
 import { ImgOnlyAttributes } from "../lib/utils";
 import { ScrollContext } from "../components/AppRoot/ScrollContext";

package/dist/cjs/tokenized/tokenized.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/tokenized/tokenized.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Button } from \"../components/Button/Button\";\nexport type { ButtonProps } from \"../components/Button/Button\";\n"],"file":"tokenized.js"}

package/dist/cssm/tokenized/tokenized.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/tokenized/tokenized.ts"],"names":["default","Button"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAApB","sourcesContent":["export { default as Button } from \"../components/Button/Button\";\nexport type { ButtonProps } from \"../components/Button/Button\";\n"],"file":"tokenized.js"}

package/dist/tokenized/tokenized.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/tokenized/tokenized.ts"],"names":["default","Button"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAApB","sourcesContent":["export { default as Button } from \"../components/Button/Button\";\nexport type { ButtonProps } from \"../components/Button/Button\";\n"],"file":"tokenized.js"}