@vkontakte/vkui 4.26.0 → 4.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.26.0",
+  "version": "4.27.2",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "@vkontakte/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.136.0",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.2.0",
+    "@vkontakte/vkui-tokens": "4.3.1",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -160,7 +160,7 @@
     "babel-cjs-dev": "yarn babel-base --config-file ./babel.cjs.config.js --out-dir dist/cjs/ --watch",
     "tsc-dev": "tsc --emitDeclarationOnly --declaration --outDir dist/ --watch --preserveWatchOutput",
     "tsc-cjs-dev": "tsc --emitDeclarationOnly --declaration --outDir dist/cjs/ --watch --preserveWatchOutput",
-    "build:types": "yarn tsc && yarn tsc-cjs",
+    "build:types": "yarn tsc && yarn tsc-cjs && yarn tsc-cssm",
     "build:no-types": "concurrently 'yarn:babel' 'yarn:babel-cssm' 'yarn:babel-cjs' 'yarn:postcss'",
     "build": "yarn build:types && yarn build:no-types",
     "postcss": "cross-env NODE_ENV=production concurrently 'yarn:postcss-bundle' 'yarn:postcss-modules'",
@@ -169,6 +169,7 @@
     "babel-cjs": "cross-env NODE_ENV=production yarn babel-base --config-file ./babel.cjs.config.js --out-dir dist/cjs/ --source-maps",
     "tsc": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration -p tsconfig.dist.json",
     "tsc-cjs": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration --outDir dist/cjs/ -p tsconfig.dist.json",
+    "tsc-cssm": "cross-env NODE_ENV=production tsc --emitDeclarationOnly --declaration --outDir dist/cssm/ -p tsconfig.dist.json",
     "clear": "shx rm -rf dist/*",
     "test:unit": "jest --config jest.unit.config.js",
     "test:unit:ci": "yarn test:unit --ci --silent --outputFile test-results.json --json --coverage --coverageReporters='json' --coverageDirectory='.nyc_output'",

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -26,6 +26,8 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
   closing,
   popupDirection,
   onClose,
+  className,
+  style,
   ...restProps
 }) => {
   const { document } = useDOM();
@@ -82,6 +84,8 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
         "ActionSheet--desktop",
         `ActionSheet--sizeY-${sizeY}`
       )}
+      className={className}
+      style={style}
       getRef={elementRef}
       forcePortal={false}
     >

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -14,6 +14,7 @@ import {
   ActionSheetContextType,
 } from "../ActionSheet/ActionSheetContext";
 import Caption from "../Typography/Caption/Caption";
+import Headline from "../Typography/Headline/Headline";
 import {
   withAdaptivity,
   AdaptivityProps,
@@ -45,7 +46,7 @@ export interface ActionSheetItemProps
   onImmediateClick?: React.MouseEventHandler<HTMLElement>;
 }
 
-const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
+const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
   children,
   autoclose,
   mode = "default",
@@ -117,30 +118,33 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
             </React.Fragment>
           ) : (
             <React.Fragment>
-              <Title
-                weight={mode === "cancel" ? "medium" : "regular"}
-                level={
-                  isCompact || hasReactNode(before) || platform === ANDROID
-                    ? "3"
-                    : "2"
-                }
-                vkuiClass="ActionSheetItem__children"
-              >
-                {children}
-              </Title>
-              {hasReactNode(meta) && (
+              {platform === ANDROID ? (
+                <Headline weight={mode === "cancel" ? "medium" : "regular"}>
+                  {children}
+                </Headline>
+              ) : (
                 <Title
-                  weight="regular"
-                  level={
-                    isCompact || hasReactNode(before) || platform === ANDROID
-                      ? "3"
-                      : "2"
-                  }
-                  vkuiClass="ActionSheetItem__meta"
+                  weight={mode === "cancel" ? "2" : "3"}
+                  level={isCompact || hasReactNode(before) ? "3" : "2"}
+                  vkuiClass="ActionSheetItem__children"
                 >
-                  {meta}
+                  {children}
                 </Title>
               )}
+              {hasReactNode(meta) &&
+                (platform === ANDROID ? (
+                  <Headline weight={mode === "cancel" ? "medium" : "regular"}>
+                    {children}
+                  </Headline>
+                ) : (
+                  <Title
+                    weight="3"
+                    level={isCompact || hasReactNode(before) ? "3" : "2"}
+                    vkuiClass="ActionSheetItem__meta"
+                  >
+                    {meta}
+                  </Title>
+                ))}
             </React.Fragment>
           )}
         </div>
@@ -154,9 +158,7 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
               {subtitle}
             </Caption>
           ) : (
-            <Subhead weight="regular" vkuiClass="ActionSheetItem__subtitle">
-              {subtitle}
-            </Subhead>
+            <Subhead vkuiClass="ActionSheetItem__subtitle">{subtitle}</Subhead>
           ))}
       </div>
       {selectable && (
@@ -181,8 +183,6 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   );
 };
 
-const ActionSheetItemWithAdaptivity = withAdaptivity(ActionSheetItem, {
+export const ActionSheetItem = withAdaptivity(ActionSheetItemComponent, {
   sizeY: true,
 });
-
-export { ActionSheetItemWithAdaptivity as ActionSheetItem };

package/src/components/Alert/Alert.tsx

@@ -52,7 +52,7 @@ type TransitionEndHandler = (e?: TransitionEvent) => void;
 
 type ItemClickHander = (item: AlertActionInterface) => () => void;
 
-class Alert extends React.Component<TAlertProps, AlertState> {
+class AlertComponent extends React.Component<TAlertProps, AlertState> {
   constructor(props: TAlertProps) {
     super(props);
     this.element = React.createRef();
@@ -136,13 +136,13 @@ class Alert extends React.Component<TAlertProps, AlertState> {
         );
       case IOS:
         return (
-          <Title vkuiClass="Alert__header" weight="semibold" level="3">
+          <Title vkuiClass="Alert__header" weight="1" level="3">
             {header}
           </Title>
         );
       case ANDROID:
         return (
-          <Title vkuiClass="Alert__header" weight="medium" level="2">
+          <Title vkuiClass="Alert__header" weight="2" level="2">
             {header}
           </Title>
         );
@@ -285,10 +285,8 @@ class Alert extends React.Component<TAlertProps, AlertState> {
   }
 }
 
-const AlertWithPlatformAndAdaptivity = withPlatform(
-  withAdaptivity(Alert, {
+export const Alert = withPlatform(
+  withAdaptivity(AlertComponent, {
     viewWidth: true,
   })
 );
-
-export { AlertWithPlatformAndAdaptivity as Alert };

package/src/components/AppRoot/AppRoot.tsx

@@ -20,7 +20,6 @@ import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker";
 import { useInsets } from "../../hooks/useInsets";
-import { AppearanceProviderContext } from "../AppearanceProvider/AppearanceProviderContext";
 import { Insets } from "@vkontakte/vk-bridge";
 import "./AppRoot.css";
 
@@ -61,7 +60,6 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     );
     const { window, document } = useDOM();
     const insets = useInsets();
-    const appearanceContext = React.useContext(AppearanceProviderContext);
 
     const initialized = React.useRef(false);
     if (!initialized.current) {
@@ -165,10 +163,6 @@ export const AppRoot = withAdaptivity<AppRootProps>(
       [document, scroll, window]
     );
 
-    useIsomorphicLayoutEffect(() => {
-      portalRoot?.setAttribute("scheme", appearanceContext?.scheme ?? "");
-    }, [portalRoot, appearanceContext?.scheme]);
-
     const content = (
       <AppRootContext.Provider
         value={{

package/src/components/AppRoot/AppRootPortal.tsx

@@ -1,15 +1,23 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { AppRootContext } from "./AppRootContext";
+import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
+import { useAppearance } from "../../hooks/useAppearance";
 
 export const AppRootPortal: React.FC<
   React.PropsWithChildren<{ className?: string; forcePortal?: boolean }>
 > = ({ children, className, forcePortal }) => {
   const { portalRoot, mode } = React.useContext(AppRootContext);
+  const appearance = useAppearance();
 
   forcePortal = forcePortal ?? mode !== "full";
   return portalRoot && forcePortal ? (
-    createPortal(<div className={className}>{children}</div>, portalRoot)
+    createPortal(
+      <AppearanceProvider appearance={appearance}>
+        <div className={className}>{children}</div>
+      </AppearanceProvider>,
+      portalRoot
+    )
   ) : (
     <React.Fragment>{children}</React.Fragment>
   );

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -4,36 +4,53 @@ import { AppearanceProviderContext } from "./AppearanceProviderContext";
 import { getScheme } from "../../helpers/getScheme";
 import { classNamesString } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
+import { Platform } from "../../lib/platform";
 
 export interface AppearanceProviderProps {
   appearance?: AppearanceType;
 }
 
+export const generateVKUITokensClassName = (
+  platform: string,
+  appearance: string
+): string => {
+  let tokensPlatform;
+  switch (platform) {
+    case Platform.ANDROID:
+      tokensPlatform = "vkBase";
+      break;
+    case Platform.IOS:
+      tokensPlatform = "vkIOS";
+      break;
+    case Platform.VKCOM:
+      tokensPlatform = "vkCom";
+      break;
+    default:
+      tokensPlatform = platform;
+  }
+
+  return `vkui--${tokensPlatform}--${appearance}`;
+};
+
 export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
   children,
   appearance = "light",
 }) => {
   const platform = usePlatform();
-
-  const appearanceContext = React.useMemo(
-    () => ({
-      scheme: getScheme({
-        platform,
-        appearance,
-      }),
-      appearance,
-    }),
-    [appearance, platform]
-  );
+  const scheme = getScheme({
+    platform,
+    appearance,
+  });
 
   return (
-    <AppearanceProviderContext.Provider value={appearanceContext}>
+    <AppearanceProviderContext.Provider value={appearance}>
       {React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {
           return React.cloneElement(child, {
             className: classNamesString(
               child.props.className,
-              `vkui${appearanceContext.scheme}`
+              `vkui${scheme}`,
+              generateVKUITokensClassName(platform, appearance)
             ),
           });
         }

package/src/components/AppearanceProvider/AppearanceProviderContext.tsx

@@ -1,12 +1,7 @@
 import * as React from "react";
 import { AppearanceType } from "@vkontakte/vk-bridge";
-import { Scheme } from "../../helpers/scheme";
+import { Appearance } from "../../helpers/scheme";
 
-export interface AppearanceProviderContextProps {
-  scheme: Scheme | "inherit" | undefined;
-  appearance: AppearanceType;
-}
-
-export const AppearanceProviderContext = React.createContext<
-  AppearanceProviderContextProps | undefined
->(undefined);
+export const AppearanceProviderContext = React.createContext<AppearanceType>(
+  Appearance.LIGHT
+);

package/src/components/Banner/Banner.tsx

@@ -88,7 +88,7 @@ const BannerHeader: React.FC<BannerTypographyProps> = ({
   ...restProps
 }) => {
   return size === "m" ? (
-    <Title level="2" weight="medium" {...restProps} />
+    <Title level="2" weight="2" {...restProps} />
   ) : (
     <Headline weight="medium" {...restProps} />
   );
@@ -101,7 +101,7 @@ const BannerSubheader: React.FC<BannerTypographyProps> = ({
   return size === "m" ? (
     <Text weight="regular" {...restProps} />
   ) : (
-    <Subhead weight="regular" {...restProps} />
+    <Subhead {...restProps} />
   );
 };
 

package/src/components/Button/Button.tsx

@@ -13,8 +13,9 @@ import {
   SizeType,
   withAdaptivity,
 } from "../../hoc/withAdaptivity";
-import { IOS, VKCOM, PlatformType } from "../../lib/platform";
+import { PlatformType, IOS, VKCOM, ANDROID } from "../../lib/platform";
 import Spinner from "../Spinner/Spinner";
+import Headline from "../Typography/Headline/Headline";
 import "./Button.css";
 
 export interface VKUIButtonProps extends HasAlign {
@@ -61,15 +62,14 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (
       if (isCompact) {
         return <Text weight="medium" {...restProps} />;
       }
-
-      return <Title level="3" weight="medium" {...restProps} />;
+      if (platform === ANDROID) {
+        return <Headline weight="medium" {...restProps} />;
+      }
+      return <Title level="3" weight="2" {...restProps} />;
     case "m":
       if (isCompact) {
         return (
-          <Subhead
-            weight={platform === VKCOM ? "regular" : "medium"}
-            {...restProps}
-          />
+          <Subhead weight={platform === VKCOM ? "3" : "2"} {...restProps} />
         );
       }
 
@@ -77,7 +77,7 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (
     case "s":
     default:
       if (platform === IOS) {
-        return <Subhead weight="medium" {...restProps} />;
+        return <Subhead weight="2" {...restProps} />;
       }
 
       if (platform === VKCOM) {
@@ -88,7 +88,7 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (
         return <Caption level="1" weight="medium" {...restProps} />;
       }
 
-      return <Subhead weight="medium" {...restProps} />;
+      return <Subhead weight="2" {...restProps} />;
   }
 };
 

package/src/components/Card/Card.css

@@ -40,3 +40,44 @@
   box-sizing: border-box;
   border-radius: inherit;
 }
+
+/**
+ * CMP:
+ * CardScroll
+ */
+.CardScroll .Card {
+  margin-right: var(--vkui--size_cardgrid_padding--regular);
+  flex-shrink: 0;
+}
+
+.CardScroll .Card:last-of-type {
+  margin-right: 0;
+}
+
+.CardScroll--s .Card {
+  width: 40%;
+}
+
+.CardScroll--m .Card {
+  width: 62%;
+}
+
+.CardScroll--l .Card {
+  width: 100%;
+}
+
+/**
+ * CMP:
+ * Group
+ * SplitCol
+ */
+.Group--card .CardScroll--l .Card,
+.SplitCol--spaced .CardScroll--l .Card {
+  width: calc(100% - 32px);
+  margin-right: 16px;
+}
+
+.Group--card .CardScroll--l .Card:last-of-type,
+.SplitCol--spaced .CardScroll--l .Card:last-of-type {
+  margin-right: 0;
+}

package/src/components/Card/Card.tsx

@@ -11,8 +11,8 @@ export interface CardProps
   mode?: "tint" | "shadow" | "outline";
 }
 
-const Card: React.FunctionComponent<CardProps> = ({
-  mode,
+export const Card: React.FC<CardProps> = ({
+  mode = "tint",
   children,
   getRootRef,
   ...restProps
@@ -29,10 +29,3 @@ const Card: React.FunctionComponent<CardProps> = ({
     </div>
   );
 };
-
-Card.defaultProps = {
-  mode: "tint",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Card;

package/src/components/CardScroll/CardScroll.css

@@ -3,11 +3,6 @@
   align-items: stretch;
 }
 
-.CardScroll .Card {
-  margin-right: var(--vkui--size_cardgrid_padding--regular);
-  flex-shrink: 0;
-}
-
 .CardScroll__gap {
   display: block;
   flex-shrink: 0;
@@ -17,30 +12,14 @@
   margin-top: 16px;
 }
 
-.CardScroll .Card:last-of-type {
-  margin-right: 0;
-}
-
-.CardScroll--s .Card {
-  width: 40%;
-}
-
-.CardScroll--m .Card {
-  width: 62%;
-}
-
-.CardScroll--l .Card {
-  width: 100%;
-}
-
 .CardScroll--withSpaces .CardScroll__gap {
   width: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 /**
+ * CMP:
  * SplitCol
  */
-
 .SplitCol--spaced .CardScroll--withSpaces .CardScroll {
   margin-left: -16px;
   margin-right: -16px;
@@ -50,31 +29,15 @@
   width: 16px;
 }
 
-.SplitCol--spaced .CardScroll--l .Card {
-  width: calc(100% - 32px);
-}
-
-.SplitCol--spaced .CardScroll--l .Card:not(:last-of-type) {
-  margin-right: 16px;
-}
-
 /**
+ * CMP:
  * Group
  */
-
 .Group--card .CardScroll--withSpaces {
   margin-left: -8px;
   margin-right: -8px;
 }
 
-.Group--card .CardScroll--l .Card {
-  width: calc(100% - 32px);
-}
-
-.Group--card .CardScroll--l .Card:not(:last-of-type) {
-  margin-right: 16px;
-}
-
 .Group--card .CardScroll--withSpaces:first-child {
   padding-top: var(--vkui--size_cardgrid_padding_vertical--regular);
 }

package/src/components/CardScroll/CardScroll.tsx

@@ -1,35 +1,32 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
 import HorizontalScroll, {
   HorizontalScrollProps,
 } from "../HorizontalScroll/HorizontalScroll";
-import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { useDOM } from "../../lib/dom";
 import "./CardScroll.css";
 
-export interface CardScrollProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityProps {
+export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * При size = "s", "m", "l" у Card будет явно задана ширина в %
-   * При size = false ширина Card будет регулироваться контентом внутри
+   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
    */
   size?: "s" | "m" | "l" | false;
   showArrows?: HorizontalScrollProps["showArrows"];
-  withSpaces: boolean;
+  withSpaces?: boolean;
 }
 
-const CardScroll: React.FC<CardScrollProps> = ({
+export const CardScroll: React.FC<CardScrollProps> = ({
   children,
-  size,
+  size = "s",
   showArrows = true,
-  sizeX,
   withSpaces = true,
   ...restProps
 }: CardScrollProps) => {
   const platform = usePlatform();
+  const { sizeX } = useAdaptivity();
 
   const refContainer = React.useRef<HTMLDivElement>(null);
   const gapRef = React.useRef<HTMLDivElement>(null);
@@ -117,10 +114,3 @@ const CardScroll: React.FC<CardScrollProps> = ({
     </div>
   );
 };
-
-CardScroll.defaultProps = {
-  size: "s",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(CardScroll, { sizeX: true });

package/src/components/CardScroll/Readme.md

@@ -1,5 +1,6 @@
-Горизонтальный скролл для [Card](#!/Card). Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины.  
-В примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
+Горизонтальный скролл для [Card](#!/Card).
+
+Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины. В примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
 
 - `size="s"`: высота равна 66% ширины;
 - `size="m"`: высота равна 42% ширины;

package/src/components/Chip/Chip.tsx

@@ -18,7 +18,7 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   after?: React.ReactNode;
 }
 
-const Chip: React.FC<ChipProps> = ({
+export const Chip: React.FC<ChipProps> = ({
   value = "",
   option,
   removable = true,
@@ -73,6 +73,3 @@ const Chip: React.FC<ChipProps> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Chip;

package/src/components/ChipsInput/ChipsInput.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { HasAlign, HasRef, HasRootRef } from "../../types";
 import { FormField, FormFieldProps } from "../FormField/FormField";
 import { classNames } from "../../lib/classNames";
-import Chip, { ChipProps } from "../Chip/Chip";
+import { Chip, ChipProps } from "../Chip/Chip";
 import { noop } from "../../lib/utils";
 import { useChipsInput } from "./useChipsInput";
 import { useAdaptivity } from "../../hooks/useAdaptivity";