@vkontakte/vkui 4.35.0 → 4.35.3

package/package.json

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

package/src/components/Banner/Banner.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { HasComponent, HasChildren } from "../../types";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { IOS } from "../../lib/platform";
@@ -80,18 +79,6 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
   actions?: React.ReactNode;
 }
 
-type BannerTypographyProps = Pick<BannerProps, "size"> &
-  HasComponent &
-  HasChildren;
-
-const BannerHeader = ({ size, ...restProps }: BannerTypographyProps) => {
-  return size === "m" ? (
-    <Title level="2" weight="2" {...restProps} />
-  ) : (
-    <Headline weight="2" {...restProps} />
-  );
-};
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */
@@ -113,8 +100,46 @@ export const Banner = ({
 }: BannerProps) => {
   const platform = usePlatform();
 
+  const HeaderTypography = size === "m" ? Title : Headline;
   const SubheaderTypography = size === "m" ? Text : Subhead;
 
+  const IconDismissIOS =
+    mode === "image" ? Icon24DismissDark : Icon24DismissSubstract;
+
+  const content = (
+    <React.Fragment>
+      {mode === "image" && background && (
+        <div aria-hidden="true" vkuiClass="Banner__bg">
+          {background}
+        </div>
+      )}
+
+      {before && <div vkuiClass="Banner__before">{before}</div>}
+
+      <div vkuiClass="Banner__content">
+        {hasReactNode(header) && (
+          <HeaderTypography
+            Component="span"
+            vkuiClass="Banner__header"
+            weight="2"
+            level={size === "m" ? "2" : "1"}
+          >
+            {header}
+          </HeaderTypography>
+        )}
+        {hasReactNode(subheader) && (
+          <SubheaderTypography Component="span" vkuiClass="Banner__subheader">
+            {subheader}
+          </SubheaderTypography>
+        )}
+        {hasReactNode(text) && <Text vkuiClass="Banner__text">{text}</Text>}
+        {hasReactNode(actions) && React.Children.count(actions) > 0 && (
+          <div vkuiClass="Banner__actions">{actions}</div>
+        )}
+      </div>
+    </React.Fragment>
+  );
+
   return (
     <section
       {...restProps}
@@ -126,46 +151,24 @@ export const Banner = ({
         mode === "image" && imageTheme === "dark" && "Banner--inverted"
       )}
     >
-      <Tappable
-        vkuiClass="Banner__in"
-        activeMode={platform === IOS ? "opacity" : "background"}
-        disabled={asideMode !== "expand"}
-        role={asideMode === "expand" ? "button" : undefined}
-      >
-        {mode === "image" && background && (
-          <div aria-hidden="true" vkuiClass="Banner__bg">
-            {background}
-          </div>
-        )}
-
-        {before && <div vkuiClass="Banner__before">{before}</div>}
-
-        <div vkuiClass="Banner__content">
-          {hasReactNode(header) && (
-            <BannerHeader
-              size={size}
-              Component="span"
-              vkuiClass="Banner__header"
-            >
-              {header}
-            </BannerHeader>
-          )}
-          {hasReactNode(subheader) && (
-            <SubheaderTypography Component="span" vkuiClass="Banner__subheader">
-              {subheader}
-            </SubheaderTypography>
-          )}
-          {hasReactNode(text) && <Text vkuiClass="Banner__text">{text}</Text>}
-          {hasReactNode(actions) && React.Children.count(actions) > 0 && (
-            <div vkuiClass="Banner__actions">{actions}</div>
-          )}
-        </div>
+      {asideMode === "expand" ? (
+        <Tappable
+          vkuiClass="Banner__in"
+          activeMode={platform === IOS ? "opacity" : "background"}
+          role="button"
+        >
+          {content}
 
-        {!!asideMode && (
           <div vkuiClass="Banner__aside">
-            {asideMode === "expand" && <Icon24Chevron />}
+            <Icon24Chevron />
+          </div>
+        </Tappable>
+      ) : (
+        <div vkuiClass="Banner__in">
+          {content}
 
-            {asideMode === "dismiss" && (
+          {asideMode === "dismiss" && (
+            <div vkuiClass="Banner__aside">
               <IconButton
                 aria-label={dismissLabel}
                 vkuiClass="Banner__dismiss"
@@ -173,20 +176,12 @@ export const Banner = ({
                 hoverMode="opacity"
                 hasActive={false}
               >
-                {platform === IOS ? (
-                  mode === "image" ? (
-                    <Icon24DismissDark />
-                  ) : (
-                    <Icon24DismissSubstract />
-                  )
-                ) : (
-                  <Icon24Cancel />
-                )}
+                {platform === IOS ? <IconDismissIOS /> : <Icon24Cancel />}
               </IconButton>
-            )}
-          </div>
-        )}
-      </Tappable>
+            </div>
+          )}
+        </div>
+      )}
     </section>
   );
 };

package/src/components/CustomSelect/CustomSelect.tsx

@@ -243,7 +243,7 @@ function CustomSelectComponent(props: CustomSelectProps) {
   }, [props.value]);
 
   useIsomorphicLayoutEffect(() => {
-    if (nativeSelectValue) {
+    if (nativeSelectValue !== undefined) {
       const event = new Event("change", { bubbles: true });
 
       selectElRef.current?.dispatchEvent(event);

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -7,6 +7,7 @@ import { Popper, Placement } from "../Popper/Popper";
 import { Spinner } from "../Spinner/Spinner";
 import { HasRef } from "../../types";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { noop } from "../../lib/utils";
 import "./CustomSelectDropdown.css";
 
 export interface CustomSelectDropdownProps
@@ -35,6 +36,7 @@ function getObserverModifier<T extends HTMLElement>(
     name: "customSelectChildrenChange",
     enabled: true,
     phase: "main",
+    fn: noop,
     effect: ({ instance }) => {
       const observer = new MutationObserver(instance.forceUpdate);
 

package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import {
   Icon24Chevron,
-  Icon24ChevronLeft,
+  Icon24ChevronCompactLeft,
   Icon16Chevron,
   Icon16ChevronLeft,
 } from "@vkontakte/icons";
@@ -29,7 +29,7 @@ export const HorizontalScrollArrow = ({
   if (size === "m") {
     ArrowIcon = direction === "left" ? Icon16ChevronLeft : Icon16Chevron;
   } else {
-    ArrowIcon = direction === "left" ? Icon24ChevronLeft : Icon24Chevron;
+    ArrowIcon = direction === "left" ? Icon24ChevronCompactLeft : Icon24Chevron;
   }
 
   return (

package/src/components/PanelHeader/PanelHeader.css

@@ -110,10 +110,6 @@
   padding: 0 4px;
 }
 
-.PanelHeader--ios.PanelHeader--no-before .PanelHeader__content > * {
-  padding-left: 0;
-}
-
 .PanelHeader--ios.PanelHeader--no-before .PanelHeader__content {
   padding-left: 8px;
 }
@@ -167,15 +163,6 @@
   padding: 0 4px;
 }
 
-.PanelHeader--android.PanelHeader--no-before .PanelHeader__content > *,
-.PanelHeader--vkcom.PanelHeader--no-before .PanelHeader__content > * {
-  padding-left: 0;
-}
-
-.PanelHeader--android.PanelHeader--no-before .PanelHeader__content {
-  padding-left: 16px;
-}
-
 .SplitCol--spaced
   .PanelHeader--android.PanelHeader--no-before:not(.ModalPageHeader__in)
   .PanelHeader__content {
@@ -191,6 +178,10 @@
   padding-right: 16px;
 }
 
+.PanelHeader--android.PanelHeader--no-before .PanelHeader__content {
+  padding-left: 16px;
+}
+
 .SplitCol--spaced
   .PanelHeader--android.PanelHeader--no-after:not(.ModalPageHeader__in)
   .PanelHeader__content {
@@ -246,3 +237,7 @@
   flex-shrink: 0;
   flex-grow: 1;
 }
+
+.PanelHeader--no-before .PanelHeader__content > * {
+  padding-left: 0;
+}

package/src/components/PanelHeaderContent/PanelHeaderContent.css

@@ -25,8 +25,7 @@
 }
 
 .PanelHeaderContent__status,
-.PanelHeaderContent__children-in,
-.PanelHeaderContent__children .Headline {
+.PanelHeaderContent__children-in {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -105,3 +104,10 @@
 .PanelHeaderContent--vkcom .PanelHeaderContent__in {
   align-items: center;
 }
+
+/**
+ * VKCOM
+ */
+.PanelHeader--no-before .PanelHeaderContent--vkcom {
+  padding-left: 16px;
+}

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -71,12 +71,11 @@ export const PanelHeaderContent = ({
         activeMode: "opacity",
       }
     : {};
-  const baseClassNames = getClassName("PanelHeaderContent", platform);
 
   return (
     <div
       {...rootProps}
-      vkuiClass={baseClassNames}
+      vkuiClass={getClassName("PanelHeaderContent", platform)}
       style={style}
       className={className}
     >

package/src/components/Popper/Popper.tsx

@@ -81,6 +81,39 @@ const ARROW_PADDING = 8;
 const ARROW_WIDTH = 20;
 const ARROW_HEIGHT = 8;
 
+const preventOverflowModifier: Modifier<string> = {
+  name: "preventOverflow",
+  options: {
+    mainAxis: false,
+  },
+};
+
+const flipModifier: Modifier<string> = {
+  name: "flip",
+};
+
+const arrowModifier: Modifier<string> = {
+  name: "arrow",
+  options: {
+    padding: ARROW_PADDING,
+  },
+};
+
+const sameWidthModifier: Modifier<string> = {
+  name: "sameWidth",
+  enabled: true,
+  phase: "beforeWrite",
+  requires: ["computeStyles"],
+  fn: ({ state }) => {
+    state.styles.popper.width = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }) => {
+    state.elements.popper.style.width = `${
+      (state.elements.reference as HTMLElement).offsetWidth
+    }px`;
+  },
+};
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
@@ -112,12 +145,7 @@ export const Popper = ({
 
   const modifiers = React.useMemo(() => {
     const modifiers: Array<Modifier<string>> = [
-      {
-        name: "preventOverflow",
-        options: {
-          mainAxis: false,
-        },
-      },
+      preventOverflowModifier,
       {
         name: "offset",
         options: {
@@ -127,37 +155,15 @@ export const Popper = ({
           ],
         },
       },
-      {
-        name: "flip",
-      },
+      flipModifier,
     ];
 
     if (arrow) {
-      modifiers.push({
-        name: "arrow",
-        options: {
-          padding: ARROW_PADDING,
-        },
-      });
+      modifiers.push(arrowModifier);
     }
 
     if (sameWidth) {
-      const sameWidth: Modifier<string> = {
-        name: "sameWidth",
-        enabled: true,
-        phase: "beforeWrite",
-        requires: ["computeStyles"],
-        fn: ({ state }) => {
-          state.styles.popper.width = `${state.rects.reference.width}px`;
-        },
-        effect: ({ state }) => {
-          state.elements.popper.style.width = `${
-            (state.elements.reference as HTMLElement).offsetWidth
-          }px`;
-        },
-      };
-
-      modifiers.push(sameWidth);
+      modifiers.push(sameWidthModifier);
     }
 
     if (customModifiers) {

package/src/components/Spacing/Readme.md

@@ -31,23 +31,23 @@
     <Group
       header={<Header mode="secondary">Default Spacing (empty, 8px)</Header>}
     >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+      <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
+      <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
       <Spacing />
 
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+      <SimpleCell before={<Icon28UserOutline />}>Учётная запись</SimpleCell>
+      <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
 
     <Group header={<Header mode="secondary">Spacing 16px</Header>}>
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+      <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
+      <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
       <Spacing size={16} />
 
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+      <SimpleCell before={<Icon28UserOutline />}>Учётная запись</SimpleCell>
+      <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
 
     <Group
@@ -55,15 +55,15 @@
         <Header mode="secondary">Spacing with centered separator 16px</Header>
       }
     >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+      <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
+      <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
       <Spacing size={16}>
         <Separator />
       </Spacing>
 
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+      <SimpleCell before={<Icon28UserOutline />}>Учётная запись</SimpleCell>
+      <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
 
     <Group
@@ -73,15 +73,15 @@
         </Header>
       }
     >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+      <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
+      <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
       <Spacing>
         <Separator />
       </Spacing>
 
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+      <SimpleCell before={<Icon28UserOutline />}>Учётная запись</SimpleCell>
+      <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
 
     <Group
@@ -91,15 +91,15 @@
         </Header>
       }
     >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+      <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
+      <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
       <Spacing size={12} />
       <Separator />
       <Spacing size={20} />
 
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+      <SimpleCell before={<Icon28UserOutline />}>Учётная запись</SimpleCell>
+      <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
   </Panel>
 </View>

package/src/components/Spacing/Spacing.css

@@ -12,12 +12,16 @@
   padding-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
+.Spacing--separator-top {
+  justify-content: start;
+}
+
 .Spacing--separator-center {
   justify-content: center;
 }
 
 .Spacing--separator-bottom {
-  flex-direction: column-reverse;
+  justify-content: end;
 }
 
 .Spacing--separator::after {

package/src/components/Typography/Headline/Headline.css

@@ -60,3 +60,13 @@
 .Headline--w-3 {
   font-weight: var(--vkui--font_weight_accent3);
 }
+
+/**
+ * CMP:
+ * PanelHeaderContent
+ */
+.PanelHeaderContent__children .Headline {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/src/components/Typography/Text/Text.css

@@ -38,3 +38,13 @@
 .Text--w-3 {
   font-weight: var(--vkui--font_weight_accent3);
 }
+
+/**
+ * CMP:
+ * PanelHeaderContent
+ */
+.PanelHeaderContent__children .Text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/src/lib/platform.ts

@@ -23,13 +23,19 @@ function isPlatformAlias(
  * @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"];
+  try {
+    const parsedQuery = querystring.parse(queryString);
+    const platformAliasByQuery = parsedQuery["vk_platform"];
 
-  return typeof platformAliasByQuery === "string" &&
-    isPlatformAlias(platformAliasByQuery)
-    ? PLATFORM_ALIAS[platformAliasByQuery]
-    : undefined;
+    return typeof platformAliasByQuery === "string" &&
+      isPlatformAlias(platformAliasByQuery)
+      ? PLATFORM_ALIAS[platformAliasByQuery]
+      : undefined;
+  } catch (e) {
+    console.warn(e);
+
+    return undefined;
+  }
 }
 
 const platformByQueryString = canUseDOM