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

@vkontakte/vkui 4.27.1 → 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 (159) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.27.1",
+  "version": "4.27.2",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -158,9 +158,7 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
               {subtitle}
             </Caption>
           ) : (
-            <Subhead weight="regular" vkuiClass="ActionSheetItem__subtitle">
-              {subtitle}
-            </Subhead>
+            <Subhead vkuiClass="ActionSheetItem__subtitle">{subtitle}</Subhead>
           ))}
       </div>
       {selectable && (

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

@@ -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 CHANGED Viewed

@@ -69,10 +69,7 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (
     case "m":
       if (isCompact) {
         return (
-          <Subhead
-            weight={platform === VKCOM ? "regular" : "medium"}
-            {...restProps}
-          />
+          <Subhead weight={platform === VKCOM ? "3" : "2"} {...restProps} />
         );
       }
@@ -80,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) {
@@ -91,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/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";
@@ -19,6 +19,7 @@ import {
   AppearanceProvider,
   generateVKUITokensClassName,
 } from "../AppearanceProvider/AppearanceProvider";
+import { platform as resolvePlatform } from "../../lib/platform";
 export interface ConfigProviderProps
   extends Partial<ConfigProviderContextInterface> {
@@ -64,20 +65,24 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
 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 (
@@ -88,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(() => {
@@ -109,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

@@ -36,17 +36,13 @@ export interface ConfigProviderContextInterface {
   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/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/Header/Header.tsx CHANGED Viewed

@@ -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/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/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/SimpleCell/SimpleCell.tsx CHANGED Viewed

@@ -105,11 +105,7 @@ const SimpleCell: React.FC<SimpleCellProps> = ({
           )}
         </div>
         {description && (
-          <Subhead
-            Component="span"
-            weight="regular"
-            vkuiClass="SimpleCell__description"
-          >
+          <Subhead Component="span" vkuiClass="SimpleCell__description">
             {description}
           </Subhead>
         )}

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

@@ -36,7 +36,7 @@ const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({
   ...restProps
 }: SubnavButtonTypographyProps) => {
   if (textLevel === 1) {
-    return <Subhead weight="regular" {...restProps} />;
+    return <Subhead {...restProps} />;
   }
   return (

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

@@ -37,18 +37,14 @@ export const TextTooltip: React.FC<TextTooltipProps> = ({
           {hasReactNode(header) && (
             <Subhead
               Component="span"
-              weight="medium"
+              weight="2"
               vkuiClass="TextTooltip__header"
             >
               {header}
             </Subhead>
           )}
           {hasReactNode(text) && (
-            <Subhead
-              Component="span"
-              weight="regular"
-              vkuiClass="TextTooltip__text"
-            >
+            <Subhead Component="span" vkuiClass="TextTooltip__text">
               {text}
             </Subhead>
           )}

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

@@ -58,15 +58,11 @@ const SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(
           />
           <div vkuiClass="Tooltip__content">
             {header && (
-              <Subhead weight="semibold" vkuiClass="Tooltip__title">
+              <Subhead weight="1" vkuiClass="Tooltip__title">
                 {header}
               </Subhead>
             )}
-            {text && (
-              <Subhead weight="regular" vkuiClass="Tooltip__text">
-                {text}
-              </Subhead>
-            )}
+            {text && <Subhead vkuiClass="Tooltip__text">{text}</Subhead>}
           </div>
         </div>
       </div>

package/src/components/Typography/Subhead/Readme.md CHANGED Viewed

@@ -1,27 +1,21 @@
-Упрощения в Android-версии (происходят автоматически):
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Subhead>Subhead</Subhead>
+</div>
+```
+## Кастомизация
-- `semibold` превращается в `medium`
+Есть возможность переопределить жирность.
-```jsx
-<View activePanel="test">
-  <Panel id="test">
-    <PanelHeader>Subhead</PanelHeader>
-    <Group>
-      <Div>
-        <Subhead weight="regular" style={{ marginBottom: 16 }}>
-          Subhead regular
-        </Subhead>
-        <Subhead weight="medium" style={{ marginBottom: 16 }}>
-          Subhead medium
-        </Subhead>
-        <Subhead weight="semibold" style={{ marginBottom: 16 }}>
-          Subhead semibold
-        </Subhead>
-        <Subhead weight="bold" style={{ marginBottom: 16 }}>
-          Subhead bold
-        </Subhead>
-      </Div>
-    </Group>
-  </Panel>
-</View>
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Subhead weight="1" style={{ marginBottom: 16 }}>
+    Subhead weight 1
+  </Subhead>
+  <Subhead weight="2" style={{ marginBottom: 16 }}>
+    Subhead weight 2
+  </Subhead>
+  <Subhead weight="3">Subhead weight 3</Subhead>
+</div>
 ```

package/src/components/Typography/Subhead/Subhead.css CHANGED Viewed

@@ -1,28 +1,43 @@
 .Subhead {
   margin: 0;
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--vkui--font_subhead--font_size--regular);
+  line-height: var(--vkui--font_subhead--line_height--regular);
+  font-weight: var(--vkui--font_subhead--font_weight--regular);
 }
+.Subhead--sizeY-compact {
+  font-size: var(--vkui--font_subhead--font_size--compact);
+  line-height: var(--vkui--font_subhead--line_height--compact);
+}
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-regular {
   font-weight: 400;
 }
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-medium {
   font-weight: 500;
 }
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-semibold {
   font-weight: 600;
 }
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-bold {
   font-weight: 700;
 }
-/**
- * ANDROID
- */
-.Subhead--android.Subhead--w-semibold {
-  font-weight: 500;
+.Subhead--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+.Subhead--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+.Subhead--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
 }

package/src/components/Typography/Subhead/Subhead.tsx CHANGED Viewed

@@ -1,29 +1,45 @@
 import * as React from "react";
 import { HasComponent } from "../../../types";
-import { usePlatform } from "../../../hooks/usePlatform";
 import { classNames } from "../../../lib/classNames";
-import { getClassName } from "../../../helpers/getClassName";
+import { warnOnce } from "../../../lib/warnOnce";
+import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import "./Subhead.css";
 export interface SubheadProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasComponent {
-  weight: "regular" | "medium" | "semibold" | "bold";
+  /**
+   * Начертания "regular", "medium", "semibold" и "bold" устарели и будут удалены в 5.0.0.
+   */
+  weight?: "regular" | "medium" | "semibold" | "bold" | "1" | "2" | "3";
 }
+const warn = warnOnce("Subhead");
 const Subhead: React.FC<SubheadProps> = ({
   children,
-  weight = "regular",
-  Component = "h4",
+  weight,
+  Component = "h5",
   ...restProps
 }: SubheadProps) => {
-  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+  if (process.env.NODE_ENV === "development") {
+    if (
+      weight &&
+      ["heavy", "bold", "semibold", "medium", "regular"].includes(weight)
+    )
+      warn(
+        `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
+      );
+  }
   return (
     <Component
       {...restProps}
       vkuiClass={classNames(
-        getClassName("Subhead", platform),
+        "Subhead",
+        `Subhead--sizeY-${sizeY}`,
         `Subhead--w-${weight}`
       )}
     >

package/src/components/Typography/Title/Title.tsx CHANGED Viewed

@@ -41,7 +41,7 @@ const Title: React.FC<TitleProps> = ({
       ["heavy", "bold", "semibold", "medium", "regular"].includes(weight)
     )
       warn(
-        `Начертание "${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
+        `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
       );
   }

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

@@ -82,7 +82,7 @@
               getAvatarUrl("user_va"),
               getAvatarUrl("user_tc"),
             ]}
-            style={{ color: "#fff", padding: "8px 0" }}
+            style={{ color: "#fff", padding: "8px 16px" }}
           >
             Проголосовали 2 176 человек
           </UsersStack>

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

@@ -84,7 +84,7 @@ const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
         )}
       </div>
       {hasReactNode(children) && (
-        <Subhead Component="span" weight="regular" vkuiClass="UsersStack__text">
+        <Subhead Component="span" vkuiClass="UsersStack__text">
           {children}
         </Subhead>
       )}

package/src/tokenized/index.ts CHANGED Viewed

@@ -16,3 +16,9 @@ export type {
   SegmentedControlOptionInterface,
   SegmentedControlValue,
 } from "../components/SegmentedControl/SegmentedControl";
+export { default as Title } from "../components/Typography/Title/Title";
+export type { TitleProps } from "../components/Typography/Title/Title";
+export { default as Subhead } from "../components/Typography/Subhead/Subhead";
+export type { SubheadProps } from "../components/Typography/Subhead/Subhead";