@vkontakte/vkui 4.37.0 → 5.0.0

package/postcss.config.js

@@ -0,0 +1,101 @@
+const path = require("path");
+const cssCustomProperties = require("postcss-custom-properties");
+const scopeRoot = require("./packages/postcss-scope-root");
+const restructureVariable = require("./packages/postcss-restructure-variable");
+const cssImport = require("postcss-import");
+const autoprefixer = require("autoprefixer");
+const cssModules = require("postcss-modules");
+const cssnano = require("cssnano");
+const checkKeyframes = require("./packages/postcss-check-keyframes");
+const {
+  generateScopedName,
+  cssCustomPropertiesPaths,
+  getCustomMedias,
+} = require("./shared");
+// TODO: включить после добавления поддержки VK-Sans-Text
+// const VkSansMandatoryDeclarations = require("./packages/postcss-plugin-vk-sans");
+const postcssCustomMedia = require("postcss-custom-media");
+
+module.exports = (ctx) => {
+  const plugins = [
+    cssImport(),
+    checkKeyframes({
+      importFrom: path.join(__dirname, "src/styles/animations.css"),
+    }),
+    cssCustomProperties({
+      importFrom: cssCustomPropertiesPaths,
+      preserve: true,
+      disableDeprecationNotice: true,
+    }),
+    // postcss-custom-properties only works with :root
+    scopeRoot({
+      customPropRoot: ".vkui__root, .vkui__portal-root",
+      except: [
+        path.resolve(
+          "./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css"
+        ),
+      ],
+    }),
+    restructureVariable(
+      [
+        "./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css",
+        "./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariablesLocal.css",
+        "./node_modules/@vkontakte/vkui-tokens/themes/vkBaseDark/cssVars/declarations/onlyVariablesLocal.css",
+        "./node_modules/@vkontakte/vkui-tokens/themes/vkIOS/cssVars/declarations/onlyVariablesLocal.css",
+        "./node_modules/@vkontakte/vkui-tokens/themes/vkIOSDark/cssVars/declarations/onlyVariablesLocal.css",
+        "./node_modules/@vkontakte/vkui-tokens/themes/vkCom/cssVars/declarations/onlyVariablesLocal.css",
+        "./node_modules/@vkontakte/vkui-tokens/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css",
+      ].map((pathSegment) => path.resolve(pathSegment))
+    ),
+    autoprefixer(),
+    cssModules({
+      generateScopedName: ctx.options.isSandbox
+        ? (name) => name
+        : generateScopedName,
+      getJSON: () => void 0,
+    }),
+    // TODO: включить после добавления поддержки VK-Sans-Text
+    // VkSansMandatoryDeclarations({
+    //   platform: "vkui",
+    //   debug: false,
+    //   ignoreFiles: [],
+    //   ignoreSelectors: [],
+    //   explicitNormalLetterSpacing: false,
+    //   respectImportant: true,
+    //   features: {
+    //     injectLetterSpacing: true,
+    //     injectVkSansDisplay: true,
+    //     overrideToVkSansDisplay: true,
+    //     overrideCustomFonts: true,
+    //   },
+    //   varName: "--font-display",
+    //   customPropertiesFiles: [
+    //     path.resolve(
+    //       "./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css"
+    //     ),
+    //   ],
+    // }),
+    postcssCustomMedia({
+      importFrom: getCustomMedias,
+      // см. CONTRIBUTING.md
+      exportTo: path.resolve("./src/styles/customMedias.generated.css"),
+    }),
+  ];
+
+  if (process.env.NODE_ENV === "production") {
+    plugins.push(
+      cssnano({
+        preset: [
+          "default",
+          {
+            // Отключаем из-за того, что `postcss-calc` меняет порядок операндов при умножении -1 на переменную
+            // Подробности здесь https://github.com/VKCOM/VKUI/issues/2963
+            calc: false,
+          },
+        ],
+      })
+    );
+  }
+
+  return { plugins };
+};

package/shared.js

@@ -0,0 +1,50 @@
+const path = require("path");
+const { BREAKPOINTS, MEDIA_QUERIES } = require("./src/shared/breakpoints");
+
+module.exports = {
+  generateScopedName: (name) => {
+    return name.startsWith("vkui") || name === "mount" ? name : `vkui${name}`;
+  },
+
+  cssCustomPropertiesPaths: [path.join(__dirname, "src/styles/constants.css")],
+
+  /**
+   * Возвращает медиа выражения необходимые по дизайн-системе. У ключей синтаксис должен быть как у CSS Custom Properties.
+   * <br />
+   * {@link https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media}
+   */
+  getCustomMedias: () => {
+    const customMedia = {
+      "--sizeX-regular": `(min-width: ${BREAKPOINTS.SMALL_TABLET}px)`,
+      "--sizeX-compact": `(max-width: ${BREAKPOINTS.SMALL_TABLET - 1}px)`,
+
+      "--sizeY-compact": `(pointer: fine) and (min-width: ${BREAKPOINTS.SMALL_TABLET}px), (max-height: ${BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT}px)`, // prettier-ignore
+      "--sizeY-regular": `(pointer: coarse) and (min-height: ${415}px), (pointer: none) and (min-height: ${415}px), (max-width: ${BREAKPOINTS.SMALL_TABLET - 1}px) and (min-height: ${415}px)`, // prettier-ignore
+
+      "--hover-has": "(hover: hover)",
+      "--hover-has-not": "(hover: none)",
+
+      "--mouse-has": "(pointer: fine)",
+      "--mouse-has-not": "(pointer: coarse), (pointer: none)",
+
+      "--desktop": `(min-width: ${BREAKPOINTS.SMALL_TABLET}px) and (pointer: fine), (min-width: ${BREAKPOINTS.SMALL_TABLET}px) and (min-height: ${BREAKPOINTS.MEDIUM_HEIGHT}px)`, // prettier-ignore
+      "--mobile": `(max-width: ${BREAKPOINTS.SMALL_TABLET - 1}px), (pointer: none) and (max-height: ${BREAKPOINTS.MEDIUM_HEIGHT - 1}px), (pointer: coarse) and (max-height: ${BREAKPOINTS.MEDIUM_HEIGHT - 1}px)`, // prettier-ignore
+
+      "--viewWidth-desktopPlus": MEDIA_QUERIES.DESKTOP_PLUS,
+
+      "--viewWidth-tabletPlus": `(min-width: ${BREAKPOINTS.TABLET}px)`,
+      "--viewWidth-tablet": MEDIA_QUERIES.TABLET,
+
+      "--viewWidth-smallTabletPlus": `(min-width: ${BREAKPOINTS.SMALL_TABLET}px)`,
+      "--viewWidth-smallTablet": MEDIA_QUERIES.SMALL_TABLET,
+      "--viewWidth-smallTabletMinus": `(max-width: ${BREAKPOINTS.SMALL_TABLET - 1}px)`, // prettier-ignore
+
+      "--viewWidth-mobilePlus": `(min-width: ${BREAKPOINTS.MOBILE}px)`,
+      "--viewWidth-mobile": MEDIA_QUERIES.MOBILE,
+
+      "--viewWidth-smallMobileMinus": `(max-width: ${BREAKPOINTS.MOBILE - 1}px)`, // prettier-ignore
+    };
+
+    return { customMedia };
+  },
+};

package/src/components/ActionSheet/ActionSheet.css

@@ -11,11 +11,11 @@
   padding: 8px 0;
   margin: 10px;
   border-radius: 12px;
-  background: var(--modal_card_background, var(--vkui--color_background_modal));
+  background: var(--vkui--color_background_modal);
 }
 
 .ActionSheet__header {
-  color: var(--text_secondary, var(--vkui--color_text_subhead));
+  color: var(--vkui--color_text_subhead);
   padding: 16px 20px;
 }
 
@@ -71,10 +71,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: var(
-    --modal_card_background,
-    var(--vkui--color_background_modal)
-  );
+  background-color: var(--vkui--color_background_modal);
   z-index: 1;
   content: "";
 }
@@ -96,6 +93,7 @@
   height: auto;
   animation: none;
   margin: 0;
+  max-width: 100%;
 }
 
 .ActionSheet--desktop.ActionSheet--ios {

package/src/components/ActionSheet/ActionSheet.e2e.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { Icon28SettingsOutline } from "@vkontakte/icons";
+import { ActionSheet, ActionSheetProps } from "./ActionSheet";
+import { ActionSheetItem } from "../ActionSheetItem/ActionSheetItem";
+import { describeScreenshotFuzz } from "../../testing/e2e/utils";
+import { SizeType, ViewWidth } from "../../lib/adaptivity";
+import { noop } from "../../lib/utils";
+import { HasChildren } from "../../types";
+import { AppRoot } from "../AppRoot/AppRoot";
+import { usePlatform } from "../../hooks/usePlatform";
+import { Platform } from "../../lib/platform";
+
+const AppWrapper = (props: HasChildren) => (
+  <AppRoot mode="embedded" scroll="contain">
+    {props.children}
+  </AppRoot>
+);
+
+const ActionSheetWrapper = (props: ActionSheetProps) => {
+  const platform = usePlatform();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+
+  return (
+    <div style={platform === Platform.VKCOM ? { height: 900 } : {}}>
+      <button ref={toggleRef}>target</button>
+      <ActionSheet
+        {...props}
+        iosCloseItem={<ActionSheetItem mode="cancel">Отменить</ActionSheetItem>}
+        style={{
+          // Перебиваем "absolute", чтобы не задавать фиксированную высоту для тестов под iOS и Android
+          position: "relative",
+        }}
+        toggleRef={toggleRef}
+        onClose={noop}
+      />
+    </div>
+  );
+};
+
+const propSets = [
+  {
+    children: [
+      [
+        <ActionSheetItem key="1">Элемент</ActionSheetItem>,
+        <ActionSheetItem key="2">Второй элемент</ActionSheetItem>,
+        <ActionSheetItem key="3" before={<Icon28SettingsOutline />}>
+          Третий элемент
+        </ActionSheetItem>,
+        <ActionSheetItem
+          key="4"
+          before={<Icon28SettingsOutline />}
+          subtitle="Есть подзаголовок"
+        >
+          Четвертый элемент
+        </ActionSheetItem>,
+        <ActionSheetItem key="5" selectable checked>
+          Пятый элемент
+        </ActionSheetItem>,
+        <ActionSheetItem
+          key="6"
+          before={<Icon28SettingsOutline />}
+          subtitle="Есть подзаголовок, который тоже не заканчивается"
+        >
+          Шестой элемент с длинным заголовком
+        </ActionSheetItem>,
+        <ActionSheetItem
+          key="7"
+          before={<Icon28SettingsOutline />}
+          subtitle="Есть подзаголовок, который не обрезается (multiline)"
+          multiline
+        >
+          Седьмой элемент с очень длинным заголовком, который не должен
+          обрезаться (multiline)
+        </ActionSheetItem>,
+        <ActionSheetItem key="8" subtitle="Есть подзаголовок" meta="Meta">
+          Восьмой элемент
+        </ActionSheetItem>,
+        <ActionSheetItem
+          key="9"
+          subtitle="Meta прижата справа"
+          meta="Meta"
+          multiline
+        >
+          Девятый элемент
+        </ActionSheetItem>,
+      ],
+    ],
+    header: ["Заголовок"],
+  },
+];
+
+describe("ActionSheet", () => {
+  describeScreenshotFuzz(ActionSheetWrapper, propSets, {
+    Wrapper: AppWrapper,
+    adaptivity: {
+      viewWidth: ViewWidth.MOBILE,
+      sizeY: SizeType.REGULAR,
+    },
+    platforms: [Platform.IOS, Platform.ANDROID],
+  });
+
+  describeScreenshotFuzz(ActionSheetWrapper, propSets, {
+    Wrapper: AppWrapper,
+    adaptivity: {
+      viewWidth: ViewWidth.DESKTOP,
+      sizeY: SizeType.REGULAR,
+    },
+    platforms: [Platform.VKCOM],
+  });
+});

package/src/components/ActionSheet/ActionSheet.test.tsx

@@ -0,0 +1,125 @@
+import { render, screen } from "@testing-library/react";
+import { ViewWidth } from "../../lib/adaptivity";
+import {
+  baselineComponent,
+  waitForPopper,
+  runAllTimers,
+} from "../../testing/utils";
+import { ActionSheet, ActionSheetProps } from "./ActionSheet";
+import { ActionSheetItem } from "../ActionSheetItem/ActionSheetItem";
+import userEvent from "@testing-library/user-event";
+import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider";
+import { Platform } from "../../lib/platform";
+import { ConfigProvider } from "../ConfigProvider/ConfigProvider";
+
+describe("ActionSheet", () => {
+  beforeAll(() => jest.useFakeTimers("modern"));
+  afterAll(() => jest.useRealTimers());
+  const toggle = document.createElement("div");
+  const ActionSheetDesktop = (props: Partial<ActionSheetProps>) => (
+    <ConfigProvider platform={Platform.VKCOM}>
+      <AdaptivityProvider viewWidth={ViewWidth.DESKTOP} hasMouse>
+        <ActionSheet
+          toggleRef={toggle}
+          onClose={jest.fn()}
+          {...props}
+          iosCloseItem={null}
+        />
+      </AdaptivityProvider>
+    </ConfigProvider>
+  );
+  const ActionSheetMobile = (props: Partial<ActionSheetProps>) => (
+    <AdaptivityProvider viewWidth={ViewWidth.MOBILE} hasMouse={false}>
+      <ActionSheet
+        toggleRef={toggle}
+        onClose={jest.fn()}
+        {...props}
+        iosCloseItem={null}
+      />
+    </AdaptivityProvider>
+  );
+
+  describe.each([
+    ["desktop", ActionSheetDesktop],
+    ["mobile", ActionSheetMobile],
+  ])("%s", (_name, ActionSheet) => {
+    baselineComponent((p) => <ActionSheet {...p} />);
+
+    describe("calls handlers", () => {
+      it.each([
+        {},
+        { selectable: true },
+        { autoClose: true },
+        { autoClose: true, selectable: true },
+      ])("when %s", async (props) => {
+        const handlers = { onClick: jest.fn(), onChange: jest.fn() };
+        const { unmount } = render(
+          <ActionSheet onClose={() => unmount()}>
+            <ActionSheetItem
+              {...props}
+              {...handlers}
+              {...props}
+              data-testid="item"
+            />
+          </ActionSheet>
+        );
+        await waitForPopper();
+        userEvent.click(screen.getByTestId("item"));
+
+        runAllTimers();
+        expect(handlers.onClick).toBeCalled();
+        props.selectable && expect(handlers.onChange).toBeCalled();
+      });
+    });
+
+    it.each([
+      ["content", () => screen.getByTestId("xxx")],
+      ["toggle", () => toggle],
+    ])("does not close on %s click", async (_name, getNode) => {
+      const onClose = jest.fn();
+      render(
+        <ActionSheet onClose={onClose}>
+          <div data-testid="xxx" />
+        </ActionSheet>
+      );
+      await waitForPopper();
+      runAllTimers();
+      userEvent.click(getNode());
+      expect(onClose).not.toBeCalled();
+    });
+  });
+
+  describe("desktop", () => {
+    it("closes on click outside", async () => {
+      const onClose = jest.fn();
+      render(<ActionSheetDesktop onClose={onClose} />);
+      await waitForPopper();
+      runAllTimers();
+      userEvent.click(document.body);
+      runAllTimers();
+      expect(onClose).toBeCalledTimes(1);
+    });
+    it("calls popupDirection with element", async () => {
+      const popupDirection = jest.fn();
+      render(<ActionSheetDesktop popupDirection={popupDirection} />);
+      await waitForPopper();
+      expect(popupDirection).toBeCalledWith({
+        current: document.querySelector(".vkuiActionSheet"),
+      });
+    });
+  });
+
+  describe("mobile", () => {
+    it("closes on overlay click", async () => {
+      const onClose = jest.fn();
+      render(<ActionSheetMobile onClose={onClose} />);
+      await waitForPopper();
+      runAllTimers();
+      userEvent.click(
+        document.querySelector(".vkuiPopoutWrapper__overlay") as Element
+      );
+      runAllTimers();
+      expect(onClose).toBeCalledTimes(1);
+    });
+  });
+});

package/src/components/ActionSheet/ActionSheet.tsx

@@ -1,17 +1,16 @@
 import * as React from "react";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
-import { IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
 import { ActionSheetDropdown } from "./ActionSheetDropdown";
-import { hasReactNode, noop } from "../../lib/utils";
+import { noop } from "../../lib/utils";
 import { ActionSheetContext, ItemClickHandler } from "./ActionSheetContext";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useTimeout } from "../../hooks/useTimeout";
-import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
+import { useAdaptivityWithMediaQueries } from "../../hooks/useAdaptivityWithMediaQueries";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
-import { warnOnce } from "../../lib/warnOnce";
-import { SharedDropdownProps, PopupDirection, ToggleRef } from "./types";
+import { PopupDirection, SharedDropdownProps, ToggleRef } from "./types";
 import { useScrollLock } from "../AppRoot/ScrollContext";
 import "./ActionSheet.css";
 
@@ -19,27 +18,24 @@ export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
   header?: React.ReactNode;
   text?: React.ReactNode;
   /**
-   * Закрыть попап по клику снаружи. В v5 будет обязательным.
+   * Закрыть попап по клику снаружи.
    */
-  onClose?: VoidFunction;
+  onClose: VoidFunction;
   /**
    * Элемент, рядом с которым вылезает попап на десктопе.
    * Лучше передавать RefObject c current.
-   * В v5 будет обязательным.
    */
-  toggleRef?: ToggleRef;
+  toggleRef: ToggleRef;
   /**
    * Направление на десктопе
    */
   popupDirection?: PopupDirection;
   /**
-   * Только iOS. В v5 будет обязательным.
+   * Только iOS.
    */
   iosCloseItem?: React.ReactNode;
 }
 
-const warn = warnOnce("ActionSheet");
-
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheet
  */
@@ -59,23 +55,16 @@ export const ActionSheet = ({
   const _action = React.useRef(noop);
 
   const afterClose = () => {
-    restProps.onClose?.();
+    restProps.onClose();
     _action.current();
     _action.current = noop;
   };
 
-  if (process.env.NODE_ENV === "development" && !restProps.onClose) {
-    warn(
-      `Без свойства "onClose" нельзя закрыть ActionSheet по клику вне компонента`,
-      "error"
-    );
-  }
-
-  const isDesktop = useAdaptivityIsDesktop();
+  const { isDesktop } = useAdaptivityWithMediaQueries();
 
   useScrollLock(!isDesktop);
 
-  let timeout = platform === IOS ? 300 : 200;
+  let timeout = platform === Platform.IOS ? 300 : 200;
 
   if (isDesktop) {
     timeout = 0;
@@ -91,10 +80,10 @@ export const ActionSheet = ({
   }, [closing, fallbackTransitionFinish]);
 
   const onItemClick = React.useCallback<ItemClickHandler>(
-    (action, immediateAction, autoclose) => (event) => {
+    (action, immediateAction, autoClose) => (event) => {
       event.persist();
       immediateAction && immediateAction(event);
-      if (autoclose) {
+      if (autoClose) {
         _action.current = () => action && action(event);
         setClosing(true);
       } else {
@@ -120,20 +109,18 @@ export const ActionSheet = ({
         className={isDesktop ? className : undefined}
         style={isDesktop ? style : undefined}
       >
-        {(hasReactNode(header) || hasReactNode(text)) && (
+        {(header || text) && (
           <header vkuiClass="ActionSheet__header">
-            {hasReactNode(header) && (
+            {header && (
               <Footnote weight="2" vkuiClass="ActionSheet__title">
                 {header}
               </Footnote>
             )}
-            {hasReactNode(text) && (
-              <Footnote vkuiClass="ActionSheet__text">{text}</Footnote>
-            )}
+            {text && <Footnote vkuiClass="ActionSheet__text">{text}</Footnote>}
           </header>
         )}
         {children}
-        {platform === IOS && !isDesktop && iosCloseItem}
+        {platform === Platform.IOS && !isDesktop && iosCloseItem}
       </DropdownComponent>
     </ActionSheetContext.Provider>
   );

package/src/components/ActionSheet/ActionSheetContext.ts

@@ -5,7 +5,7 @@ export type ActionType<T> = (event: React.MouseEvent<T>) => void;
 export type ItemClickHandler<T extends Element = Element> = (
   action: ActionType<T> | undefined,
   immediateAction: ActionType<T> | undefined,
-  autoclose: boolean
+  autoClose: boolean
 ) => (event: React.MouseEvent) => void;
 
 export type ActionSheetContextType<T extends Element = Element> = {

package/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx

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

package/src/components/ActionSheet/ActionSheetDropdown.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 import { classNames } from "../../lib/classNames";
 import { Platform } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useAdaptivityWithMediaQueries } from "../../hooks/useAdaptivityWithMediaQueries";
 import { SharedDropdownProps } from "./types";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
 import "./ActionSheet.css";
@@ -17,7 +18,7 @@ export const ActionSheetDropdown = ({
   popupDirection,
   ...restProps
 }: SharedDropdownProps) => {
-  const { sizeY } = useAdaptivity();
+  const { sizeY } = useAdaptivityWithMediaQueries();
   const platform = usePlatform();
 
   return (
@@ -28,7 +29,7 @@ export const ActionSheetDropdown = ({
         "ActionSheet",
         platform === Platform.IOS && "ActionSheet--ios",
         closing && "ActionSheet--closing",
-        `ActionSheet--sizeY-${sizeY}`
+        getSizeYClassName("ActionSheet", sizeY)
       )}
     >
       {children}

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 import { classNames } from "../../lib/classNames";
 import { useDOM } from "../../lib/dom";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useEffectDev } from "../../hooks/useEffectDev";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useAdaptivityWithMediaQueries } from "../../hooks/useAdaptivityWithMediaQueries";
 import { isRefObject } from "../../lib/isRefObject";
 import { warnOnce } from "../../lib/warnOnce";
 import { Platform } from "../../lib/platform";
@@ -32,7 +33,7 @@ export const ActionSheetDropdownDesktop = ({
 }: SharedDropdownProps) => {
   const { document } = useDOM();
   const platform = usePlatform();
-  const { sizeY } = useAdaptivity();
+  const { sizeY } = useAdaptivityWithMediaQueries();
   const elementRef = React.useRef<HTMLDivElement | null>(null);
 
   useEffectDev(() => {
@@ -64,7 +65,7 @@ export const ActionSheetDropdownDesktop = ({
   }, [bodyClickListener, document]);
 
   const onClick = React.useCallback(
-    (e: React.MouseEvent<HTMLElement, MouseEvent>) => e.stopPropagation(),
+    (e: React.MouseEvent<HTMLElement>) => e.stopPropagation(),
     []
   );
 
@@ -85,7 +86,7 @@ export const ActionSheetDropdownDesktop = ({
         "ActionSheet",
         platform === Platform.IOS && "ActionSheet--ios",
         "ActionSheet--desktop",
-        `ActionSheet--sizeY-${sizeY}`
+        getSizeYClassName("ActionSheet", sizeY)
       )}
       className={className}
       style={style}