@vkontakte/vkui 4.22.2 → 4.25.1

package/jest.unit.config.js

@@ -1,14 +1,14 @@
-const path = require('path');
+const path = require("path");
 module.exports = {
-  displayName: 'unit',
-  roots: [path.join(__dirname, 'src')],
-  setupFilesAfterEnv: [path.join(__dirname, 'src/testing/setup.ts')],
+  displayName: "unit",
+  roots: [path.join(__dirname, "src")],
+  setupFilesAfterEnv: [path.join(__dirname, "src/testing/setup.ts")],
   collectCoverage: true,
-  collectCoverageFrom: ['src/*/**/*.{ts,tsx}'],
+  collectCoverageFrom: ["src/*/**/*.{ts,tsx}"],
   coveragePathIgnorePatterns: [
-    '\\.d\\.ts$',
-    '\\.e2e\\.tsx?$',
-    'src/types',
-    'src/testing',
+    "\\.d\\.ts$",
+    "\\.e2e\\.tsx?$",
+    "src/types",
+    "src/testing",
   ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.22.2",
+  "version": "4.25.1",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -19,16 +19,16 @@
     "*.css"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.15.0",
-    "@babel/core": "^7.15.0",
-    "@babel/parser": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-transform-runtime": "^7.14.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@size-limit/preset-small-lib": "^4.9.1",
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.7",
+    "@babel/parser": "^7.16.8",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.16.8",
+    "@babel/preset-env": "^7.16.8",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@size-limit/preset-small-lib": "^5.0.5",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.1",
     "@testing-library/react-hooks": "^5.1.2",
@@ -39,66 +39,74 @@
     "@types/node": "^12.7.2",
     "@types/react": "^16.14.20",
     "@types/react-dom": "^16.9.14",
-    "@types/webpack-dev-server": "^3.11.1",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-dev-server": "^3.11.2",
     "@typescript-eslint/eslint-plugin": "^2.28.0",
     "@typescript-eslint/parser": "^2.0.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.29.0",
     "@vkontakte/eslint-config": "2.5.0",
-    "@vkontakte/icons": "^1.109.0",
+    "@vkontakte/icons": "^1.136.0",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "autoprefixer": "^9.8.0",
+    "@vkontakte/vkui-tokens": "4.0.0-rc.71",
+    "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.3",
     "babel-plugin-auto-import": "^1.1.0",
-    "babel-plugin-istanbul": "^6.0.0",
+    "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-transform-remove-imports": "^1.5.4",
+    "babel-plugin-transform-remove-imports": "^1.7.0",
     "chalk": "^4.1.0",
     "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^4.1.2",
     "cross-env": "^7.0.2",
-    "css-loader": "^5.0.1",
+    "css-loader": "^6.5.1",
     "eslint": "~6.8.0",
+    "eslint-config-prettier": "6.15.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jest-playwright": "^0.2.1",
+    "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.0.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "expect-playwright": "^0.2.6",
-    "file-loader": "^6.2.0",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-image-snapshot": "^4.2.0",
     "jest-playwright-preset": "^1.4.1",
-    "mini-css-extract-plugin": "^1.3.1",
+    "lint-staged": "^12.1.2",
+    "mini-css-extract-plugin": "^2.5.2",
     "playwright": "^1.8.0",
     "playwright-chromium": "^1.8.0",
     "playwright-core": "^1.8.0",
-    "postcss": "8.2.10",
-    "postcss-cli": "8.1.0",
-    "postcss-csso": "5.0.0",
-    "postcss-custom-properties": "10.0.0",
-    "postcss-import": "13.0.0",
-    "postcss-loader": "^4.1.0",
-    "postcss-prefixer": "^2.1.2",
-    "pre-commit": "^1.2.2",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
+    "postcss-csso": "^6.0.0",
+    "postcss-custom-properties": "^12.1.3",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-modules": "^4.3.0",
+    "prettier": "^2.5.1",
+    "process": "^0.11.10",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
-    "react-docgen": "^5.4.0-alpha.0",
+    "react-docgen-typescript": "^2.1.1",
     "react-dom": "^16.8.6",
     "react-frame-component": "^3.0.0",
     "react-styleguidist": "^11.1.5",
     "shx": "^0.3.2",
-    "size-limit": "^4.9.1",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^2.0.0",
-    "stylelint": "^10.1.0",
-    "stylelint-config-standard": "^18.3.0",
+    "size-limit": "^5.0.5",
+    "source-map-loader": "^3.0.1",
+    "style-loader": "^3.3.1",
+    "stylelint": "^13.13.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^22.0.0",
     "stylelint-value-no-unknown-custom-properties": "^3.0.0",
     "typescript": "3.8",
     "wait-port": "^0.2.9",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.10",
-    "webpack-merge": "^4.2.2",
+    "webpack": "^5.66.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-merge": "^5.8.0",
     "yargs": "^15.4.1"
   },
   "resolutions": {
@@ -109,7 +117,7 @@
     "generate_scheme": "./tasks/generate_scheme.js"
   },
   "peerDependencies": {
-    "@vkontakte/icons": "^1.109.0",
+    "@vkontakte/icons": "^1.136.0",
     "@vkontakte/vk-bridge": "^2.0.2",
     "react": "^16.8.6 || ^17.0.0",
     "react-dom": "^16.8.6 || ^17.0.0"
@@ -139,6 +147,7 @@
     "size": "yarn clear && concurrently 'yarn:babel' 'yarn:postcss' && size-limit",
     "size:ci": "yarn install --frozen-lockfile --ignore-scripts && yarn build:no-types",
     "styleguide": "cross-env NODE_ENV=development styleguidist server --config=styleguide/config.js",
+    "styleguide:props": "cross-env NODE_ENV=development VKUI_STYLEGUIDE_PROPSPARSER=1 styleguidist server --config=styleguide/config.js",
     "styleguide:build": "cross-env NODE_ENV=production styleguidist build --config=styleguide/config.js",
     "dev": "yarn clear && concurrently \"yarn:tsc-dev\" \"yarn:babel-dev\" \"yarn:postcss-dev\"",
     "dev-cjs": "yarn clear && concurrently \"yarn:tsc-cjs-dev\" \"yarn:babel-cjs-dev\" \"yarn:postcss-dev\"",
@@ -169,20 +178,33 @@
     "lint:es": "eslint --ext .jsx,.js,.ts,.tsx src/ e2e/ styleguide/ --cache --cache-location .cache/.eslintcache",
     "lint:es:ci": "yarn lint:es -o lint-results.json -f json",
     "lint:style": "cross-env LINT_PRECOMMIT_RUN=1 stylelint \"./src/**/*.css\" --cache --cache-location .cache/.stylelintcache",
+    "lint:prettier": "prettier --check --ignore-unknown .",
     "typecheck": "tsc --incremental --emitDeclarationOnly --declaration --tsBuildInfoFile .cache/.tsbuildinfo --outDir .cache/ts",
-    "test:static": "concurrently 'yarn typecheck' 'yarn lint:es' 'yarn lint:style'",
-    "test:static:ci": "concurrently 'yarn typecheck' 'yarn lint:es:ci' 'yarn lint:style'",
+    "test:static": "concurrently 'yarn typecheck' 'yarn lint:es' 'yarn lint:style' 'yarn lint:prettier'",
+    "test:static:ci": "concurrently 'yarn typecheck' 'yarn lint:es:ci' 'yarn lint:style' 'yarn lint:prettier'",
     "test": "concurrently 'yarn test:unit' 'yarn test:static'",
     "test:ci": "concurrently 'yarn test:unit:ci' 'yarn test:static:ci'",
-    "codesandbox:install": "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 yarn install"
+    "codesandbox:install": "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 yarn install",
+    "prepare": "husky install",
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "prettier --check",
+      "eslint"
+    ],
+    "*.css": [
+      "prettier --check",
+      "cross-env LINT_PRECOMMIT_RUN=1 stylelint"
+    ],
+    "*.{json,md}": [
+      "prettier --check"
+    ]
   },
-  "pre-commit": [
-    "test:static"
-  ],
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@popperjs/core": "^2.9.2",
-    "@vkontakte/vkjs": "^0.22.1",
+    "@vkontakte/vkjs": "^0.22.2",
     "mitt": "^3.0.0",
     "react-popper": "^2.2.5"
   }

package/postcss.config.js

@@ -1,42 +1,44 @@
-const path = require('path');
-const cssCustomProperties = require('postcss-custom-properties');
-const scopeRoot = require('./tasks/postcss-scope-root.js');
-const cssImport = require('postcss-import');
-const autoprefixer = require('autoprefixer');
-const selectorPrefixer = require('postcss-prefixer');
-const csso = require('postcss-csso');
-const checkKeyframes = require('./tasks/postcss-check-keyframes');
-const { defaultSchemeId } = require('./package.json');
+const path = require("path");
+const cssCustomProperties = require("postcss-custom-properties");
+const scopeRoot = require("./tasks/postcss-scope-root.js");
+const cssImport = require("postcss-import");
+const autoprefixer = require("autoprefixer");
+const cssModules = require("postcss-modules");
+const csso = require("postcss-csso");
+const checkKeyframes = require("./tasks/postcss-check-keyframes");
+const { defaultSchemeId } = require("./package.json");
 
-const animationsSource = path.join(__dirname, 'src/styles/animations.css');
+const animationsSource = path.join(__dirname, "src/styles/animations.css");
 const cssPropSources = [
-  path.join(__dirname, 'src/styles/bright_light.css'),
-  path.join(__dirname, 'src/styles/constants.css'),
+  path.join(__dirname, "src/styles/bright_light.css"),
+  path.join(__dirname, "src/styles/constants.css"),
   animationsSource,
 ];
 
 let plugins = [
   cssImport(),
   checkKeyframes({
-    importFrom: animationsSource
+    importFrom: animationsSource,
   }),
   cssCustomProperties({
     importFrom: cssPropSources,
-    preserve: true
+    preserve: true,
   }),
   // postcss-custom-properties only works with :root
   scopeRoot({
-    customPropRoot: '.vkui__root, .vkui__portal-root',
-    except: path.resolve(`./src/styles/${defaultSchemeId}.css`)
+    customPropRoot: ".vkui__root, .vkui__portal-root",
+    except: path.resolve(`./src/styles/${defaultSchemeId}.css`),
   }),
   autoprefixer(),
-  selectorPrefixer({
-    prefix: 'vkui',
-    ignore: [/^\.vkui/, '#mount']
-  })
+  cssModules({
+    generateScopedName: (name) =>
+      name.startsWith("vkui") || name === "mount" ? name : `vkui${name}`,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    getJSON: () => {},
+  }),
 ];
 
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === "production") {
   plugins.push(csso({ restructure: false }));
 }
 

package/src/components/ActionSheet/ActionSheet.css

@@ -12,7 +12,7 @@
  */
 .ActionSheet--ios {
   width: 100%;
-  animation: vkui-animation-actionsheet-intro .3s var(--ios-easing);
+  animation: vkui-animation-actionsheet-intro 0.3s var(--ios-easing);
   padding: 10px;
   box-sizing: border-box;
   display: flex;
@@ -22,7 +22,7 @@
 
 .ActionSheet--ios.ActionSheet--closing {
   transform: translateY(100%);
-  transition: transform .3s var(--ios-easing);
+  transition: transform 0.3s var(--ios-easing);
 }
 
 .ActionSheet--ios .ActionSheet__header {
@@ -55,7 +55,7 @@
   height: 100%;
   background-color: var(--modal_card_background);
   z-index: 1;
-  content: '';
+  content: "";
 }
 
 /**
@@ -65,20 +65,20 @@
 .ActionSheet--vkcom {
   width: calc(100% - 20px);
   margin: 10px;
-  animation: vkui-animation-actionsheet-intro .2s var(--android-easing);
+  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, .16), 0 0 4px 0 rgba(0, 0, 0, .08);
+  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 .2s var(--android-easing);
+  transition: transform 0.2s var(--android-easing);
 }
 
 .ActionSheet--android .ActionSheet__header,
@@ -100,10 +100,6 @@
   height: auto;
   background: var(--modal_card_background);
   animation: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 110;
   padding: 0;
   margin: 0;
 }
@@ -115,7 +111,7 @@
 
 .ActionSheet--desktop.ActionSheet--ios {
   border-radius: 14px;
-  box-shadow: 0 0 96px rgba(0, 0, 0, .16), 0 0 2px rgba(0, 0, 0, .12);
+  box-shadow: 0 0 96px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
   padding: 0;
 }
 
@@ -123,12 +119,12 @@
   min-width: 112px;
   border-radius: 12px;
   padding: 8px 0;
-  box-shadow: 0 8px 8px rgba(0, 0, 0, .16), 0 0 4px rgba(0, 0, 0, .08);
+  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, .08), 0 8px 24px rgba(0, 0, 0, .08);
+  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 {

package/src/components/ActionSheet/ActionSheet.tsx

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
-import { ViewWidth, ViewHeight } from '../../hoc/withAdaptivity';
-import { IOS } from '../../lib/platform';
-import { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';
-import { ActionSheetDropdown } from './ActionSheetDropdown';
-import { hasReactNode } from '../../lib/utils';
-import { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';
-import Caption from '../Typography/Caption/Caption';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
-import { warnOnce } from '../../lib/warnOnce';
-import { SharedDropdownProps, PopupDirection, ToggleRef } from './types';
-import './ActionSheet.css';
+import * as React from "react";
+import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
+import { ViewWidth, ViewHeight } from "../../hoc/withAdaptivity";
+import { IOS } from "../../lib/platform";
+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 { usePlatform } from "../../hooks/usePlatform";
+import { useTimeout } from "../../hooks/useTimeout";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useObjectMemo } from "../../hooks/useObjectMemo";
+import { warnOnce } from "../../lib/warnOnce";
+import { SharedDropdownProps, PopupDirection, ToggleRef } from "./types";
+import "./ActionSheet.css";
 
 export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
   header?: React.ReactNode;
@@ -38,7 +38,7 @@ export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
   iosCloseItem?: React.ReactNode;
 }
 
-const warn = warnOnce('ActionSheet');
+const warn = warnOnce("ActionSheet");
 
 export const ActionSheet: React.FC<ActionSheetProps> = ({
   children,
@@ -48,84 +48,114 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
   style,
   iosCloseItem,
   ...restProps
-}: ActionSheetProps) => {
+}) => {
   const platform = usePlatform();
   const [closing, setClosing] = React.useState(false);
   const onClose = () => setClosing(true);
+  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('can\'t close on outer click without onClose');
+  if (process.env.NODE_ENV === "development" && !restProps.onClose) {
+    warn("can't close on outer click without onClose");
   }
 
   const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
-  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop =
+    viewWidth >= ViewWidth.SMALL_TABLET &&
+    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
 
-  const timeout = platform === IOS ? 300 : 200;
+  let timeout = platform === IOS ? 300 : 200;
+
+  if (isDesktop) {
+    timeout = 0;
+  }
 
   const fallbackTransitionFinish = useTimeout(afterClose, timeout);
   React.useEffect(() => {
     if (closing) {
-      if (isDesktop) {
-        afterClose();
-      } else {
-        fallbackTransitionFinish.set();
-      }
+      fallbackTransitionFinish.set();
     } else {
       fallbackTransitionFinish.clear();
     }
-  }, [closing]);
+  }, [closing, fallbackTransitionFinish]);
 
-  const onItemClick = React.useCallback<ItemClickHandler>((action, autoclose) => (event) => {
-    action && action(event);
-    if (autoclose) {
-      setClosing(true);
-    }
-  }, []);
+  const onItemClick = React.useCallback<ItemClickHandler>(
+    (action, immediateAction, autoclose) => (event) => {
+      event.persist();
+      immediateAction && immediateAction(event);
+      if (autoclose) {
+        _action.current = () => action && action(event);
+        setClosing(true);
+      } else {
+        action && action(event);
+      }
+    },
+    []
+  );
   const contextValue = useObjectMemo({ onItemClick, isDesktop });
 
   const DropdownComponent = isDesktop
     ? ActionSheetDropdownDesktop
     : ActionSheetDropdown;
 
+  const actionSheet = (
+    <ActionSheetContext.Provider value={contextValue}>
+      <DropdownComponent
+        closing={closing}
+        timeout={timeout}
+        {...(restProps as Omit<SharedDropdownProps, "closing">)}
+        onClose={onClose}
+        className={isDesktop ? className : undefined}
+        style={isDesktop ? style : undefined}
+      >
+        {(hasReactNode(header) || hasReactNode(text)) && (
+          <header vkuiClass="ActionSheet__header">
+            {hasReactNode(header) && (
+              <Caption
+                level="1"
+                weight={platform === IOS ? "semibold" : "medium"}
+                vkuiClass="ActionSheet__title"
+              >
+                {header}
+              </Caption>
+            )}
+            {hasReactNode(text) && (
+              <Caption level="1" weight="regular" vkuiClass="ActionSheet__text">
+                {text}
+              </Caption>
+            )}
+          </header>
+        )}
+        {children}
+        {platform === IOS && !isDesktop && iosCloseItem}
+      </DropdownComponent>
+    </ActionSheetContext.Provider>
+  );
+
+  if (isDesktop) {
+    return actionSheet;
+  }
+
   return (
     <PopoutWrapper
       closing={closing}
       alignY="bottom"
       className={className}
       style={style}
-      onClick={!isDesktop ? onClose : null}
-      hasMask={!isDesktop}
-      fixed={!isDesktop}
+      onClick={onClose}
+      hasMask
+      fixed
     >
-      <ActionSheetContext.Provider value={contextValue}>
-        <DropdownComponent
-          closing={closing}
-          timeout={timeout}
-          {...restProps as Omit<SharedDropdownProps, 'closing'>}
-          onClose={onClose}
-        >
-          {(hasReactNode(header) || hasReactNode(text)) &&
-            <header vkuiClass="ActionSheet__header">
-              {hasReactNode(header) &&
-                <Caption level="1" weight={platform === IOS ? 'semibold' : 'medium'} vkuiClass="ActionSheet__title">
-                  {header}
-                </Caption>
-              }
-              {hasReactNode(text) && <Caption level="1" weight="regular" vkuiClass="ActionSheet__text">{text}</Caption>}
-            </header>
-          }
-          {children}
-          {platform === IOS && !isDesktop && iosCloseItem}
-        </DropdownComponent>
-      </ActionSheetContext.Provider>
+      {actionSheet}
     </PopoutWrapper>
   );
 };
 
 ActionSheet.defaultProps = {
-  popupDirection: 'bottom',
+  popupDirection: "bottom",
 };

package/src/components/ActionSheet/ActionSheetContext.ts

@@ -1,10 +1,18 @@
-import * as React from 'react';
+import * as React from "react";
 
-export type ActionType = (event: React.MouseEvent) => void;
+export type ActionType<T> = (event: React.MouseEvent<T>) => void;
 
-export type ItemClickHandler = (action: ActionType, autoclose: boolean) => (event: React.MouseEvent) => void;
+export type ItemClickHandler<T extends Element = Element> = (
+  action: ActionType<T> | undefined,
+  immediateAction: ActionType<T> | undefined,
+  autoclose: boolean
+) => (event: React.MouseEvent) => void;
 
-export const ActionSheetContext = React.createContext<{
-  onItemClick?: ItemClickHandler;
+export type ActionSheetContextType<T extends Element = Element> = {
+  onItemClick?: ItemClickHandler<T>;
   isDesktop?: boolean;
-}>({});
+};
+
+export const ActionSheetContext = React.createContext<
+  ActionSheetContextType<any>
+>({});

package/src/components/ActionSheet/ActionSheetDropdown.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import { SharedDropdownProps } from './types';
-import { FocusTrap } from '../FocusTrap/FocusTrap';
-import './ActionSheet.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { SharedDropdownProps } from "./types";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
+import "./ActionSheet.css";
 
 const stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();
 
@@ -17,14 +17,14 @@ export const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({
   ...restProps
 }) => {
   const platform = usePlatform();
-  const baseClaseName = getClassName('ActionSheet', platform);
+  const baseClaseName = getClassName("ActionSheet", platform);
 
   return (
     <FocusTrap
       {...restProps}
       onClick={stopPropagation}
       vkuiClass={classNames(baseClaseName, {
-        'ActionSheet--closing': closing,
+        "ActionSheet--closing": closing,
       })}
     >
       {children}