npm - @vkontakte/vkui - Versions diffs - 4.26.0 → 4.27.2 - Mend

@vkontakte/vkui 4.26.0 → 4.27.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (657) hide show

package/src/components/ConfigProvider/ConfigProvider.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { AppearanceType } from "@vkontakte/vk-bridge";
+import vkBridge, { AppearanceType } from "@vkontakte/vk-bridge";
 import { canUseDOM, useDOM } from "../../lib/dom";
 import {
   ConfigProviderContext,
   ConfigProviderContextInterface,
-  defaultConfigProviderProps,
+  WebviewType,
 } from "./ConfigProviderContext";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
@@ -15,10 +15,14 @@ import {
   AppearanceScheme,
   Scheme,
 } from "../../helpers/scheme";
-import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
-import { Platform } from "../../lib/platform";
+import {
+  AppearanceProvider,
+  generateVKUITokensClassName,
+} from "../AppearanceProvider/AppearanceProvider";
+import { platform as resolvePlatform } from "../../lib/platform";
-export interface ConfigProviderProps extends ConfigProviderContextInterface {
+export interface ConfigProviderProps
+  extends Partial<ConfigProviderContextInterface> {
   /**
    * @deprecated будет удалено в 5.0.0, устанавливать тему следует через appearance
    * Цветовая схема приложения
@@ -59,44 +63,26 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
     ? "dark"
     : "light";
-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}`;
-};
 const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
-  ...props
+  webviewType = WebviewType.VKAPPS,
+  isWebView = vkBridge.isWebView(),
+  transitionMotionEnabled = true,
+  platform = resolvePlatform(),
+  hasNewTokens = false,
+  appearance,
+  scheme,
 }) => {
-  const config = { ...defaultConfigProviderProps, ...props };
-  const { platform, appearance } = config;
-  const scheme = normalizeScheme({
-    scheme: config.scheme,
-    platform: platform,
-    appearance: appearance,
+  const normalizedScheme = normalizeScheme({
+    scheme,
+    platform,
+    appearance,
   });
   const { document } = useDOM();
   const target = document?.body;
   useIsomorphicLayoutEffect(() => {
-    if (scheme === "inherit") {
+    if (normalizedScheme === "inherit") {
       return noop;
     }
     if (
@@ -107,11 +93,11 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
         '<body scheme> was set before VKUI mount - did you forget scheme="inherit"?'
       );
     }
-    target?.setAttribute("scheme", scheme);
+    target?.setAttribute("scheme", normalizedScheme);
     return () => target?.removeAttribute("scheme");
-  }, [scheme]);
+  }, [normalizedScheme]);
-  const realScheme = useSchemeDetector(target, scheme);
+  const realScheme = useSchemeDetector(target, normalizedScheme);
   const derivedAppearance = deriveAppearance(realScheme);
   useIsomorphicLayoutEffect(() => {
@@ -128,8 +114,13 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
   }, [platform, derivedAppearance]);
   const configContext = useObjectMemo({
-    appearance: derivedAppearance,
-    ...config,
+    webviewType,
+    isWebView,
+    transitionMotionEnabled,
+    hasNewTokens,
+    platform,
+    scheme,
+    appearance: appearance || derivedAppearance,
   });
   return (

package/src/components/ConfigProvider/ConfigProviderContext.tsx CHANGED Viewed

@@ -11,12 +11,12 @@ export interface ConfigProviderContextInterface {
   /**
    * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере
    */
-  isWebView?: boolean;
+  isWebView: boolean;
   /**
    * Тип вебвью.<br>
    * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)
    */
-  webviewType?: WebviewType.INTERNAL | WebviewType.VKAPPS;
+  webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;
   /**
    * Тип приложения
    */
@@ -28,25 +28,21 @@ export interface ConfigProviderContextInterface {
   /**
    * Включена ли анимация переходов между экранами в `Root` и `View`
    */
-  transitionMotionEnabled?: boolean;
+  transitionMotionEnabled: boolean;
   /**
    * Платформа
    */
-  platform?: PlatformType;
-  hasNewTokens?: boolean;
+  platform: PlatformType;
+  hasNewTokens: boolean;
 }
-export const defaultConfigProviderProps = {
-  webviewType: WebviewType.VKAPPS,
-  isWebView: vkBridge.isWebView(),
-  transitionMotionEnabled: true,
-  platform: platform(),
-  hasNewTokens: false,
-  // appearance is auto-detected by default
-  // appearance: Appearance.LIGHT,
-};
 export const ConfigProviderContext =
-  React.createContext<ConfigProviderContextInterface>(
-    defaultConfigProviderProps
-  );
+  React.createContext<ConfigProviderContextInterface>({
+    webviewType: WebviewType.VKAPPS,
+    isWebView: vkBridge.isWebView(),
+    transitionMotionEnabled: true,
+    platform: platform(),
+    hasNewTokens: false,
+    // appearance is auto-detected by default
+    // appearance: Appearance.LIGHT,
+  });

package/src/components/ContentCard/ContentCard.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Card, { CardProps } from "../Card/Card";
+import { Card, CardProps } from "../Card/Card";
 import Caption from "../Typography/Caption/Caption";
 import Title from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
@@ -131,7 +131,7 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
             </Caption>
           )}
           {hasReactNode(header) && (
-            <Title vkuiClass="ContentCard__text" weight="semibold" level="3">
+            <Title vkuiClass="ContentCard__text" weight="3" level="1">
               {header}
             </Title>
           )}

package/src/components/CustomSelectOption/CustomSelectOption.css CHANGED Viewed

@@ -8,6 +8,7 @@
   white-space: nowrap;
   user-select: none;
   cursor: pointer;
+  color: var(--text_primary);
 }
 .CustomSelectOption--sizeY-regular {

package/src/components/FocusVisible/FocusVisible.css CHANGED Viewed

@@ -1,5 +1,4 @@
-.Switch--focus-visible > .FocusVisible,
-.Tappable--focus-visible > .FocusVisible {
+[class$="--focus-visible"] > .FocusVisible {
   position: absolute;
   top: 2px;
   left: 2px;
@@ -13,8 +12,7 @@
   z-index: 0;
 }
-.Switch--focus-visible > .FocusVisible--outside,
-.Tappable--focus-visible > .FocusVisible--outside {
+[class$="--focus-visible"] > .FocusVisible--outside {
   top: -2px;
   left: -2px;
   right: -2px;
@@ -28,8 +26,7 @@
  * navigating accessible vkui apps via keyboard
  */
 @media (prefers-reduced-motion: no-preference) {
-  .Tappable--focus-visible > .FocusVisible,
-  .Switch--focus-visible > .FocusVisible {
+  [class$="--focus-visible"] > .FocusVisible {
     top: 4px;
     left: 4px;
     right: 4px;
@@ -39,8 +36,7 @@
     will-change: top, left, bottom, right;
   }
-  .Tappable--focus-visible > .FocusVisible--outside,
-  .Switch--focus-visible > .FocusVisible--outside {
+  [class$="--focus-visible"] > .FocusVisible--outside {
     top: 0;
     left: 0;
     bottom: 0;

package/src/components/FormItem/FormItem.tsx CHANGED Viewed

@@ -43,11 +43,7 @@ export const FormItem: React.FC<FormItemProps> = ({
   const wrappedChildren = (
     <React.Fragment>
-      {hasReactNode(top) && (
-        <Subhead weight="regular" vkuiClass="FormItem__top">
-          {top}
-        </Subhead>
-      )}
+      {hasReactNode(top) && <Subhead vkuiClass="FormItem__top">{top}</Subhead>}
       {children}
       {hasReactNode(bottom) && (
         <Caption level="1" weight="regular" vkuiClass="FormItem__bottom">

package/src/components/FormItem/Readme.md CHANGED Viewed

@@ -113,8 +113,20 @@ class Example extends React.Component {
               </FormItem>
               <FormItem top="Тип документа">
-                <Radio name="type">Паспорт</Radio>
-                <Radio name="type">Загран</Radio>
+                <SegmentedControl
+                  size="m"
+                  name="type"
+                  options={[
+                    {
+                      label: "Паспорт РФ",
+                      value: "russian",
+                    },
+                    {
+                      label: "Заграничный",
+                      value: "international",
+                    },
+                  ]}
+                />
               </FormItem>
               {this.addressItems.map(({ label, name }) => (

package/src/components/Gradient/Gradient.tsx CHANGED Viewed

@@ -7,12 +7,12 @@ export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
   to?: "top" | "bottom";
 }
-const Gradient: React.FunctionComponent<GradientProps> = ({
-  mode,
+export const Gradient: React.FC<GradientProps> = ({
+  mode = "tint",
   children,
-  to,
+  to = "top",
   ...restProps
-}: GradientProps) => {
+}) => {
   return (
     <div
       role="presentation"
@@ -27,11 +27,3 @@ const Gradient: React.FunctionComponent<GradientProps> = ({
     </div>
   );
 };
-Gradient.defaultProps = {
-  mode: "tint",
-  to: "top",
-};
-// eslint-disable-next-line import/no-default-export
-export default Gradient;

package/src/components/Gradient/Readme.md CHANGED Viewed

@@ -20,7 +20,7 @@ const Example = ({ sizeX }) => {
             <Title
               style={{ marginBottom: 8, marginTop: 20 }}
               level="2"
-              weight="medium"
+              weight="2"
             >
               Алексей Мазелюк
             </Title>

package/src/components/Header/Header.tsx CHANGED Viewed

@@ -41,7 +41,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
     switch (mode) {
       case "primary":
       case "tertiary":
-        return <Title weight="semibold" level="3" {...restProps} />;
+        return <Title weight="1" level="3" {...restProps} />;
       case "secondary":
         return <Caption level="1" weight="semibold" caps {...restProps} />;
     }
@@ -75,7 +75,7 @@ const HeaderAside: React.FC<HeaderAsideProps> = ({
   ...restProps
 }) => {
   return platform === Platform.VKCOM ? (
-    <Subhead weight="regular" {...restProps} />
+    <Subhead {...restProps} />
   ) : (
     <Text weight="regular" {...restProps} />
   );
@@ -89,7 +89,7 @@ const HeaderSubtitle: React.FC<HeaderSubtitleProps> = ({
   ...restProps
 }) => {
   return mode === "secondary" ? (
-    <Subhead weight="regular" {...restProps} />
+    <Subhead {...restProps} />
   ) : (
     <Caption weight="regular" level="1" {...restProps} />
   );

package/src/components/HorizontalCell/HorizontalCell.tsx CHANGED Viewed

@@ -24,9 +24,7 @@ const CellTypography: React.FC<CellTypographyProps> = ({
       {children}
     </Caption>
   ) : (
-    <Subhead weight="regular" {...restProps}>
-      {children}
-    </Subhead>
+    <Subhead {...restProps}>{children}</Subhead>
   );
 };

package/src/components/HorizontalScroll/HorizontalScroll.tsx CHANGED Viewed

@@ -1,6 +1,4 @@
 import * as React from "react";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import HorizontalScrollArrow from "./HorizontalScrollArrow";
 import { easeInOutSine } from "../../lib/fx";
@@ -134,8 +132,6 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   const animationQueue = React.useRef<VoidFunction[]>([]);
-  const platform = usePlatform();
   function scrollTo(getScrollPosition: (offset: number) => number) {
     const scrollElement = scrollerRef.current;
@@ -184,7 +180,7 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   return (
     <div
       {...restProps}
-      vkuiClass={classNames(getClassName("HorizontalScroll", platform), {
+      vkuiClass={classNames("HorizontalScroll", {
         ["HorizontalScroll--withConstArrows"]: showArrows === "always",
       })}
     >

package/src/components/HorizontalScroll/HorizontalScrollArrow.css CHANGED Viewed

@@ -29,19 +29,26 @@
 }
 .HorizontalScrollArrow__icon {
-  background-color: var(--modal_card_background);
-  color: var(--icon_secondary);
+  background-color: var(
+    --modal_card_background,
+    var(--vkui--color_background_modal)
+  );
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
   width: 40px;
   height: 40px;
   border-radius: 24px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 0 16px rgba(0, 0, 0, 0.12);
+  box-shadow: var(
+    --vkui--elevation3,
+    0 0 2px rgba(0, 0, 0, 0.08),
+    0 0 16px rgba(0, 0, 0, 0.12)
+  );
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .HorizontalScrollArrow--left {
-  padding-left: 16px;
+  padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px);
   left: 0;
 }
@@ -50,7 +57,7 @@
 }
 .HorizontalScrollArrow--right {
-  padding-right: 16px;
+  padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px);
   right: 0;
 }

package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import * as React from "react";
 import { Icon24Chevron } from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import Tappable from "../Tappable/Tappable";
 import "./HorizontalScrollArrow.css";
@@ -15,15 +13,13 @@ const HorizontalScrollArrow: React.FC<HorizontalScrollArrowProps> = ({
   onClick,
   direction,
 }: HorizontalScrollArrowProps) => {
-  const platform = usePlatform();
   return (
     <Tappable
       Component="button"
       hasHover={false}
       hasActive={false}
       vkuiClass={classNames(
-        getClassName("HorizontalScrollArrow", platform),
+        "HorizontalScrollArrow",
         `HorizontalScrollArrow--${direction}`
       )}
       onClick={onClick}

package/src/components/InfoRow/InfoRow.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ const InfoRow: React.FunctionComponent<InfoRowProps> = ({
       weight="regular"
     >
       {hasReactNode(header) && (
-        <Subhead Component="span" vkuiClass="InfoRow__header" weight="regular">
+        <Subhead Component="span" vkuiClass="InfoRow__header">
           {header}
         </Subhead>
       )}

package/src/components/ModalCardBase/ModalCardBase.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 } from "../../hoc/withAdaptivity";
 import { HasRootRef } from "../../types";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { IOS } from "../../lib/platform";
+import { ANDROID, IOS } from "../../lib/platform";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { Icon24Dismiss } from "@vkontakte/icons";
 import { useKeyboard } from "../../hooks/useKeyboard";
@@ -99,7 +99,7 @@ export const ModalCardBase = withAdaptivity<
           {hasReactNode(header) && (
             <Title
               level="2"
-              weight="semibold"
+              weight={platform === ANDROID ? "2" : "1"}
               vkuiClass="ModalCardBase__header"
             >
               {header}

package/src/components/ModalRoot/Readme.md CHANGED Viewed

@@ -189,7 +189,7 @@ const App = withPlatform(
                 <Title
                   style={{ marginBottom: 8, marginTop: 20 }}
                   level="2"
-                  weight="medium"
+                  weight="2"
                 >
                   {this.randomUser.first_name + " " + this.randomUser.last_name}
                 </Title>

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx CHANGED Viewed

@@ -27,11 +27,7 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = ({
   if (platform === IOS) {
     return (
-      <Title
-        Component="span"
-        level="3"
-        weight={primary ? "semibold" : "regular"}
-      >
+      <Title Component="span" level="3" weight={primary ? "1" : "3"}>
         {children}
       </Title>
     );

package/src/components/Placeholder/Placeholder.tsx CHANGED Viewed

@@ -49,7 +49,7 @@ const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
       <div vkuiClass="Placeholder__in">
         {hasReactNode(icon) && <div vkuiClass="Placeholder__icon">{icon}</div>}
         {hasReactNode(header) && (
-          <Title level="2" weight="medium" vkuiClass="Placeholder__header">
+          <Title level="2" weight="2" vkuiClass="Placeholder__header">
             {header}
           </Title>
         )}

package/src/components/Removable/Removable.tsx CHANGED Viewed

@@ -25,14 +25,12 @@ export interface RemovableProps {
   onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
 }
-interface RemovableIosOwnProps
-  extends Pick<RemovableProps, "removePlaceholder"> {
-  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
+interface RemovableIosOwnProps extends RemovableProps {
   removePlaceholderString?: string;
 }
 const RemovableIos: React.FC<RemovableIosOwnProps> = ({
-  onRemoveClick,
+  onRemove,
   removePlaceholder,
   removePlaceholderString,
   children,
@@ -40,6 +38,7 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   const { window } = useDOM();
   const removeButtonRef = React.useRef<HTMLElement>(null);
+  const disabledRef = React.useRef(true);
   const [removeOffset, updateRemoveOffset] = React.useState(0);
   useGlobalEventListener(
@@ -56,6 +55,8 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   const onRemoveTransitionEnd = () => {
     if (removeOffset > 0) {
       removeButtonRef?.current?.focus();
+    } else {
+      disabledRef.current = true;
     }
   };
@@ -65,6 +66,7 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
       return;
     }
     const { offsetWidth } = removeButtonRef.current;
+    disabledRef.current = false;
     updateRemoveOffset(offsetWidth);
   };
@@ -92,10 +94,10 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
         Component="button"
         hasActive={false}
         hasHover={false}
-        disabled={removeOffset === 0}
+        disabled={disabledRef.current}
         getRootRef={removeButtonRef}
         vkuiClass="Removable__remove"
-        onClick={onRemoveClick}
+        onClick={onRemove}
       >
         <span vkuiClass="Removable__remove-in">{removePlaceholder}</span>
       </Tappable>
@@ -162,7 +164,7 @@ export const Removable: React.FC<RemovableOwnProps> = ({
       {platform === IOS && (
         <RemovableIos
-          onRemoveClick={onRemoveClick}
+          onRemove={onRemoveClick}
           removePlaceholder={removePlaceholder}
           removePlaceholderString={removePlaceholderString}
         >

package/src/components/RichCell/RichCell.tsx CHANGED Viewed

@@ -82,11 +82,7 @@ const RichCell: React.FC<RichCellProps> = ({
           </Text>
         )}
         {hasReactNode(caption) && (
-          <Subhead
-            Component="span"
-            weight="regular"
-            vkuiClass="RichCell__caption"
-          >
+          <Subhead Component="span" vkuiClass="RichCell__caption">
             {caption}
           </Subhead>
         )}

package/src/components/Search/Search.tsx CHANGED Viewed

@@ -7,13 +7,14 @@ import {
   Icon16Clear,
   Icon24Cancel,
 } from "@vkontakte/icons";
-import { IOS, VKCOM } from "../../lib/platform";
+import { IOS, VKCOM, ANDROID } from "../../lib/platform";
 import { HasPlatform, HasRef } from "../../types";
 import { Touch, TouchEvent } from "../Touch/Touch";
 import { VKUITouchEvent } from "../../lib/touch";
 import { noop } from "../../lib/utils";
 import Text from "../Typography/Text/Text";
 import Title from "../Typography/Title/Title";
+import Headline from "../Typography/Headline/Headline";
 import Separator from "../Separator/Separator";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
@@ -21,6 +22,36 @@ import "./Search.css";
 export type InputRef = (element: HTMLInputElement) => void;
+interface SearchPlaceholderTypographyProps
+  extends HasPlatform,
+    React.HTMLAttributes<HTMLElement> {}
+const SearchPlaceholderTypography: React.FC<
+  SearchPlaceholderTypographyProps
+> = ({ platform, children, ...restProps }) => {
+  switch (platform) {
+    case IOS:
+      return (
+        <Title {...restProps} level="3" weight="3">
+          {children}
+        </Title>
+      );
+    case VKCOM:
+      return (
+        <Text {...restProps} weight="regular">
+          {children}
+        </Text>
+      );
+    case ANDROID:
+    default:
+      return (
+        <Headline {...restProps} weight="regular">
+          {children}
+        </Headline>
+      );
+  }
+};
 export interface SearchProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
     HasRef<HTMLInputElement>,
@@ -118,19 +149,12 @@ const Search: React.FC<SearchProps> = ({
           <div vkuiClass="Search__placeholder">
             <div vkuiClass="Search__placeholder-in">
               {before}
-              {platform === VKCOM ? (
-                <Text vkuiClass="Search__placeholder-text" weight="regular">
-                  {placeholder}
-                </Text>
-              ) : (
-                <Title
-                  vkuiClass="Search__placeholder-text"
-                  level="3"
-                  weight="regular"
-                >
-                  {placeholder}
-                </Title>
-              )}
+              <SearchPlaceholderTypography
+                vkuiClass="Search__placeholder-text"
+                platform={platform}
+              >
+                {placeholder}
+              </SearchPlaceholderTypography>
             </div>
             {isFocused && platform === IOS && after && (
               <div vkuiClass="Search__after-width">{after}</div>