@vkontakte/vkui 4.35.1 → 4.36.0

package/src/components/SubnavigationBar/SubnavigationBar.css

@@ -4,29 +4,17 @@
 }
 
 .SubnavigationBar__scrollIn {
-  padding: 20px 0;
+  padding-top: calc(
+    var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px
+  );
+  padding-bottom: calc(
+    var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px
+  );
   display: flex;
 }
 
 .SubnavigationBar__scrollIn::before,
 .SubnavigationBar__scrollIn::after {
   content: "";
-  min-width: 16px;
-}
-
-.SubnavigationBar .SubnavigationButton + .SubnavigationButton {
-  margin-left: 8px;
-}
-
-.SubnavigationBar--fixed .SubnavigationButton {
-  flex: 1;
-  min-width: 0;
-}
-
-/**
- * iOS
- */
-.SubnavigationBar--ios .SubnavigationBar__scrollIn::before,
-.SubnavigationBar--ios .SubnavigationBar__scrollIn::after {
-  min-width: 12px;
+  min-width: var(--vkui--size_base_padding_horizontal--regular);
 }

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
-import { usePlatform } from "../../hooks/usePlatform";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
 import {
   HorizontalScroll,
   HorizontalScrollProps,
@@ -37,8 +35,6 @@ export const SubnavigationBar = ({
   scrollAnimationDuration,
   ...restProps
 }: SubnavigationBarProps) => {
-  const platform = usePlatform();
-
   let ScrollWrapper: React.ElementType;
   let scrollWrapperProps = {};
 
@@ -57,10 +53,7 @@ export const SubnavigationBar = ({
   return (
     <div
       {...restProps}
-      vkuiClass={classNames(
-        getClassName("SubnavigationBar", platform),
-        `SubnavigationBar--${mode}`
-      )}
+      vkuiClass={classNames("SubnavigationBar", `SubnavigationBar--${mode}`)}
     >
       <ScrollWrapper vkuiClass="SubnavigationBar__in" {...scrollWrapperProps}>
         <div vkuiClass="SubnavigationBar__scrollIn">{children}</div>

package/src/components/SubnavigationButton/SubnavigationButton.css

@@ -101,3 +101,16 @@
 .SubnavigationButton--vkcom {
   border-radius: 4px;
 }
+
+/**
+ * CMP:
+ * SubnavigationBar
+ */
+.SubnavigationBar .SubnavigationButton + .SubnavigationButton {
+  margin-left: var(--vkui--size_subnavigation_bar_gap--regular);
+}
+
+.SubnavigationBar--fixed .SubnavigationButton {
+  flex: 1;
+  min-width: 0;
+}

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -63,13 +63,10 @@ export const SubnavigationButton = ({
       {...restProps}
       hasActive={false}
       focusVisibleMode="outside"
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("SubnavigationButton", platform),
         `SubnavigationButton--${size}`,
-        {
-          "SubnavigationButton--selected": selected,
-        }
+        selected && "SubnavigationButton--selected"
       )}
       aria-label={getTitleFromChildren(children)}
     >

package/src/components/TabbarItem/Readme.md

@@ -6,7 +6,12 @@ const [text, setText] = useState("one");
 const [horizontalText, setHorizontalText] = useState("one");
 const [indicator, setIndicator] = useState("one");
 
-<div style={{ background: "var(--background_page)", padding: "10px 0" }}>
+<div
+  style={{
+    background: "var(--vkui--color_background)",
+    padding: "10px 0",
+  }}
+>
   <div style={{ maxWidth: 768, margin: "auto" }}>
     <Tabbar style={{ position: "static", margin: "0 0 10px" }}>
       <TabbarItem selected={simple === "one"} onClick={() => setSimple("one")}>

package/src/components/Tabs/Readme.md

@@ -38,14 +38,22 @@ const Example = ({ sizeX }) => {
           <List>
             <Cell
               before={<Icon28UsersOutline />}
-              after={mode === "all" && <Icon24Done fill="var(--accent)" />}
+              after={
+                mode === "all" && (
+                  <Icon24Done fill="var(--vkui--color_icon_accent)" />
+                )
+              }
               onClick={() => setMode("all")}
             >
               Communities
             </Cell>
             <Cell
               before={<Icon28SettingsOutline />}
-              after={mode === "managed" && <Icon24Done fill="var(--accent)" />}
+              after={
+                mode === "managed" && (
+                  <Icon24Done fill="var(--vkui--color_icon_accent)" />
+                )
+              }
               onClick={() => setMode("managed")}
             >
               Managed Communities

package/src/components/TabsItem/TabsItem.css

@@ -102,7 +102,7 @@
 }
 
 .TabsItem--selected .TabsItem__before {
-  color: var(--text_primary, var(--vkui--color_icon_primary));
+  color: var(--vkui--color_icon_primary);
 }
 
 .TabsItem--selected.TabsItem--accent .TabsItem__before {

package/src/components/Tappable/Tappable.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import mitt from "mitt";
-import { noop } from "@vkontakte/vkjs";
+import { noop } from "../../lib/utils";
 import { Touch, TouchEvent, TouchProps } from "../Touch/Touch";
 import TouchRootContext from "../Touch/TouchContext";
 import { classNames } from "../../lib/classNames";
@@ -284,7 +284,6 @@ const TappableComponent = ({
     stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
   }
 
-  // eslint-disable-next-line vkui/no-object-expression-in-arguments
   const classes = classNames(
     "Tappable",
     platform === IOS && "Tappable--ios",
@@ -294,15 +293,14 @@ const TappableComponent = ({
     hasHover && hovered && !isPresetHoverMode && hoverMode,
     hasActive && active && !isPresetActiveMode && activeMode,
     focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,
-    {
-      "Tappable--active": hasActive && active,
-      "Tappable--mouse": hasMouse,
-      [`Tappable--hover-${hoverMode}`]:
-        hasHover && hovered && isPresetHoverMode,
-      [`Tappable--active-${activeMode}`]:
-        hasActive && active && isPresetActiveMode,
-      "Tappable--focus-visible": focusVisible,
-    }
+    hasActive && active && "Tappable--active",
+    hasMouse && "Tappable--mouse",
+    hasHover && hovered && isPresetHoverMode && `Tappable--hover-${hoverMode}`,
+    hasActive &&
+      active &&
+      isPresetActiveMode &&
+      `Tappable--active-${activeMode}`,
+    focusVisible && "Tappable--focus-visible"
   );
 
   const handlers: RootComponentProps = {

package/src/components/Textarea/Textarea.css

@@ -16,7 +16,7 @@
   padding: 12px;
   max-height: 204px;
   border: none;
-  z-index: 2;
+  z-index: 6;
   position: relative;
   background: transparent;
 }

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { FormField } from "../FormField/FormField";
+import { FormField, FormFieldProps } from "../FormField/FormField";
 import { HasRef, HasRootRef } from "../../types";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
@@ -12,7 +12,8 @@ export interface TextareaProps
     HasRef<HTMLTextAreaElement>,
     HasRootRef<HTMLElement>,
     AdaptivityProps,
-    Pick<React.CSSProperties, "maxHeight"> {
+    Pick<React.CSSProperties, "maxHeight">,
+    Pick<FormFieldProps, "status"> {
   grow?: boolean;
   onResize?(el: HTMLTextAreaElement): void;
   defaultValue?: string;
@@ -29,6 +30,7 @@ const TextareaComponent = ({
   sizeY,
   rows = 2,
   maxHeight,
+  status,
   ...restProps
 }: TextareaProps) => {
   const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
@@ -61,6 +63,7 @@ const TextareaComponent = ({
       style={style}
       getRootRef={getRootRef}
       disabled={restProps.disabled}
+      status={status}
     >
       <textarea
         {...restProps}

package/src/components/Tooltip/Readme.md

@@ -159,7 +159,7 @@ const ExampleWithPlatform = withPlatform(Example);
       border: "1px solid",
       margin: "100px 100px 0",
       position: "relative",
-      background: "var(--background_content)",
+      background: "var(--vkui--color_background_content)",
       zIndex: 1,
     }}
   >
@@ -175,7 +175,7 @@ const ExampleWithPlatform = withPlatform(Example);
       border: "1px solid",
       margin: "64px 100px 100px",
       position: "relative",
-      background: "var(--background_content)",
+      background: "var(--vkui--color_background_content)",
       zIndex: 1,
     }}
   >

package/src/components/Touch/Readme.md

@@ -9,7 +9,7 @@ const circleStyle = {
   width: 40,
   height: 40,
   borderRadius: "50%",
-  background: "var(--accent)",
+  background: "var(--vkui--color_background_accent)",
   position: "absolute",
   left: "50%",
   top: "50%",
@@ -19,7 +19,7 @@ const circleStyle = {
 
 const containerStyle = {
   height: 200,
-  border: "8px solid var(--icon_secondary)",
+  border: "8px solid var(--vkui--color_icon_secondary)",
   position: "relative",
 };
 
@@ -91,8 +91,8 @@ class Example extends React.Component {
               style={{
                 ...containerStyle,
                 borderColor: this.limitExceeded
-                  ? "var(--destructive)"
-                  : "var(--icon_secondary)",
+                  ? "var(--vkui--color_icon_negative)"
+                  : "var(--vkui--color_icon_secondary)",
               }}
             >
               <Touch

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/components/UsersStack/UsersStack.css

@@ -71,3 +71,45 @@
 .ModalCardBase .UsersStack {
   margin-top: 20px;
 }
+
+.UsersStack__mask--16-left {
+  clip-path: path(
+    "M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285"
+  );
+}
+
+.UsersStack__mask--16-circle {
+  clip-path: circle(8px);
+}
+
+.UsersStack__mask--24-left {
+  clip-path: path(
+    "M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625"
+  );
+}
+
+.UsersStack__mask--24-circle {
+  clip-path: circle(12px);
+}
+
+.UsersStack__mask--24-right {
+  clip-path: path(
+    "M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625"
+  );
+}
+
+.UsersStack__mask--32-left {
+  clip-path: path(
+    "M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75"
+  );
+}
+
+.UsersStack__mask--32-circle {
+  clip-path: circle(16px);
+}
+
+.UsersStack__mask--32-right {
+  clip-path: path(
+    "M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75"
+  );
+}

package/src/components/UsersStack/UsersStack.tsx

@@ -1,11 +1,8 @@
 import * as React from "react";
 import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Caption } from "../Typography/Caption/Caption";
-import { createMasks } from "./masks";
-import { useDOM } from "../../lib/dom";
 import "./UsersStack.css";
 
 export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -28,6 +25,65 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
   visibleCount?: number;
 }
 
+interface PathElementProps extends React.SVGAttributes<SVGElement> {
+  photoSize: number;
+  direction: "circle" | "right" | "left";
+}
+
+function PathElement({ photoSize, direction, ...props }: PathElementProps) {
+  switch (direction) {
+    case "circle":
+      const radius = photoSize / 2;
+
+      return <circle cx={radius} cy={radius} r={radius} {...props} />;
+
+    case "right":
+      switch (photoSize) {
+        case 24:
+          return (
+            <path
+              d="M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625"
+              {...props}
+            />
+          );
+
+        default:
+          return (
+            <path
+              d="M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75"
+              {...props}
+            />
+          );
+      }
+
+    default:
+      switch (photoSize) {
+        case 16:
+          return (
+            <path
+              d="M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285"
+              {...props}
+            />
+          );
+        case 24:
+          return (
+            <path
+              d="M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625"
+              {...props}
+            />
+          );
+
+        default:
+          return (
+            <path
+              d="M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75"
+              {...props}
+            />
+          );
+      }
+  }
+}
+
 /**
  * @see https://vkcom.github.io/VKUI/#/UsersStack
  */
@@ -39,12 +95,6 @@ export const UsersStack = ({
   children,
   ...restProps
 }: UsersStackProps) => {
-  const { document } = useDOM();
-
-  useIsomorphicLayoutEffect(() => {
-    createMasks(document);
-  }, [document]);
-
   const othersCount = Math.max(0, photos.length - visibleCount);
   const canShowOthers = othersCount > 0 && size !== "xs";
   const CounterTypography = size === "m" ? Footnote : Caption;
@@ -73,9 +123,6 @@ export const UsersStack = ({
           const direction =
             i === 0 && !canShowOthers ? "circle" : directionClip;
 
-          const pathHref = `#users_stack_${photoSize}_${direction}`;
-          const clipPathHref = `url(#users_stack_mask_${photoSize}_${direction})`;
-
           return (
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -83,10 +130,19 @@ export const UsersStack = ({
               key={i}
               aria-hidden
             >
-              <g clipPath={clipPathHref}>
-                <use vkuiClass="UsersStack__fill" href={pathHref} />
+              <g vkuiClass={`UsersStack__mask--${photoSize}-${direction}`}>
+                <PathElement
+                  direction={direction}
+                  photoSize={photoSize}
+                  vkuiClass="UsersStack__fill"
+                />
                 <image href={photo} width={photoSize} height={photoSize} />
-                <use href={pathHref} fill="none" stroke="rgba(0, 0, 0, 0.08)" />
+                <PathElement
+                  direction={direction}
+                  photoSize={photoSize}
+                  fill="none"
+                  stroke="rgba(0, 0, 0, 0.08)"
+                />
               </g>
             </svg>
           );

package/src/components/View/ViewInfinite.tsx

@@ -672,20 +672,20 @@ class ViewInfiniteComponent extends React.Component<
 
             return (
               <div
-                // eslint-disable-next-line vkui/no-object-expression-in-arguments
-                vkuiClass={classNames("View__panel", {
-                  "View__panel--active": panelId === activePanel,
-                  "View__panel--prev": panelId === prevPanel,
-                  "View__panel--next": panelId === nextPanel,
-                  "View__panel--swipe-back-prev":
-                    panelId === swipeBackPrevPanel,
-                  "View__panel--swipe-back-next":
-                    panelId === swipeBackNextPanel,
-                  "View__panel--swipe-back-success":
-                    swipeBackResult === SwipeBackResults.success,
-                  "View__panel--swipe-back-failed":
-                    swipeBackResult === SwipeBackResults.fail,
-                })}
+                vkuiClass={classNames(
+                  "View__panel",
+                  panelId === activePanel && "View__panel--active",
+                  panelId === prevPanel && "View__panel--prev",
+                  panelId === nextPanel && "View__panel--next",
+                  panelId === swipeBackPrevPanel &&
+                    "View__panel--swipe-back-prev",
+                  panelId === swipeBackNextPanel &&
+                    "View__panel--swipe-back-next",
+                  swipeBackResult === SwipeBackResults.success &&
+                    "View__panel--swipe-back-success",
+                  swipeBackResult === SwipeBackResults.fail &&
+                    "View__panel--swipe-back-failed"
+                )}
                 onAnimationEnd={
                   isTransitionTarget ? this.transitionEndHandler : undefined
                 }

package/src/{components/ChipsInput → hooks}/useChipsInput.ts

@@ -1,12 +1,9 @@
 import * as React from "react";
-import {
-  ChipsInputOption,
-  ChipsInputProps,
-  ChipsInputValue,
-} from "./ChipsInput";
+import { ChipOption } from "../components/Chip/Chip";
+import { ChipsInputBaseProps } from "../components/ChipsInputBase/ChipsInputBase";
 
-export const useChipsInput = <Option extends ChipsInputOption>(
-  props: Partial<ChipsInputProps<Option>>
+export const useChipsInput = <Option extends ChipOption>(
+  props: Partial<ChipsInputBaseProps<Option>>
 ) => {
   const { value, getOptionValue, onChange, onInputChange, getNewOptionData } =
     props;
@@ -57,7 +54,7 @@ export const useChipsInput = <Option extends ChipsInputOption>(
     }
   }, [addOption, clearInput, getNewOptionData, fieldValue]);
   const removeOption = React.useCallback(
-    (value: ChipsInputValue) => {
+    (value) => {
       toggleOption(getNewOptionData!(undefined, value as string), false);
     },
     [toggleOption, getNewOptionData]

package/src/{components/ChipsSelect → hooks}/useChipsSelect.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { ChipsInputOption } from "../ChipsInput/ChipsInput";
-import { useChipsInput } from "../ChipsInput/useChipsInput";
-import { ChipsSelectProps } from "./ChipsSelect";
+import { useChipsInput } from "./useChipsInput";
+import { ChipsSelectProps } from "../components/ChipsSelect/ChipsSelect";
+import { ChipOption } from "../components/Chip/Chip";
 
-export const useChipsSelect = <Option extends ChipsInputOption>(
+export const useChipsSelect = <Option extends ChipOption>(
   props: Partial<ChipsSelectProps<Option>>
 ) => {
   const { options, filterFn, getOptionLabel, getOptionValue } = props;

package/src/index.ts

@@ -50,6 +50,7 @@ export { ActionSheet } from "./components/ActionSheet/ActionSheet";
 export type { ActionSheetProps } from "./components/ActionSheet/ActionSheet";
 export { ActionSheetItem } from "./components/ActionSheetItem/ActionSheetItem";
 export type { ActionSheetItemProps } from "./components/ActionSheetItem/ActionSheetItem";
+export { ActionSheetDefaultIosCloseItem } from "./components/ActionSheet/ActionSheetDefaultIosCloseItem";
 export { ScreenSpinner } from "./components/ScreenSpinner/ScreenSpinner";
 export type { ScreenSpinnerProps } from "./components/ScreenSpinner/ScreenSpinner";
 export { Snackbar } from "./components/Snackbar/Snackbar";
@@ -99,6 +100,7 @@ export type { GroupProps } from "./components/Group/Group";
 export { Gradient } from "./components/Gradient/Gradient";
 export type { GradientProps } from "./components/Gradient/Gradient";
 export { List } from "./components/List/List";
+export type { ListProps } from "./components/List/List";
 export { Cell } from "./components/Cell/Cell";
 export type { CellProps } from "./components/Cell/Cell";
 export { RichCell } from "./components/RichCell/RichCell";
@@ -260,6 +262,7 @@ export type { ModalCardBaseProps } from "./components/ModalCardBase/ModalCardBas
 export { AppRoot } from "./components/AppRoot/AppRoot";
 export type { AppRootProps } from "./components/AppRoot/AppRoot";
 export { AdaptivityProvider } from "./components/AdaptivityProvider/AdaptivityProvider";
+export type { AdaptivityProviderProps } from "./components/AdaptivityProvider/AdaptivityProvider";
 export { ConfigProvider } from "./components/ConfigProvider/ConfigProvider";
 export type { ConfigProviderProps } from "./components/ConfigProvider/ConfigProvider";
 export {

package/src/lib/animate.ts

@@ -1,4 +1,4 @@
-import { canUseDOM } from "@vkontakte/vkjs";
+import { canUseDOM } from "./dom";
 
 /**
  * Функция для js анимации

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

package/src/lib/testing.ts

@@ -1,4 +1,4 @@
-import { canUseDOM } from "@vkontakte/vkjs";
+import { canUseDOM } from "./dom";
 
 // eslint-disable-next-line no-restricted-globals
 export const isTesting = Boolean(canUseDOM && (window as any).__isVkuiTesting);

package/src/lib/touch.ts

@@ -1,4 +1,4 @@
-import { canUseDOM } from "@vkontakte/vkjs";
+import { canUseDOM } from "./dom";
 
 export interface VKUITouchEvent extends MouseEvent, TouchEvent {}
 export type VKUITouchEventHander = (e: VKUITouchEvent) => void;

package/src/styles/components.css

@@ -120,6 +120,7 @@
 @import "../components/Checkbox/Checkbox.css";
 @import "../components/Input/Input.css";
 @import "../components/ChipsInput/ChipsInput.css";
+@import "../components/ChipsInputBase/ChipsInputBase.css";
 @import "../components/Chip/Chip.css";
 @import "../components/Select/Select.css";
 @import "../components/Textarea/Textarea.css";