@vkontakte/vkui 4.35.4 → 4.37.0

package/src/components/ActionSheetItem/ActionSheetItem.css

@@ -5,7 +5,11 @@
   display: flex;
   align-items: center;
   text-decoration: none;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
+  padding: 0 20px;
+  min-height: 48px;
+  border-radius: 0;
+  box-sizing: border-box;
 }
 
 .ActionSheetItem__container,
@@ -20,17 +24,31 @@
   flex-shrink: 0;
 }
 
+.ActionSheetItem__before {
+  margin-right: 18px;
+  margin-left: -2px;
+}
+
 .ActionSheetItem__container {
   max-width: 100%;
   flex-grow: 1;
-  white-space: nowrap;
+  padding: 10px 0;
+}
+
+.ActionSheetItem--ellipsis {
   overflow: hidden;
+  white-space: nowrap;
 }
 
 .ActionSheetItem__content {
   display: flex;
   align-items: baseline;
   overflow: hidden;
+  justify-content: space-between;
+}
+
+.ActionSheetItem--ellipsis .ActionSheetItem__content {
+  justify-content: flex-start;
 }
 
 .ActionSheetItem__children {
@@ -40,31 +58,28 @@
 }
 
 .ActionSheetItem__subtitle {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-top: 2px;
 }
 
 .ActionSheetItem__meta {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
   margin-left: 6px;
   flex-shrink: 0;
 }
 
 .ActionSheetItem__before {
-  color: var(--action_sheet_action_foreground);
+  color: var(--action_sheet_action_foreground, var(--vkui--color_icon_accent));
 }
 
 .ActionSheetItem--destructive .ActionSheetItem__container:first-child {
-  color: var(--destructive);
+  color: var(--destructive, var(--vkui--color_text_negative));
 }
 
 .ActionSheetItem--destructive .ActionSheetItem__before {
-  color: var(--destructive);
-}
-
-.ActionSheetItem--compact .ActionSheetItem__container {
-  color: var(--text_primary);
+  color: var(--destructive, var(--vkui--color_icon_negative));
 }
 
 .ActionSheetItem__radio {
@@ -78,8 +93,9 @@
   border-radius: 50%;
   align-items: center;
   justify-content: center;
-  background-color: var(--accent);
-  color: var(--white);
+  background-color: transparent;
+  color: var(--accent, var(--vkui--color_icon_accent));
+  margin-left: 16px;
 }
 
 .ActionSheetItem__radio:checked ~ .ActionSheetItem__marker {
@@ -91,14 +107,19 @@
  */
 
 .ActionSheetItem--ios {
-  padding: 0 20px;
+  padding: 14px 20px 14px 19px;
   min-height: 56px;
   border-radius: 0;
-  color: var(--action_sheet_action_foreground);
+  color: var(--action_sheet_action_foreground, var(--vkui--color_text_accent));
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
+}
+
+.ActionSheetItem--rich {
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .ActionSheetItem--ios.ActionSheetItem--destructive {
-  color: var(--destructive);
+  color: var(--destructive, var(--vkui--color_text_negative));
 }
 
 .ActionSheetItem--ios:first-child {
@@ -118,7 +139,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: "";
   transition: opacity 0.15s ease-out, background-color 0.15s ease-out;
@@ -132,7 +156,10 @@
   height: 1px;
   content: "";
   top: 0;
-  background: var(--action_sheet_separator);
+  background: var(
+    --action_sheet_separator,
+    var(--vkui--color_separator_primary)
+  );
   transform-origin: center bottom;
 }
 
@@ -149,118 +176,36 @@
 }
 
 .ActionSheetItem--ios:first-child::after,
-.ActionSheetItem--cancel::after {
-  content: none;
-}
-
+.ActionSheetItem--cancel::after,
 .ActionSheet--ios .ActionSheetItem--last::after,
 .ActionSheet--ios .ActionSheet__header:empty {
   content: none;
 }
 
 .ActionSheetItem--ios.ActionSheetItem--active::before {
-  background: var(--separator_common);
+  background-color: var(
+    --separator_common,
+    var(--vkui--color_transparent--active)
+  );
   opacity: 1;
   transition: none;
 }
 
 .ActionSheetItem--ios .ActionSheetItem__container {
-  padding: 13px 0;
+  padding: 0;
 }
 
-.ActionSheetItem--ios .ActionSheetItem__content {
+.ActionSheetItem--ios .ActionSheetItem--centered {
   justify-content: center;
 }
 
-.ActionSheetItem--ios .ActionSheetItem__subtitle {
-  margin-top: 2px;
-}
-
-.ActionSheetItem--ios .ActionSheetItem__marker {
-  margin-left: 12px;
-}
-
-.ActionSheetItem--ios.ActionSheetItem--compact .ActionSheetItem__content,
-.ActionSheetItem--ios
-  .ActionSheetItem__before
-  + .ActionSheetItem__container
-  .ActionSheetItem__content {
-  justify-content: flex-start;
-}
-
-.ActionSheetItem--ios .ActionSheetItem__before {
-  margin-right: 18px;
-  margin-left: -2px;
-}
-
 .ActionSheetItem--cancel {
-  margin-top: 7px;
+  margin-top: 8px;
   margin-bottom: var(--safe-area-inset-bottom);
   border-radius: 14px;
   min-height: 52px;
 }
 
-/**
- * Android
- */
-
-.ActionSheetItem--android {
-  padding: 0 20px;
-  min-height: 48px;
-  border-radius: 0;
-}
-
-.ActionSheetItem--android.ActionSheetItem--active {
-  background-color: var(--action_sheet_separator);
-}
-
-.ActionSheetItem--android .ActionSheetItem__before {
-  margin-right: 18px;
-  margin-left: -2px;
-}
-
-.ActionSheetItem--android .ActionSheetItem__container {
-  padding: 11px 0;
-}
-
-.ActionSheetItem--android .ActionSheetItem__subtitle {
-  margin-top: 1px;
-  margin-bottom: -1px;
-}
-
-.ActionSheetItem--android .ActionSheetItem__marker {
-  margin-left: 16px;
-}
-
-/**
- * VKCOM
- */
-.ActionSheetItem--vkcom {
-  padding: 0 20px;
-  min-height: 48px;
-  border-radius: 0;
-}
-
-.ActionSheetItem--vkcom.ActionSheetItem--active {
-  background-color: var(--action_sheet_separator);
-}
-
-.ActionSheetItem--vkcom .ActionSheetItem__before {
-  margin-right: 17px;
-  margin-left: -1px;
-}
-
-.ActionSheetItem--vkcom .ActionSheetItem__subtitle {
-  margin-top: 2px;
-  margin-bottom: -2px;
-}
-
-.ActionSheetItem--vkcom .ActionSheetItem__marker {
-  margin-left: 26px;
-  color: var(--accent);
-  background-color: transparent;
-}
-
 /**
  * Desktop
  */
@@ -277,15 +222,12 @@
 .ActionSheetItem[disabled] .ActionSheetItem__children,
 .ActionSheetItem[disabled] .ActionSheetItem__meta,
 .ActionSheetItem[disabled] .ActionSheetItem__subtitle {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
+.ActionSheetItem[disabled] .ActionSheetItem__marker,
 .ActionSheetItem[disabled] .ActionSheetItem__before {
-  color: var(--icon_secondary);
-}
-
-.ActionSheetItem[disabled] .ActionSheetItem__marker {
-  background: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }
 
 /**
@@ -293,14 +235,19 @@
  */
 
 .ActionSheetItem--sizeY-compact {
-  min-height: 44px;
+  min-height: 32px;
 }
 
-.ActionSheetItem--sizeY-compact .ActionSheetItem__container {
-  padding: 12px 0;
+.ActionSheetItem--sizeY-compact.ActionSheetItem--ios {
+  min-height: 36px;
+  padding: 4px 20px 4px 18px;
 }
 
-.ActionSheetItem--sizeY-compact.ActionSheetItem--withSubtitle
-  .ActionSheetItem__container {
-  padding: 10px 0;
+.ActionSheetItem--sizeY-compact:not(.ActionSheetItem--ios)
+  + .ActionSheetItem--sizeY-compact:not(.ActionSheetItem--ios) {
+  margin-top: 2px;
+}
+
+.ActionSheetItem--sizeY-compact .ActionSheetItem__container {
+  padding: 5px 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 };