@vkontakte/vkui 4.23.0 → 4.25.2

package/TESTING.md

@@ -1,12 +1,13 @@
 Мы используем три вида тестов:
 
-__Юнит-тесты__ на jest в файлах `moduleName.test.ts` [пример](./src/helpers/getClassName.test.ts)
+**Юнит-тесты** на jest в файлах `moduleName.test.ts` [пример](./src/helpers/getClassName.test.ts)
 
-__Компонентные тесты__ на jest + [react-testing-library](https://testing-library.com/docs/react-testing-library/example-intro) + [jest-dom](https://github.com/testing-library/jest-dom#table-of-contents) в `ComponentName.test.tsx` [пример](./src/components/Checkbox/Checkbox.test.tsx)
+**Компонентные тесты** на jest + [react-testing-library](https://testing-library.com/docs/react-testing-library/example-intro) + [jest-dom](https://github.com/testing-library/jest-dom#table-of-contents) в `ComponentName.test.tsx` [пример](./src/components/Checkbox/Checkbox.test.tsx)
 
-__Скриншотные тесты__ на jest + [playwright](https://playwright.dev/#?path=docs/api.md) + [jest-playwright](https://github.com/playwright-community/jest-playwright) в `ComponentName.e2e.tsx` [пример](./src/components/Checkbox/Checkbox.e2e.tsx).
+**Скриншотные тесты** на jest + [playwright](https://playwright.dev/#?path=docs/api.md) + [jest-playwright](https://github.com/playwright-community/jest-playwright) в `ComponentName.e2e.tsx` [пример](./src/components/Checkbox/Checkbox.e2e.tsx).
 
 Чтобы запускать скриншотные тесты локально, нужно установить:
+
 - [git-lfs](https://git-lfs.github.com) — чтобы от эталонных скриншотов не раздувало репозиторий
 - [докер](https://www.docker.com/products/docker-desktop) — чтобы платформа не влияла на рендеринг шрифтов. На линуксе докер не нужен.
 
@@ -33,24 +34,25 @@ __Скриншотные тесты__ на jest + [playwright](https://playwrigh
 Функция `describeScreenshotFuzz` из [`/testing/utils`](./src/testing/e2e/utils.tsx) помогает быстро заскриншотить все состояния компонента в разных темах и на разных платформах:
 
 ```ts
-describe('Button', () => {
+describe("Button", () => {
   describeScreenshotFuzz(
     // Можем передать компонент или вот так добавить дефолтные пропы для скриншотов
     (props: ButtonProps) => <Button {...props}>Кнопка</Button>,
     // Описание комбинаций пропов — по элементу массива на независимый набор
     [
       // mode и disabled влияют на цвет, но не на размер
-      { mode: ['primary', 'secondary'], disabled: [undefined, true] },
+      { mode: ["primary", "secondary"], disabled: [undefined, true] },
       // size влияет на размер, но не на цвет
-      { size: ['s', 'm', 'l'] }
-    ]);
-    // всего 2 * 2 + 3 = 7 состояний:
-    // mode="primary"
-    // mode="primary" disabled
-    // mode="secondary"
-    // mode="secondary" disabled
-    // size="s"
-    // size="m"
-    // size="l"
+      { size: ["s", "m", "l"] },
+    ]
+  );
+  // всего 2 * 2 + 3 = 7 состояний:
+  // mode="primary"
+  // mode="primary" disabled
+  // mode="secondary"
+  // mode="secondary" disabled
+  // size="s"
+  // size="m"
+  // size="l"
 });
 ```

package/babel.cjs.config.js

@@ -1,10 +1,15 @@
 module.exports = {
-  extends: './babel.config.js',
-  presets: [['@babel/preset-env', {
-    modules: 'commonjs',
-    exclude: [
-      '@babel/plugin-proposal-unicode-property-regex',
-      '@babel/plugin-transform-unicode-regex'
-    ]
-  }]],
+  extends: "./babel.config.js",
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: "commonjs",
+        exclude: [
+          "@babel/plugin-proposal-unicode-property-regex",
+          "@babel/plugin-transform-unicode-regex",
+        ],
+      },
+    ],
+  ],
 };

package/babel.config.js

@@ -1,51 +1,72 @@
 const { NODE_ENV, BABEL_KEEP_CSS } = process.env;
-const isProduction = NODE_ENV === 'production';
-const isDevelopment = NODE_ENV === 'development';
+const isProduction = NODE_ENV === "production";
+const isDevelopment = NODE_ENV === "development";
 const useModules = isProduction || isDevelopment;
 const keepCss = Boolean(BABEL_KEEP_CSS);
-const runtimeVersion = require('./package.json').dependencies['@babel/runtime'];
+const runtimeVersion = require("./package.json").dependencies["@babel/runtime"];
 
 const testFiles = [
-  './src/**/*.test.ts', './src/**/*.test.tsx',
-  './src/**/*.spec.ts', './src/**/*.spec.tsx',
-  './src/**/*.e2e.ts', './src/**/*.e2e.tsx',
-  './e2e/', './src/testing/',
+  "./src/**/*.test.ts",
+  "./src/**/*.test.tsx",
+  "./src/**/*.spec.ts",
+  "./src/**/*.spec.tsx",
+  "./src/**/*.e2e.ts",
+  "./src/**/*.e2e.tsx",
+  "./e2e/",
+  "./src/testing/",
 ];
 
 module.exports = {
   presets: [
-    ['@babel/preset-env', {
-      modules: useModules ? false : 'commonjs',
-      exclude: [
-        '@babel/plugin-proposal-unicode-property-regex',
-        '@babel/plugin-transform-unicode-regex'
-      ]
-    }],
-    ['@babel/preset-react', {
-      pragma: "createScopedElement",
-      pragmaFrag: "createScopedElement.Fragment",
-    }],
-    ['@babel/preset-typescript', {
-      jsxPragma: "createScopedElement",
-      jsxPragmaFrag: 'createScopedElement.Fragment',
-    }]
+    [
+      "@babel/preset-env",
+      {
+        modules: useModules ? false : "commonjs",
+        exclude: [
+          "@babel/plugin-proposal-unicode-property-regex",
+          "@babel/plugin-transform-unicode-regex",
+        ],
+      },
+    ],
+    [
+      "@babel/preset-react",
+      {
+        pragma: "createScopedElement",
+        pragmaFrag: "createScopedElement.Fragment",
+      },
+    ],
+    [
+      "@babel/preset-typescript",
+      {
+        jsxPragma: "createScopedElement",
+        jsxPragmaFrag: "createScopedElement.Fragment",
+      },
+    ],
   ],
   plugins: [
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-object-rest-spread',
-    ['@babel/plugin-transform-runtime', { version: runtimeVersion }],
-    [require.resolve('babel-plugin-auto-import'), {
-      'declarations': [
-        { members: ['createScopedElement'], path: '#jsxRuntime' }
-      ],
-    }],
-    [require.resolve('babel-plugin-module-resolver'), {
-      alias: {
-        "#jsxRuntime": "./src/lib/jsxRuntime"
-      }
-    }],
-  ].concat(keepCss ? [] : [
-    ['babel-plugin-transform-remove-imports', { test: '\\.css$' }],
-  ]),
-  ignore: ['./src/vkui.js'].concat(isProduction ? testFiles : []),
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    ["@babel/plugin-transform-runtime", { version: runtimeVersion }],
+    [
+      require.resolve("babel-plugin-auto-import"),
+      {
+        declarations: [
+          { members: ["createScopedElement"], path: "#jsxRuntime" },
+        ],
+      },
+    ],
+    [
+      require.resolve("babel-plugin-module-resolver"),
+      {
+        alias: {
+          "#jsxRuntime": "./src/lib/jsxRuntime",
+        },
+      },
+    ],
+  ].concat(
+    keepCss
+      ? []
+      : [["babel-plugin-transform-remove-imports", { test: "\\.css$" }]]
+  ),
+  ignore: ["./src/vkui.js"].concat(isProduction ? testFiles : []),
 };

package/dist/cjs/components/ActionSheet/ActionSheet.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { PopupDirection, ToggleRef } from './types';
-import './ActionSheet.css';
+import * as React from "react";
+import { PopupDirection, ToggleRef } from "./types";
+import "./ActionSheet.css";
 export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
     header?: React.ReactNode;
     text?: React.ReactNode;

package/dist/cjs/components/ActionSheet/ActionSheet.js

@@ -46,7 +46,7 @@ var _useObjectMemo = require("../../hooks/useObjectMemo");
 var _warnOnce = require("../../lib/warnOnce");
 
 var _excluded = ["children", "className", "header", "text", "style", "iosCloseItem"];
-var warn = (0, _warnOnce.warnOnce)('ActionSheet');
+var warn = (0, _warnOnce.warnOnce)("ActionSheet");
 
 var ActionSheet = function ActionSheet(_ref) {
   var children = _ref.children,
@@ -70,15 +70,17 @@ var ActionSheet = function ActionSheet(_ref) {
   var _action = React.useRef(_utils.noop);
 
   var afterClose = function afterClose() {
-    restProps.onClose();
+    var _restProps$onClose;
+
+    (_restProps$onClose = restProps.onClose) === null || _restProps$onClose === void 0 ? void 0 : _restProps$onClose.call(restProps);
 
     _action.current();
 
     _action.current = _utils.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");
   }
 
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
@@ -100,7 +102,7 @@ var ActionSheet = function ActionSheet(_ref) {
     } else {
       fallbackTransitionFinish.clear();
     }
-  }, [closing]);
+  }, [closing, fallbackTransitionFinish]);
   var onItemClick = React.useCallback(function (action, immediateAction, autoclose) {
     return function (event) {
       event.persist();
@@ -122,36 +124,44 @@ var ActionSheet = function ActionSheet(_ref) {
     isDesktop: isDesktop
   });
   var DropdownComponent = isDesktop ? _ActionSheetDropdownDesktop.ActionSheetDropdownDesktop : _ActionSheetDropdown.ActionSheetDropdown;
-  return (0, _jsxRuntime.createScopedElement)(_PopoutWrapper.PopoutWrapper, {
-    closing: closing,
-    alignY: "bottom",
-    className: className,
-    style: style,
-    onClick: !isDesktop ? onClose : null,
-    hasMask: !isDesktop,
-    fixed: !isDesktop
-  }, (0, _jsxRuntime.createScopedElement)(_ActionSheetContext.ActionSheetContext.Provider, {
+  var actionSheet = (0, _jsxRuntime.createScopedElement)(_ActionSheetContext.ActionSheetContext.Provider, {
     value: contextValue
   }, (0, _jsxRuntime.createScopedElement)(DropdownComponent, (0, _extends2.default)({
     closing: closing,
     timeout: timeout
   }, restProps, {
-    onClose: onClose
+    onClose: onClose,
+    className: isDesktop ? className : undefined,
+    style: isDesktop ? style : undefined
   }), ((0, _utils.hasReactNode)(header) || (0, _utils.hasReactNode)(text)) && (0, _jsxRuntime.createScopedElement)("header", {
     vkuiClass: "ActionSheet__header"
   }, (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(_Caption.default, {
     level: "1",
-    weight: platform === _platform.IOS ? 'semibold' : 'medium',
+    weight: platform === _platform.IOS ? "semibold" : "medium",
     vkuiClass: "ActionSheet__title"
   }, header), (0, _utils.hasReactNode)(text) && (0, _jsxRuntime.createScopedElement)(_Caption.default, {
     level: "1",
     weight: "regular",
     vkuiClass: "ActionSheet__text"
-  }, text)), children, platform === _platform.IOS && !isDesktop && iosCloseItem)));
+  }, text)), children, platform === _platform.IOS && !isDesktop && iosCloseItem));
+
+  if (isDesktop) {
+    return actionSheet;
+  }
+
+  return (0, _jsxRuntime.createScopedElement)(_PopoutWrapper.PopoutWrapper, {
+    closing: closing,
+    alignY: "bottom",
+    className: className,
+    style: style,
+    onClick: onClose,
+    hasMask: true,
+    fixed: true
+  }, actionSheet);
 };
 
 exports.ActionSheet = ActionSheet;
 ActionSheet.defaultProps = {
-  popupDirection: 'bottom'
+  popupDirection: "bottom"
 };
 //# sourceMappingURL=ActionSheet.js.map

package/dist/cjs/components/ActionSheet/ActionSheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":["warn","ActionSheet","children","className","header","text","style","iosCloseItem","restProps","platform","React","useState","closing","setClosing","onClose","_action","useRef","noop","afterClose","current","process","env","NODE_ENV","viewWidth","viewHeight","hasMouse","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoclose","event","persist","contextValue","DropdownComponent","ActionSheetDropdownDesktop","ActionSheetDropdown","defaultProps","popupDirection"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ViewWidth, ViewHeight } from '../../hoc/withAdaptivity';\nimport { IOS } from '../../lib/platform';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { hasReactNode, noop } from '../../lib/utils';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport Caption from '../Typography/Caption/Caption';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SharedDropdownProps, PopupDirection, ToggleRef } from './types';\nimport './ActionSheet.css';\n\nexport interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи. В v5 будет обязательным.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   * В v5 будет обязательным.\n   */\n  toggleRef?: ToggleRef;\n  /**\n   * Направление на десктопе\n   */\n  popupDirection?: PopupDirection;\n  /**\n   * Только iOS. В v5 будет обязательным.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\nconst warn = warnOnce('ActionSheet');\n\nexport const ActionSheet: React.FC<ActionSheetProps> = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closing, setClosing] = React.useState(false);\n  const onClose = () => setClosing(true);\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose();\n    _action.current();\n    _action.current = noop;\n  };\n\n  if (process.env.NODE_ENV === 'development' && !restProps.onClose) {\n    warn('can\\'t close on outer click without onClose');\n  }\n\n  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n  let timeout = platform === IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closing) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closing]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>((action, immediateAction, autoclose) => (event) => {\n    event.persist();\n    immediateAction && immediateAction(event);\n    if (autoclose) {\n      _action.current = () => action && action(event);\n      setClosing(true);\n    } else {\n      action && action(event);\n    }\n  }, []);\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop\n    ? ActionSheetDropdownDesktop\n    : ActionSheetDropdown;\n\n  return (\n    <PopoutWrapper\n      closing={closing}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={!isDesktop ? onClose : null}\n      hasMask={!isDesktop}\n      fixed={!isDesktop}\n    >\n      <ActionSheetContext.Provider value={contextValue}>\n        <DropdownComponent\n          closing={closing}\n          timeout={timeout}\n          {...restProps as Omit<SharedDropdownProps, 'closing'>}\n          onClose={onClose}\n        >\n          {(hasReactNode(header) || hasReactNode(text)) &&\n            <header vkuiClass=\"ActionSheet__header\">\n              {hasReactNode(header) &&\n                <Caption level=\"1\" weight={platform === IOS ? 'semibold' : 'medium'} vkuiClass=\"ActionSheet__title\">\n                  {header}\n                </Caption>\n              }\n              {hasReactNode(text) && <Caption level=\"1\" weight=\"regular\" vkuiClass=\"ActionSheet__text\">{text}</Caption>}\n            </header>\n          }\n          {children}\n          {platform === IOS && !isDesktop && iosCloseItem}\n        </DropdownComponent>\n      </ActionSheetContext.Provider>\n    </PopoutWrapper>\n  );\n};\n\nActionSheet.defaultProps = {\n  popupDirection: 'bottom',\n};\n"],"file":"ActionSheet.js"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":["warn","ActionSheet","children","className","header","text","style","iosCloseItem","restProps","platform","React","useState","closing","setClosing","onClose","_action","useRef","noop","afterClose","current","process","env","NODE_ENV","viewWidth","viewHeight","hasMouse","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoclose","event","persist","contextValue","DropdownComponent","ActionSheetDropdownDesktop","ActionSheetDropdown","actionSheet","undefined","defaultProps","popupDirection"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { ViewWidth, ViewHeight } from \"../../hoc/withAdaptivity\";\nimport { IOS } from \"../../lib/platform\";\nimport { ActionSheetDropdownDesktop } from \"./ActionSheetDropdownDesktop\";\nimport { ActionSheetDropdown } from \"./ActionSheetDropdown\";\nimport { hasReactNode, noop } from \"../../lib/utils\";\nimport { ActionSheetContext, ItemClickHandler } from \"./ActionSheetContext\";\nimport Caption from \"../Typography/Caption/Caption\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useObjectMemo } from \"../../hooks/useObjectMemo\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { SharedDropdownProps, PopupDirection, ToggleRef } from \"./types\";\nimport \"./ActionSheet.css\";\n\nexport interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи. В v5 будет обязательным.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   * В v5 будет обязательным.\n   */\n  toggleRef?: ToggleRef;\n  /**\n   * Направление на десктопе\n   */\n  popupDirection?: PopupDirection;\n  /**\n   * Только iOS. В v5 будет обязательным.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\nconst warn = warnOnce(\"ActionSheet\");\n\nexport const ActionSheet: React.FC<ActionSheetProps> = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const [closing, setClosing] = React.useState(false);\n  const onClose = () => setClosing(true);\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose?.();\n    _action.current();\n    _action.current = noop;\n  };\n\n  if (process.env.NODE_ENV === \"development\" && !restProps.onClose) {\n    warn(\"can't close on outer click without onClose\");\n  }\n\n  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n  const isDesktop =\n    viewWidth >= ViewWidth.SMALL_TABLET &&\n    (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n  let timeout = platform === IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closing) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closing, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    (action, immediateAction, autoclose) => (event) => {\n      event.persist();\n      immediateAction && immediateAction(event);\n      if (autoclose) {\n        _action.current = () => action && action(event);\n        setClosing(true);\n      } else {\n        action && action(event);\n      }\n    },\n    []\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop\n    ? ActionSheetDropdownDesktop\n    : ActionSheetDropdown;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={closing}\n        timeout={timeout}\n        {...(restProps as Omit<SharedDropdownProps, \"closing\">)}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        {(hasReactNode(header) || hasReactNode(text)) && (\n          <header vkuiClass=\"ActionSheet__header\">\n            {hasReactNode(header) && (\n              <Caption\n                level=\"1\"\n                weight={platform === IOS ? \"semibold\" : \"medium\"}\n                vkuiClass=\"ActionSheet__title\"\n              >\n                {header}\n              </Caption>\n            )}\n            {hasReactNode(text) && (\n              <Caption level=\"1\" weight=\"regular\" vkuiClass=\"ActionSheet__text\">\n                {text}\n              </Caption>\n            )}\n          </header>\n        )}\n        {children}\n        {platform === IOS && !isDesktop && iosCloseItem}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={closing}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n\nActionSheet.defaultProps = {\n  popupDirection: \"bottom\",\n};\n"],"file":"ActionSheet.js"}

package/dist/cjs/components/ActionSheet/ActionSheetContext.d.ts

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

package/dist/cjs/components/ActionSheet/ActionSheetContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetContext.ts"],"names":["ActionSheetContext","React","createContext"],"mappings":";;;;;;;;;AAAA;;AAMO,IAAMA,kBAAkB,gBAAGC,KAAK,CAACC,aAAN,CAG/B,EAH+B,CAA3B","sourcesContent":["import * as React from 'react';\n\nexport type ActionType = (event: React.MouseEvent) => void;\n\nexport type ItemClickHandler = (action: ActionType, immediateAction: ActionType, autoclose: boolean) => (event: React.MouseEvent) => void;\n\nexport const ActionSheetContext = React.createContext<{\n  onItemClick?: ItemClickHandler;\n  isDesktop?: boolean;\n}>({});\n"],"file":"ActionSheetContext.js"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetContext.ts"],"names":["ActionSheetContext","React","createContext"],"mappings":";;;;;;;;;AAAA;;AAeO,IAAMA,kBAAkB,gBAAGC,KAAK,CAACC,aAAN,CAEhC,EAFgC,CAA3B","sourcesContent":["import * as React from \"react\";\n\nexport type ActionType<T> = (event: React.MouseEvent<T>) => void;\n\nexport type ItemClickHandler<T extends Element = Element> = (\n  action: ActionType<T> | undefined,\n  immediateAction: ActionType<T> | undefined,\n  autoclose: boolean\n) => (event: React.MouseEvent) => void;\n\nexport type ActionSheetContextType<T extends Element = Element> = {\n  onItemClick?: ItemClickHandler<T>;\n  isDesktop?: boolean;\n};\n\nexport const ActionSheetContext = React.createContext<\n  ActionSheetContextType<any>\n>({});\n"],"file":"ActionSheetContext.js"}

package/dist/cjs/components/ActionSheet/ActionSheetDropdown.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { SharedDropdownProps } from './types';
-import './ActionSheet.css';
+import * as React from "react";
+import { SharedDropdownProps } from "./types";
+import "./ActionSheet.css";
 export declare const ActionSheetDropdown: React.FC<SharedDropdownProps>;

package/dist/cjs/components/ActionSheet/ActionSheetDropdown.js

@@ -34,11 +34,11 @@ var ActionSheetDropdown = function ActionSheetDropdown(_ref) {
       popupDirection = _ref.popupDirection,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
-  var baseClaseName = (0, _getClassName.getClassName)('ActionSheet', platform);
+  var baseClaseName = (0, _getClassName.getClassName)("ActionSheet", platform);
   return (0, _jsxRuntime.createScopedElement)(_FocusTrap.FocusTrap, (0, _extends2.default)({}, restProps, {
     onClick: stopPropagation,
     vkuiClass: (0, _classNames.classNames)(baseClaseName, {
-      'ActionSheet--closing': closing
+      "ActionSheet--closing": closing
     })
   }), children);
 };

package/dist/cjs/components/ActionSheet/ActionSheetDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdown.tsx"],"names":["stopPropagation","e","ActionSheetDropdown","children","closing","toggleRef","popupDirection","restProps","platform","baseClaseName"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AAEA;;;;AAGA,IAAMA,eAAwC,GAAG,SAA3CA,eAA2C,CAACC,CAAD;AAAA,SAAOA,CAAC,CAACD,eAAF,EAAP;AAAA,CAAjD;;AAEO,IAAME,mBAAkD,GAAG,SAArDA,mBAAqD,OAO5D;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,cAEI,QAFJA,cAEI;AAAA,MADDC,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MAAMC,aAAa,GAAG,gCAAa,aAAb,EAA4BD,QAA5B,CAAtB;AAEA,SACE,qCAAC,oBAAD,6BACMD,SADN;AAEE,IAAA,OAAO,EAAEP,eAFX;AAGE,IAAA,SAAS,EAAE,4BAAWS,aAAX,EAA0B;AACnC,8BAAwBL;AADW,KAA1B;AAHb,MAOGD,QAPH,CADF;AAWD,CAtBM","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SharedDropdownProps } from './types';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport './ActionSheet.css';\n\nconst stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();\n\nexport const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({\n  children,\n  closing,\n  // these 2 props are only omitted - ActionSheetDesktop compat\n  toggleRef,\n  popupDirection,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const baseClaseName = getClassName('ActionSheet', platform);\n\n  return (\n    <FocusTrap\n      {...restProps}\n      onClick={stopPropagation}\n      vkuiClass={classNames(baseClaseName, {\n        'ActionSheet--closing': closing,\n      })}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"file":"ActionSheetDropdown.js"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdown.tsx"],"names":["stopPropagation","e","ActionSheetDropdown","children","closing","toggleRef","popupDirection","restProps","platform","baseClaseName"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AAEA;;;;AAGA,IAAMA,eAAwC,GAAG,SAA3CA,eAA2C,CAACC,CAAD;AAAA,SAAOA,CAAC,CAACD,eAAF,EAAP;AAAA,CAAjD;;AAEO,IAAME,mBAAkD,GAAG,SAArDA,mBAAqD,OAO5D;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,cAEI,QAFJA,cAEI;AAAA,MADDC,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MAAMC,aAAa,GAAG,gCAAa,aAAb,EAA4BD,QAA5B,CAAtB;AAEA,SACE,qCAAC,oBAAD,6BACMD,SADN;AAEE,IAAA,OAAO,EAAEP,eAFX;AAGE,IAAA,SAAS,EAAE,4BAAWS,aAAX,EAA0B;AACnC,8BAAwBL;AADW,KAA1B;AAHb,MAOGD,QAPH,CADF;AAWD,CAtBM","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { SharedDropdownProps } from \"./types\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport \"./ActionSheet.css\";\n\nconst stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();\n\nexport const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({\n  children,\n  closing,\n  // these 2 props are only omitted - ActionSheetDesktop compat\n  toggleRef,\n  popupDirection,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const baseClaseName = getClassName(\"ActionSheet\", platform);\n\n  return (\n    <FocusTrap\n      {...restProps}\n      onClick={stopPropagation}\n      vkuiClass={classNames(baseClaseName, {\n        \"ActionSheet--closing\": closing,\n      })}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"file":"ActionSheetDropdown.js"}

package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { SharedDropdownProps } from './types';
-import './ActionSheet.css';
+import * as React from "react";
+import { SharedDropdownProps } from "./types";
+import "./ActionSheet.css";
 export declare const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps>;

package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.js

@@ -13,8 +13,6 @@ var _jsxRuntime = require("../../lib/jsxRuntime");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -27,21 +25,25 @@ var _dom = require("../../lib/dom");
 
 var _usePlatform = require("../../hooks/usePlatform");
 
+var _useEffectDev = require("../../hooks/useEffectDev");
+
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 
-var _warnOnce = require("../../lib/warnOnce");
+var _isRefObject = require("../../lib/isRefObject");
 
-var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+var _warnOnce = require("../../lib/warnOnce");
 
 var _useEventListener = require("../../hooks/useEventListener");
 
 var _FocusTrap = require("../FocusTrap/FocusTrap");
 
+var _Popper = require("../Popper/Popper");
+
 var _excluded = ["children", "toggleRef", "closing", "popupDirection", "onClose"];
-var warn = (0, _warnOnce.warnOnce)('ActionSheet');
+var warn = (0, _warnOnce.warnOnce)("ActionSheet");
 
 function getEl(ref) {
-  return ref && 'current' in ref ? ref.current : ref;
+  return ref && "current" in ref ? ref.current : ref;
 }
 
 var ActionSheetDropdownDesktop = function ActionSheetDropdownDesktop(_ref) {
@@ -53,7 +55,6 @@ var ActionSheetDropdownDesktop = function ActionSheetDropdownDesktop(_ref) {
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useDOM = (0, _dom.useDOM)(),
-      window = _useDOM.window,
       document = _useDOM.document;
 
   var platform = (0, _usePlatform.usePlatform)();
@@ -61,60 +62,54 @@ var ActionSheetDropdownDesktop = function ActionSheetDropdownDesktop(_ref) {
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
       sizeY = _useAdaptivity.sizeY;
 
-  var elementRef = React.useRef();
-
-  var _React$useState = React.useState({
-    left: 0,
-    top: 0,
-    opacity: 0,
-    pointerEvents: 'none'
-  }),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      dropdownStyles = _React$useState2[0],
-      setDropdownStyles = _React$useState2[1];
-
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
+  var elementRef = React.useRef(null);
+  (0, _useEffectDev.useEffectDev)(function () {
     var toggleEl = getEl(toggleRef);
 
     if (!toggleEl) {
-      if (process.env.NODE_ENV === 'development') {
-        warn('toggleRef not passed');
-      }
-
-      return;
+      warn("toggleRef not passed");
     }
-
-    var toggleRect = toggleEl.getBoundingClientRect();
-    var elementRect = elementRef.current.getBoundingClientRect();
-    var isTop = popupDirection === 'top' || typeof popupDirection === 'function' && popupDirection(elementRef) === 'top';
-    setDropdownStyles({
-      left: toggleRect.left + toggleRect.width - elementRect.width + window.pageXOffset,
-      top: toggleRect.top + window.pageYOffset + (isTop ? -elementRect.height : toggleRect.height)
-    });
   }, [toggleRef]);
-  var bodyClickListener = (0, _useEventListener.useEventListener)('click', function (e) {
+  var isPopupDirectionTop = React.useMemo(function () {
+    return popupDirection === "top" || typeof popupDirection === "function" && popupDirection(elementRef) === "top";
+  }, [popupDirection, elementRef]);
+  var bodyClickListener = (0, _useEventListener.useEventListener)("click", function (e) {
     var dropdownElement = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
 
     if (dropdownElement && !dropdownElement.contains(e.target)) {
-      onClose();
+      onClose === null || onClose === void 0 ? void 0 : onClose();
     }
   });
   React.useEffect(function () {
     setTimeout(function () {
       bodyClickListener.add(document.body);
     });
-  }, []);
+  }, [bodyClickListener, document]);
   var onClick = React.useCallback(function (e) {
     return e.stopPropagation();
   }, []);
-  return (0, _jsxRuntime.createScopedElement)(_FocusTrap.FocusTrap, (0, _extends2.default)({
+  var targetRef = React.useMemo(function () {
+    if ((0, _isRefObject.isRefObject)(toggleRef)) {
+      return toggleRef;
+    }
+
+    var refObject = {
+      current: toggleRef
+    };
+    return refObject;
+  }, [toggleRef]);
+  return (0, _jsxRuntime.createScopedElement)(_Popper.Popper, {
+    targetRef: targetRef,
+    offsetDistance: 0,
+    placement: isPopupDirectionTop ? "top-end" : "bottom-end",
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("ActionSheet", platform), "ActionSheet--desktop", "ActionSheet--sizeY-".concat(sizeY)),
+    getRef: elementRef,
+    forcePortal: false
+  }, (0, _jsxRuntime.createScopedElement)(_FocusTrap.FocusTrap, (0, _extends2.default)({
     onClose: onClose
   }, restProps, {
-    getRootRef: elementRef,
-    onClick: onClick,
-    style: dropdownStyles,
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('ActionSheet', platform), 'ActionSheet--desktop', "ActionSheet--sizeY-".concat(sizeY))
-  }), children);
+    onClick: onClick
+  }), children));
 };
 
 exports.ActionSheetDropdownDesktop = ActionSheetDropdownDesktop;

package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownDesktop.tsx"],"names":["warn","getEl","ref","current","ActionSheetDropdownDesktop","children","toggleRef","closing","popupDirection","onClose","restProps","window","document","platform","sizeY","elementRef","React","useRef","useState","left","top","opacity","pointerEvents","dropdownStyles","setDropdownStyles","toggleEl","process","env","NODE_ENV","toggleRect","getBoundingClientRect","elementRect","isTop","width","pageXOffset","pageYOffset","height","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { useDOM } from '../../lib/dom';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { SharedDropdownProps } from './types';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport './ActionSheet.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref as Element | null | undefined;\n}\n\nexport const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({\n  children,\n  toggleRef,\n  closing,\n  popupDirection,\n  onClose,\n  ...restProps\n}) => {\n  const { window, document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>();\n\n  const [dropdownStyles, setDropdownStyles] = React.useState<React.CSSProperties>({\n    left: 0,\n    top: 0,\n    opacity: 0,\n    pointerEvents: 'none',\n  });\n  useIsomorphicLayoutEffect(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      if (process.env.NODE_ENV === 'development') {\n        warn('toggleRef not passed');\n      }\n      return;\n    }\n\n    const toggleRect = toggleEl.getBoundingClientRect();\n    const elementRect = elementRef.current.getBoundingClientRect();\n    const isTop = popupDirection === 'top' || typeof popupDirection === 'function' && popupDirection(elementRef) === 'top';\n\n    setDropdownStyles({\n      left: toggleRect.left + toggleRect.width - elementRect.width + window.pageXOffset,\n      top: toggleRect.top + window.pageYOffset + (isTop ? -elementRect.height : toggleRect.height),\n    });\n  }, [toggleRef]);\n\n  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document.body);\n    });\n  }, []);\n\n  const onClick = React.useCallback((e) => e.stopPropagation(), []);\n\n  return (\n    <FocusTrap\n      onClose={onClose}\n      {...restProps}\n      getRootRef={elementRef}\n      onClick={onClick}\n      style={dropdownStyles}\n      vkuiClass={classNames(getClassName('ActionSheet', platform), 'ActionSheet--desktop', `ActionSheet--sizeY-${sizeY}`)}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"file":"ActionSheetDropdownDesktop.js"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownDesktop.tsx"],"names":["warn","getEl","ref","current","ActionSheetDropdownDesktop","children","toggleRef","closing","popupDirection","onClose","restProps","document","platform","sizeY","elementRef","React","useRef","toggleEl","isPopupDirectionTop","useMemo","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation","targetRef","refObject"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useDOM } from \"../../lib/dom\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useEffectDev } from \"../../hooks/useEffectDev\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { isRefObject } from \"../../lib/isRefObject\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { SharedDropdownProps } from \"./types\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport { Popper } from \"../Popper/Popper\";\nimport \"./ActionSheet.css\";\n\nconst warn = warnOnce(\"ActionSheet\");\nfunction getEl(\n  ref: SharedDropdownProps[\"toggleRef\"]\n): Element | null | undefined {\n  return ref && \"current\" in ref ? ref.current : ref;\n}\n\nexport const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({\n  children,\n  toggleRef,\n  closing,\n  popupDirection,\n  onClose,\n  ...restProps\n}) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n  useEffectDev(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      warn(\"toggleRef not passed\");\n    }\n  }, [toggleRef]);\n\n  const isPopupDirectionTop = React.useMemo(\n    () =>\n      popupDirection === \"top\" ||\n      (typeof popupDirection === \"function\" &&\n        popupDirection(elementRef) === \"top\"),\n    [popupDirection, elementRef]\n  );\n\n  const bodyClickListener = useEventListener(\"click\", (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose?.();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document!.body);\n    });\n  }, [bodyClickListener, document]);\n\n  const onClick = React.useCallback((e) => e.stopPropagation(), []);\n\n  const targetRef = React.useMemo(() => {\n    if (isRefObject<SharedDropdownProps[\"toggleRef\"], HTMLElement>(toggleRef)) {\n      return toggleRef;\n    }\n    const refObject = { current: toggleRef as HTMLElement };\n\n    return refObject;\n  }, [toggleRef]);\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetDistance={0}\n      placement={isPopupDirectionTop ? \"top-end\" : \"bottom-end\"}\n      vkuiClass={classNames(\n        getClassName(\"ActionSheet\", platform),\n        \"ActionSheet--desktop\",\n        `ActionSheet--sizeY-${sizeY}`\n      )}\n      getRef={elementRef}\n      forcePortal={false}\n    >\n      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>\n        {children}\n      </FocusTrap>\n    </Popper>\n  );\n};\n"],"file":"ActionSheetDropdownDesktop.js"}

package/dist/cjs/components/ActionSheet/types.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { FocusTrapProps } from '../FocusTrap/FocusTrap';
-export declare type PopupDirection = 'top' | 'bottom' | ((elRef: React.RefObject<HTMLDivElement>) => 'top' | 'bottom');
+import * as React from "react";
+import { FocusTrapProps } from "../FocusTrap/FocusTrap";
+export declare type PopupDirection = "top" | "bottom" | ((elRef: React.RefObject<HTMLDivElement>) => "top" | "bottom");
 export declare type ToggleRef = Element | null | undefined | React.RefObject<Element>;
 export interface SharedDropdownProps extends React.AllHTMLAttributes<HTMLElement>, FocusTrapProps {
     closing: boolean;