@vkontakte/vkui 4.35.3 → 4.36.0

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -1,25 +1,17 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
 import { Tappable } from "../Tappable/Tappable";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode, noop } from "../../lib/utils";
+import { Platform } from "../../lib/platform";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import { Title } from "../Typography/Title/Title";
 import { Text } from "../Typography/Text/Text";
-import { ANDROID, VKCOM } from "../../lib/platform";
-import { Icon16Done, Icon24Done } from "@vkontakte/icons";
+import { Icon24CheckCircleOn } from "@vkontakte/icons";
 import {
   ActionSheetContext,
   ActionSheetContextType,
 } from "../ActionSheet/ActionSheetContext";
-import { Caption } from "../Typography/Caption/Caption";
-import { Headline } from "../Typography/Headline/Headline";
-import {
-  withAdaptivity,
-  AdaptivityProps,
-  SizeType,
-} from "../../hoc/withAdaptivity";
+import { AdaptivityProps, withAdaptivity } from "../../hoc/withAdaptivity";
 import "./ActionSheetItem.css";
 
 export interface ActionSheetItemProps
@@ -37,6 +29,10 @@ export interface ActionSheetItemProps
   autoclose?: boolean;
   selectable?: boolean;
   disabled?: boolean;
+  /**
+   * Все текстовые элементы при необходимости занимают несколько строк
+   */
+  multiline?: boolean;
   /**
    * Если autoclose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.
    * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.
@@ -62,6 +58,7 @@ const ActionSheetItemComponent = ({
   onClick,
   sizeY,
   onImmediateClick,
+  multiline = false,
   ...restProps
 }: ActionSheetItemProps) => {
   const platform = usePlatform();
@@ -74,7 +71,9 @@ const ActionSheetItemComponent = ({
     Component = "label";
   }
 
-  const isCompact = hasReactNode(subtitle) || hasReactNode(meta) || selectable;
+  const isRich = hasReactNode(subtitle) || hasReactNode(meta) || selectable;
+  const isCentered =
+    !isRich && !hasReactNode(before) && platform === Platform.IOS;
 
   return (
     <Tappable
@@ -84,75 +83,47 @@ const ActionSheetItemComponent = ({
           ? onClick
           : onItemClick(onClick, onImmediateClick, Boolean(autoclose))
       }
-      activeMode="ActionSheetItem--active"
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
+      activeMode={
+        platform === Platform.IOS ? "ActionSheetItem--active" : undefined
+      }
       vkuiClass={classNames(
-        getClassName("ActionSheetItem", platform),
+        "ActionSheetItem",
+        platform === Platform.IOS && "ActionSheetItem--ios",
         `ActionSheetItem--${mode}`,
         `ActionSheetItem--sizeY-${sizeY}`,
-        {
-          "ActionSheetItem--compact": isCompact,
-          "ActionSheetItem--desktop": isDesktop,
-          "ActionSheetItem--withSubtitle": hasReactNode(subtitle),
-        }
+        isRich && "ActionSheetItem--rich",
+        isDesktop && "ActionSheetItem--desktop"
       )}
       Component={Component}
     >
       {hasReactNode(before) && (
         <div vkuiClass="ActionSheetItem__before">{before}</div>
       )}
-      <div vkuiClass="ActionSheetItem__container">
-        <div vkuiClass="ActionSheetItem__content">
-          {sizeY === SizeType.COMPACT ? (
-            <React.Fragment>
-              <Text
-                weight={mode === "cancel" ? "2" : undefined}
-                vkuiClass="ActionSheetItem__children"
-              >
-                {children}
-              </Text>
-              {hasReactNode(meta) && (
-                <Text vkuiClass="ActionSheetItem__meta">{meta}</Text>
-              )}
-            </React.Fragment>
-          ) : (
-            <React.Fragment>
-              {platform === ANDROID ? (
-                <Headline weight={mode === "cancel" ? "2" : "3"}>
-                  {children}
-                </Headline>
-              ) : (
-                <Title
-                  weight={mode === "cancel" ? "2" : "3"}
-                  level={isCompact || hasReactNode(before) ? "3" : "2"}
-                  vkuiClass="ActionSheetItem__children"
-                >
-                  {children}
-                </Title>
-              )}
-              {hasReactNode(meta) &&
-                (platform === ANDROID ? (
-                  <Headline weight={mode === "cancel" ? "2" : "3"}>
-                    {children}
-                  </Headline>
-                ) : (
-                  <Title
-                    weight="3"
-                    level={isCompact || hasReactNode(before) ? "3" : "2"}
-                    vkuiClass="ActionSheetItem__meta"
-                  >
-                    {meta}
-                  </Title>
-                ))}
-            </React.Fragment>
+      <div
+        vkuiClass={classNames(
+          "ActionSheetItem__container",
+          !multiline && "ActionSheetItem--ellipsis"
+        )}
+      >
+        <div
+          vkuiClass={classNames(
+            "ActionSheetItem__content",
+            isCentered && "ActionSheetItem--centered"
+          )}
+        >
+          <Text
+            weight={mode === "cancel" ? "2" : undefined}
+            vkuiClass="ActionSheetItem__children"
+          >
+            {children}
+          </Text>
+          {hasReactNode(meta) && (
+            <Text vkuiClass="ActionSheetItem__meta">{meta}</Text>
           )}
         </div>
-        {hasReactNode(subtitle) &&
-          (sizeY === SizeType.COMPACT ? (
-            <Caption vkuiClass="ActionSheetItem__subtitle">{subtitle}</Caption>
-          ) : (
-            <Subhead vkuiClass="ActionSheetItem__subtitle">{subtitle}</Subhead>
-          ))}
+        {hasReactNode(subtitle) && (
+          <Subhead vkuiClass="ActionSheetItem__subtitle">{subtitle}</Subhead>
+        )}
       </div>
       {selectable && (
         <div vkuiClass="ActionSheetItem__after">
@@ -168,7 +139,7 @@ const ActionSheetItemComponent = ({
             disabled={restProps.disabled}
           />
           <div vkuiClass="ActionSheetItem__marker">
-            {platform === VKCOM ? <Icon24Done /> : <Icon16Done />}
+            <Icon24CheckCircleOn />
           </div>
         </div>
       )}

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -21,12 +21,14 @@ export const MOBILE_SIZE = 320;
 export const MOBILE_LANDSCAPE_HEIGHT = 414;
 export const MEDIUM_HEIGHT = 720;
 
+export interface AdaptivityProviderProps extends AdaptivityProps {
+  children?: React.ReactNode;
+}
+
 /**
  * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider
  */
-const AdaptivityProvider = (
-  props: React.PropsWithChildren<AdaptivityProps>
-) => {
+export const AdaptivityProvider = (props: AdaptivityProviderProps) => {
   const adaptivityRef = React.useRef<ReturnType<
     typeof calculateAdaptivity
   > | null>(null);
@@ -170,5 +172,3 @@ function calculateAdaptivity(
 
   return { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover };
 }
-
-export { AdaptivityProvider };

package/src/components/Alert/Alert.css

@@ -1,8 +1,24 @@
 .Alert {
   user-select: none;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   position: relative;
+  min-width: 280px;
   max-width: 416px;
+  margin: auto 24px;
+  box-shadow: var(--vkui--elevation4);
+  border-radius: var(--vkui--size_border_radius_paper--regular);
+  animation: vkui-animation-android-alert-intro 0.2s var(--android-easing);
+}
+
+.Alert--desktop {
+  width: 100%;
+}
+
+.Alert--closing {
+  transform: scale(0.95);
+  opacity: 0;
+  transition: transform 0.2s var(--android-easing),
+    opacity 0.2s var(--android-easing);
 }
 
 .Alert::before {
@@ -11,7 +27,10 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--modal_card_background);
+  background-color: var(
+    --modal_card_background,
+    var(--vkui--color_background_modal)
+  );
   z-index: 1;
   content: "";
   border-radius: inherit;
@@ -20,6 +39,7 @@
 .Alert__content {
   position: relative;
   z-index: 2;
+  padding: 24px 24px 20px;
 }
 
 .Alert__action {
@@ -32,6 +52,41 @@
   max-width: 100%;
   position: relative;
   z-index: 2;
+  padding: 0 16px 16px;
+}
+
+.Alert__header {
+  margin-bottom: 8px;
+}
+
+.Alert__text {
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
+}
+
+.Alert--h .Alert__actions {
+  justify-content: flex-end;
+}
+
+.Alert--h .Alert__button {
+  margin-left: 8px;
+}
+
+.Alert--v .Alert__actions {
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.Alert--v .Alert__button {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.Alert--v .Alert__button:first-child {
+  margin-top: 0;
+}
+
+.Alert--v .Alert__button:last-child {
+  margin-bottom: 0;
 }
 
 /**
@@ -39,12 +94,14 @@
  */
 .Alert--ios {
   width: 270px;
-  border-radius: 12px;
+  min-width: 270px;
   overflow: hidden;
   animation: vkui-animation-ios-alert-intro 0.3s var(--ios-easing);
+  box-shadow: none;
 }
 
 .Alert--ios.Alert--closing {
+  transform: none;
   opacity: 0;
   transition: opacity 0.3s var(--ios-easing);
 }
@@ -58,6 +115,10 @@
   margin-bottom: 7px;
 }
 
+.Alert--ios .Alert__text {
+  color: inherit;
+}
+
 .Alert--ios .Alert__content::after {
   content: "";
   position: absolute;
@@ -65,19 +126,27 @@
   height: 1px;
   right: 0;
   left: 0;
-  background: var(--action_sheet_separator);
+  background: var(
+    --action_sheet_separator,
+    var(--vkui--color_separator_primary_alpha)
+  );
   transform-origin: center bottom;
 }
 
+.Alert--ios .Alert__actions {
+  padding: initial;
+}
+
 .Alert--ios.Alert--v .Alert__actions {
   flex-direction: column;
+  align-items: initial;
 }
 
 .Alert--ios .Alert__action {
   position: relative;
   font-size: 17px;
   line-height: 44px;
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_text_accent));
   border: 0;
   padding: 0 6px;
   margin: 0;
@@ -97,7 +166,10 @@
 .Alert--ios .Alert__action::after {
   content: "";
   position: absolute;
-  background: var(--action_sheet_separator);
+  background: var(
+    --action_sheet_separator,
+    var(--vkui--color_separator_primary_alpha)
+  );
 }
 
 .Alert--ios.Alert--h .Alert__action::after {
@@ -169,76 +241,7 @@
 }
 
 .Alert--ios .Alert__action--destructive {
-  color: var(--destructive);
-}
-
-/**
- * Android & VKCOM
- */
-.Alert--android {
-  min-width: 280px;
-  margin: auto 24px;
-  box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.3), 0 0 35px 0 rgba(0, 0, 0, 0.22);
-  border-radius: 12px;
-  animation: vkui-animation-android-alert-intro 0.2s ease;
-}
-
-.Alert--desktop.Alert--android {
-  width: 416px;
-}
-
-.Alert--android.Alert--closing,
-.Alert--vkcom.Alert--closing {
-  transform: scale(0.95);
-  opacity: 0;
-  transition: transform 0.2s var(--android-easing),
-    opacity 0.2s var(--android-easing);
-}
-
-.Alert--android .Alert__content {
-  padding: 24px 24px 20px;
-}
-
-.Alert--android .Alert__header,
-.Alert--vkcom .Alert__header {
-  margin-bottom: 8px;
-}
-
-.Alert--android .Alert__text,
-.Alert--vkcom .Alert__text {
-  color: var(--text_secondary);
-}
-
-.Alert--android .Alert__actions {
-  padding: 0 16px 16px;
-}
-
-.Alert--android.Alert--h .Alert__actions,
-.Alert--vkcom.Alert--h .Alert__actions {
-  justify-content: flex-end;
-}
-
-.Alert--android.Alert--v .Alert__actions {
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.Alert--android.Alert--v .Alert__button {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
-.Alert--android.Alert--v .Alert__button:first-child {
-  margin-top: 0;
-}
-
-.Alert--android.Alert--v .Alert__button:last-child {
-  margin-bottom: 0;
-}
-
-.Alert--android.Alert--h .Alert__button,
-.Alert--vkcom.Alert--h .Alert__button {
-  margin-left: 8px;
+  color: var(--destructive, var(--vkui--color_text_negative));
 }
 
 /**
@@ -247,10 +250,7 @@
 
 .Alert--vkcom {
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 96px rgba(0, 0, 0, 0.16);
-  border-radius: 8px;
   width: 400px;
-  margin: auto 24px;
-  animation: vkui-animation-android-alert-intro 0.2s ease;
 }
 
 .Alert--vkcom .Alert__content {

package/src/components/Alert/Alert.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { Tappable } from "../Tappable/Tappable";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { ANDROID, VKCOM, IOS } from "../../lib/platform";
+import { VKCOM, IOS } from "../../lib/platform";
 import { ViewWidth } from "../../hoc/withAdaptivity";
 import { Button, ButtonProps } from "../Button/Button";
 import { hasReactNode, stopPropagation } from "../../lib/utils";
@@ -111,15 +110,15 @@ const AlertAction = ({
     );
   }
 
-  let mode: ButtonProps["mode"] =
-    action.mode === "cancel" ? "secondary" : "primary";
+  let mode: ButtonProps["mode"] = "tertiary";
 
-  if (platform === ANDROID) {
-    mode = "tertiary";
+  // TODO v5.0.0 поправить под новую адаптивность
+  if (viewWidth === ViewWidth.DESKTOP && action.mode === "destructive") {
+    mode = "destructive";
+  }
 
-    if (viewWidth === ViewWidth.DESKTOP && action.mode === "destructive") {
-      mode = "destructive";
-    }
+  if (platform === VKCOM) {
+    mode = action.mode === "cancel" ? "secondary" : "primary";
   }
 
   return (
@@ -163,11 +162,10 @@ export const Alert = ({
   const resolvedActionsLayout: AlertProps["actionsLayout"] =
     platform === VKCOM ? "horizontal" : actionsLayout;
   const canShowCloseButton =
-    platform === VKCOM ||
-    (platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET);
-  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
+    platform !== IOS && viewWidth >= ViewWidth.SMALL_TABLET;
+  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET; // TODO v5.0.0 поправить под новую адаптивность
 
-  const timeout = platform === ANDROID || platform === VKCOM ? 200 : 300;
+  const timeout = platform === IOS ? 300 : 200;
 
   const close = React.useCallback(() => {
     setClosing(true);
@@ -221,7 +219,9 @@ export const Alert = ({
         onClose={close}
         timeout={timeout}
         vkuiClass={classNames(
-          getClassName("Alert", platform),
+          "Alert",
+          platform === IOS && "Alert--ios",
+          platform === VKCOM && "Alert--vkcom",
           resolvedActionsLayout === "vertical" ? "Alert--v" : "Alert--h",
           closing && "Alert--closing",
           isDesktop && "Alert--desktop"

package/src/components/Alert/Readme.md

@@ -23,111 +23,90 @@
 > 5. Порядок кнопок должен быть одинаковым на всех платформах (см. пункт 2).
 
 ```jsx { "props": { "layout": false, "adaptivity": true } }
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      popout: null,
-      actionsLog: [],
-    };
-
-    this.openAction = this.openAction.bind(this);
-    this.openDeletion = this.openDeletion.bind(this);
-    this.closePopout = this.closePopout.bind(this);
-    this.addActionLogItem = this.addActionLogItem.bind(this);
-  }
-
-  componentDidMount() {
-    this.openDeletion();
-  }
-
-  addActionLogItem(value) {
-    this.setState({
-      actionsLog: [...this.state.actionsLog, value],
-    });
-  }
-
-  openAction() {
-    this.setState({
-      popout: (
-        <Alert
-          actions={[
-            {
-              title: "Лишить права",
-              mode: "destructive",
-              autoclose: true,
-              action: () =>
-                this.addActionLogItem("Право на модерацию контента убрано."),
-            },
-            {
-              title: "Отмена",
-              autoclose: true,
-              mode: "cancel",
-            },
-          ]}
-          actionsLayout="vertical"
-          onClose={this.closePopout}
-          header="Подтвердите действие"
-          text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
-        />
-      ),
-    });
-  }
-
-  openDeletion() {
-    this.setState({
-      popout: (
-        <Alert
-          actions={[
-            {
-              title: "Отмена",
-              autoclose: true,
-              mode: "cancel",
-            },
-            {
-              title: "Удалить",
-              autoclose: true,
-              mode: "destructive",
-              action: () => this.addActionLogItem("Документ удален."),
-            },
-          ]}
-          actionsLayout="horizontal"
-          onClose={this.closePopout}
-          header="Удаление документа"
-          text="Вы уверены, что хотите удалить этот документ?"
-        />
-      ),
-    });
-  }
-
-  closePopout() {
-    this.setState({ popout: null });
-  }
-
-  render() {
-    return (
-      <SplitLayout popout={this.state.popout}>
-        <SplitCol>
-          <View activePanel="alert">
-            <Panel id="alert">
-              <PanelHeader>Alert</PanelHeader>
-              <Group>
-                <CellButton onClick={this.openAction}>Лишить права</CellButton>
-                <CellButton onClick={this.openDeletion}>
-                  Удалить документ
-                </CellButton>
-                {this.state.actionsLog.map((value, i) => (
-                  <Div key={i}>{value}</Div>
-                ))}
-              </Group>
-            </Panel>
-          </View>
-        </SplitCol>
-      </SplitLayout>
+const Example = () => {
+  const [popout, setPopout] = React.useState(null);
+  const [actionsLog, setActionsLog] = React.useState([]);
+
+  const addActionLogItem = (value) => {
+    setActionsLog([...actionsLog, value]);
+  };
+
+  const closePopout = () => {
+    setPopout(null);
+  };
+
+  const openAction = () => {
+    setPopout(
+      <Alert
+        actions={[
+          {
+            title: "Лишить права",
+            mode: "destructive",
+            autoclose: true,
+            action: () =>
+              addActionLogItem("Право на модерацию контента убрано."),
+          },
+          {
+            title: "Отмена",
+            autoclose: true,
+            mode: "cancel",
+          },
+        ]}
+        actionsLayout="vertical"
+        onClose={closePopout}
+        header="Подтвердите действие"
+        text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+      />
+    );
+  };
+
+  const openDeletion = () => {
+    setPopout(
+      <Alert
+        actions={[
+          {
+            title: "Отмена",
+            autoclose: true,
+            mode: "cancel",
+          },
+          {
+            title: "Удалить",
+            autoclose: true,
+            mode: "destructive",
+            action: () => addActionLogItem("Документ удален."),
+          },
+        ]}
+        actionsLayout="horizontal"
+        onClose={closePopout}
+        header="Удаление документа"
+        text="Вы уверены, что хотите удалить этот документ?"
+      />
     );
-  }
-}
+  };
+
+  React.useEffect(() => {
+    openDeletion();
+  }, []);
+
+  return (
+    <SplitLayout popout={popout}>
+      <SplitCol>
+        <View activePanel="alert">
+          <Panel id="alert">
+            <PanelHeader>Alert</PanelHeader>
+            <Group>
+              <CellButton onClick={openAction}>Лишить права</CellButton>
+              <CellButton onClick={openDeletion}>Удалить документ</CellButton>
+              {actionsLog.map((value, i) => (
+                <Div key={i}>{value}</Div>
+              ))}
+            </Group>
+          </Panel>
+        </View>
+      </SplitCol>
+    </SplitLayout>
+  );
+};
 
 <Example />;
 ```