@vkontakte/vkui 4.35.3 → 4.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.35.3",
+  "version": "4.36.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -45,9 +45,9 @@
     "@typescript-eslint/parser": "^4.0.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.40.4",
     "@vkontakte/eslint-config": "3.1.0",
-    "@vkontakte/icons": "^1.145.1",
+    "@vkontakte/icons": "^1.184.0",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.14.3",
+    "@vkontakte/vkui-tokens": "4.16.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -58,7 +58,7 @@
     "chalk": "^4.1.0",
     "classnames": "^2.2.6",
     "clean-webpack-plugin": "^4.0.0",
-    "concurrently": "^4.1.2",
+    "concurrently": "^7.3.0",
     "cross-env": "^7.0.2",
     "css-loader": "^6.5.1",
     "cssnano": "^5.1.12",
@@ -86,7 +86,7 @@
     "postcss-cli": "^9.1.0",
     "postcss-custom-properties": "^12.1.7",
     "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^7.0.1",
     "postcss-modules": "^4.3.0",
     "postcss-value-parser": "^4.2.0",
     "postcss-values-parser": "^6.0.2",
@@ -96,7 +96,7 @@
     "react": "^16.8.6",
     "react-docgen-typescript": "^2.1.1",
     "react-dom": "^16.8.6",
-    "react-frame-component": "^3.0.0",
+    "react-frame-component": "^5.2.3",
     "react-styleguidist": "^11.2.0",
     "semver": "^7.3.5",
     "shx": "^0.3.2",
@@ -122,10 +122,10 @@
     "generate_scheme": "./tasks/generate_scheme.js"
   },
   "peerDependencies": {
-    "@vkontakte/icons": "^1.136.0",
+    "@vkontakte/icons": "^1.184.0",
     "@vkontakte/vk-bridge": "^2.0.2",
-    "react": "^16.8.6 || ^17.0.0",
-    "react-dom": "^16.8.6 || ^17.0.0"
+    "react": "^16.8.6 || ^17.0.0 || ^18.1.0",
+    "react-dom": "^16.8.6 || ^17.0.0 || ^18.1.0"
   },
   "size-limit": [
     {

package/src/components/ActionSheet/ActionSheet.css

@@ -1,10 +1,31 @@
 .ActionSheet {
   position: relative;
   overflow: hidden;
+  box-shadow: var(--vkui--elevation3);
+  width: calc(100% - 20px);
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  animation: vkui-animation-actionsheet-intro 0.2s var(--android-easing);
+  padding: 8px 0;
+  margin: 10px;
+  border-radius: 12px;
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
 }
 
 .ActionSheet__header {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_subhead));
+  padding: 16px 20px;
+}
+
+.ActionSheet--closing {
+  transform: translateY(calc(100% + 20px));
+  transition: transform 0.2s var(--android-easing);
+}
+
+.ActionSheet__title + .ActionSheet__text {
+  margin-top: 8px;
 }
 
 /**
@@ -14,10 +35,8 @@
   width: 100%;
   animation: vkui-animation-actionsheet-intro 0.3s var(--ios-easing);
   padding: 10px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
+  margin: unset;
+  background: transparent;
 }
 
 .ActionSheet--ios.ActionSheet--closing {
@@ -26,7 +45,6 @@
 }
 
 .ActionSheet--ios .ActionSheet__header {
-  padding: 15px 10px;
   position: relative;
   overflow: hidden;
   border-radius: 14px 14px 0 0;
@@ -53,42 +71,20 @@
   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: "";
 }
 
 /**
- * Android
+ * Compact
  */
-.ActionSheet--android,
-.ActionSheet--vkcom {
-  width: calc(100% - 20px);
-  margin: 10px;
-  animation: vkui-animation-actionsheet-intro 0.2s var(--android-easing);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  border-radius: 12px;
-  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.16), 0 0 4px 0 rgba(0, 0, 0, 0.08);
-  padding: 8px 0;
-  background: var(--modal_card_background);
-}
 
-.ActionSheet--android.ActionSheet--closing {
-  transform: translateY(calc(100% + 20px));
-  transition: transform 0.2s var(--android-easing);
-}
-
-.ActionSheet--android .ActionSheet__header,
-.ActionSheet--vkcom .ActionSheet__header {
-  padding: 16px 20px;
-}
-
-.ActionSheet--android .ActionSheet__title + .ActionSheet__text,
-.ActionSheet--vkcom .ActionSheet__title + .ActionSheet__text {
-  margin-top: 8px;
+.ActionSheet--sizeY-compact .ActionSheet__header {
+  padding: 12px 20px;
 }
 
 /**
@@ -98,39 +94,15 @@
 .ActionSheet--desktop {
   width: auto;
   height: auto;
-  background: var(--modal_card_background);
   animation: none;
-  padding: 0;
   margin: 0;
 }
 
-.ActionSheet--desktop.ActionSheet--sizeY-compact {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
 .ActionSheet--desktop.ActionSheet--ios {
   border-radius: 14px;
-  box-shadow: 0 0 96px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
   padding: 0;
 }
 
-.ActionSheet--desktop.ActionSheet--android {
-  min-width: 112px;
-  border-radius: 12px;
-  padding: 8px 0;
-  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.16), 0 0 4px rgba(0, 0, 0, 0.08);
-}
-
-.ActionSheet--desktop.ActionSheet--vkcom {
-  border-radius: 12px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
-}
-
-.ActionSheet--desktop.ActionSheet--vkcom .ActionSheet__header {
-  padding: 14px 20px;
-}
-
 /**
 * Animations
 */

package/src/components/ActionSheet/ActionSheet.tsx

@@ -5,7 +5,7 @@ import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
 import { ActionSheetDropdown } from "./ActionSheetDropdown";
 import { hasReactNode, noop } from "../../lib/utils";
 import { ActionSheetContext, ItemClickHandler } from "./ActionSheetContext";
-import { Caption } from "../Typography/Caption/Caption";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useTimeout } from "../../hooks/useTimeout";
 import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
@@ -123,15 +123,12 @@ export const ActionSheet = ({
         {(hasReactNode(header) || hasReactNode(text)) && (
           <header vkuiClass="ActionSheet__header">
             {hasReactNode(header) && (
-              <Caption
-                weight={platform === IOS ? "1" : "2"}
-                vkuiClass="ActionSheet__title"
-              >
+              <Footnote weight="2" vkuiClass="ActionSheet__title">
                 {header}
-              </Caption>
+              </Footnote>
             )}
             {hasReactNode(text) && (
-              <Caption vkuiClass="ActionSheet__text">{text}</Caption>
+              <Footnote vkuiClass="ActionSheet__text">{text}</Footnote>
             )}
           </header>
         )}

package/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx

@@ -0,0 +1,12 @@
+import {
+  ActionSheetItem,
+  ActionSheetItemProps,
+} from "../ActionSheetItem/ActionSheetItem";
+
+export const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {
+  return (
+    <ActionSheetItem autoclose mode="cancel" {...props}>
+      Отменить
+    </ActionSheetItem>
+  );
+};

package/src/components/ActionSheet/ActionSheetDropdown.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
+import { Platform } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { SharedDropdownProps } from "./types";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
 import "./ActionSheet.css";
@@ -16,17 +17,19 @@ export const ActionSheetDropdown = ({
   popupDirection,
   ...restProps
 }: SharedDropdownProps) => {
+  const { sizeY } = useAdaptivity();
   const platform = usePlatform();
-  const baseClaseName = getClassName("ActionSheet", platform);
 
   return (
     <FocusTrap
       {...restProps}
       onClick={stopPropagation}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(baseClaseName, {
-        "ActionSheet--closing": closing,
-      })}
+      vkuiClass={classNames(
+        "ActionSheet",
+        platform === Platform.IOS && "ActionSheet--ios",
+        closing && "ActionSheet--closing",
+        `ActionSheet--sizeY-${sizeY}`
+      )}
     >
       {children}
     </FocusTrap>

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { useDOM } from "../../lib/dom";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -7,6 +6,7 @@ import { useEffectDev } from "../../hooks/useEffectDev";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { isRefObject } from "../../lib/isRefObject";
 import { warnOnce } from "../../lib/warnOnce";
+import { Platform } from "../../lib/platform";
 import { useEventListener } from "../../hooks/useEventListener";
 import { SharedDropdownProps } from "./types";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
@@ -72,9 +72,8 @@ export const ActionSheetDropdownDesktop = ({
     if (isRefObject<SharedDropdownProps["toggleRef"], HTMLElement>(toggleRef)) {
       return toggleRef;
     }
-    const refObject = { current: toggleRef as HTMLElement };
 
-    return refObject;
+    return { current: toggleRef as HTMLElement };
   }, [toggleRef]);
 
   return (
@@ -83,7 +82,8 @@ export const ActionSheetDropdownDesktop = ({
       offsetDistance={0}
       placement={isPopupDirectionTop ? "top-end" : "bottom-end"}
       vkuiClass={classNames(
-        getClassName("ActionSheet", platform),
+        "ActionSheet",
+        platform === Platform.IOS && "ActionSheet--ios",
         "ActionSheet--desktop",
         `ActionSheet--sizeY-${sizeY}`
       )}

package/src/components/ActionSheet/Readme.md

@@ -28,11 +28,7 @@ const openBase = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       toggleRef={baseTargetRef}
     >
       <ActionSheetItem autoclose>Сохранить в закладках</ActionSheetItem>
@@ -49,11 +45,7 @@ const openIcons = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       toggleRef={iconsTargetRef}
     >
       <ActionSheetItem autoclose before={<Icon28EditOutline />}>
@@ -88,11 +80,7 @@ const openSubtitle = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       toggleRef={subtitleTargetRef}
     >
       <ActionSheetItem
@@ -124,11 +112,7 @@ const openSelectable = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       toggleRef={selectableTargetRef}
     >
       <ActionSheetItem
@@ -188,11 +172,7 @@ const openTitle = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       header="Вы действительно хотите удалить это видео из Ваших видео?"
       toggleRef={titleTargetRef}
     >
@@ -206,11 +186,7 @@ const openBaseTop = () =>
   setPopout(
     <ActionSheet
       onClose={onClose}
-      iosCloseItem={
-        <ActionSheetItem autoclose mode="cancel">
-          Отменить
-        </ActionSheetItem>
-      }
+      iosCloseItem={<ActionSheetDefaultIosCloseItem />}
       toggleRef={baseTopTargetRef}
     >
       <ActionSheetItem autoclose>Сохранить в закладках</ActionSheetItem>

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;
 }