@vkontakte/vkui 4.28.0 → 4.28.1

package/.cache/ts/src/types.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { PlatformType } from "./lib/platform";
+import { Insets } from "@vkontakte/vk-bridge";
+export declare type AnyFunction = (...args: any[]) => any;
+export declare type AlignType = "left" | "center" | "right";
+export interface HasRootRef<T> {
+    getRootRef?: React.Ref<T>;
+}
+export interface HasRef<T> {
+    getRef?: React.Ref<T>;
+}
+export interface HasComponent {
+    Component?: React.ElementType;
+}
+export interface HasAlign {
+    align?: AlignType;
+}
+export interface HasPlatform {
+    /**
+     * @ignore
+     */
+    platform?: PlatformType;
+}
+export interface HasInsets {
+    /**
+     * @ignore
+     */
+    insets?: Partial<Insets>;
+}
+export interface Version {
+    major: number;
+    minor?: number;
+    patch?: number;
+}

package/.cache/ts/src/unstable/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Forms
+ */
+export { ChipsSelect } from "../components/ChipsSelect/ChipsSelect";
+export type { ChipsSelectProps } from "../components/ChipsSelect/ChipsSelect";
+export { Dropdown } from "../components/Dropdown/Dropdown";
+export type { DropdownProps } from "../components/Dropdown/Dropdown";
+export { TextTooltip } from "../components/TextTooltip/TextTooltip";
+export type { TextTooltipProps } from "../components/TextTooltip/TextTooltip";
+export { RichTooltip } from "../components/RichTooltip/RichTooltip";
+export type { RichTooltipProps } from "../components/RichTooltip/RichTooltip";
+export { Popper } from "../components/Popper/Popper";
+export type { PopperProps } from "../components/Popper/Popper";
+export { ViewInfinite } from "../components/View/ViewInfinite";
+export type { ViewInfiniteProps } from "../components/View/ViewInfinite";
+export { SimpleCheckbox } from "../components/SimpleCheckbox/SimpleCheckbox";
+export type { SimpleCheckboxProps } from "../components/SimpleCheckbox/SimpleCheckbox";

package/.codesandbox/ci.json

@@ -0,0 +1,5 @@
+{
+  "node": "14",
+  "installCommand": "codesandbox:install",
+  "sandboxes": ["vkui-default-example-b7kyy"]
+}

package/.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintignore

@@ -0,0 +1,6 @@
+node_modules/
+dist/
+docs/
+*.test.js
+src/vkui.js
+stylelint.config.js

package/.eslintrc.json

@@ -0,0 +1,145 @@
+{
+  "extends": [
+    "@vkontakte/eslint-config/typescript/react",
+    "prettier",
+    "prettier/react",
+    "prettier/@typescript-eslint",
+    "plugin:react-hooks/recommended"
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
+    "sourceType": "module", // Allows for the use of imports
+    "ecmaFeatures": {
+      "jsx": true, // Allows for the parsing of JSX
+      "restParams": true,
+      "spread": true
+    }
+  },
+  "globals": {
+    "Element": true
+  },
+  "ignorePatterns": ["unstable/**/*.ts", "tokenized/**/*.ts"],
+  "env": {
+    "es6": true, // Enable global es6 variables, like Set, Map, etc
+    "browser": true,
+    "node": true
+  },
+  "plugins": ["import"],
+  "rules": {
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/no-unnecessary-condition": "off",
+    "@typescript-eslint/no-magic-numbers": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "ignoreRestSiblings": true
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "no-restricted-globals": ["error", "window", "document"],
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          // prevent absolute imports from src subfolders like `import { ... } from "lib"`
+          "appearance",
+          "components",
+          "helpers",
+          "hoc",
+          "hooks",
+          "lib",
+          "styles",
+          "testing",
+          "types",
+          "unstable",
+          "tokenized"
+        ],
+        "patterns": [
+          "@vkontakte/icons/dist/*",
+          // prevent absolute imports from src subfolders like `import { ... } from "lib/platform"`
+          "appearance/*",
+          "components/*",
+          "helpers/*",
+          "hoc/*",
+          "hooks/*",
+          "lib/*",
+          "styles/*",
+          "testing/*",
+          "types/*",
+          "unstable/*",
+          "tokenized/*"
+        ]
+      }
+    ],
+    "no-restricted-properties": [
+      "error",
+      {
+        "property": "querySelector",
+        "message": "Make sure to use [data-*] selector, not class"
+      },
+      {
+        "property": "querySelectorAll",
+        "message": "Make sure to use [data-*] selector, not class"
+      },
+      {
+        "property": "matches",
+        "message": "Make sure to use [data-*] selector, not class"
+      },
+      {
+        "property": "closest",
+        "message": "Make sure to use [data-*] selector, not class"
+      },
+      {
+        "property": "getElementsByClassName",
+        "message": "Use .querySelectorAll('[data-*]')"
+      },
+      {
+        "property": "classList",
+        "message": "Make sure to use 'vkui' prefix"
+      },
+      {
+        "property": "getElementById",
+        "message": "Absolutely do not use id"
+      },
+      {
+        "object": "React",
+        "property": "useLayoutEffect",
+        "message": "Prefer lib/useIsomorphicLayoutEffect"
+      }
+    ],
+    "react/react-in-jsx-scope": "off",
+    "no-restricted-syntax": [
+      "error",
+      {
+        "selector": "ImportDeclaration[source.value=/^\\W+(index(\\.ts)?)?$/i]",
+        "message": "Do not import index"
+      },
+      {
+        "selector": "ImportDeclaration[source.value=/\\.css$/i] ~ ImportDeclaration[source.value!=/\\.css$/i]",
+        "message": "CSS import must be last"
+      }
+    ],
+    "import/no-default-export": "error"
+  },
+  "overrides": [
+    {
+      "files": [
+        "src/**/*.{test,spec,e2e}.{ts,tsx}",
+        "e2e/**/*",
+        "src/testing/**/*"
+      ],
+      "env": {
+        "jest": true
+      },
+      "rules": {
+        "no-restricted-properties": "off",
+        "no-restricted-globals": "off"
+      }
+    },
+    {
+      "files": ["src/**/*.e2e.{ts,tsx}", "e2e/**/*", "src/testing/**/*"],
+      "extends": ["plugin:jest-playwright/recommended"]
+    }
+  ]
+}

package/.gitattributes

@@ -0,0 +1 @@
+src/**/__image_snapshots__/*.png filter=lfs diff=lfs merge=lfs -text

package/.prettierignore

@@ -0,0 +1,14 @@
+node_modules
+dist
+coverage
+.idea
+.vscode
+e2e/dist
+test-results.json
+lint-results.json
+e2e-results.json
+.nyc_output
+__diff_output__
+.cache
+docs/
+src/styles/generated

package/.prettierrc.json

@@ -0,0 +1 @@
+{}

package/.stylelintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/CONTRIBUTING.md

@@ -14,12 +14,13 @@
 - Дизайн компонента описан в [Figma](https://www.figma.com/@vk)
 - Компонент находится в своей папке в `src/components` и не делит её с другими публичными компонентами (один файл — один компонент)
 - У компонента есть понятная документация, описанная в директории компонента в файле `Readme.md`. Файл подключается в `styleguide/config.js`
+- Вся документация и предупреждения в коде компонента (`warnOnce`) написаны на русском языке
 - Вся стилизация — в соответствующем `.css` файле. Файл подключается в `src/styles/components.css`
 
 ### Требования к разработке
 
 - CSS-классы компонента передаем через `vkuiClass="Cmp"`
-- CSS-классы названы по БЭМ: `.Component__element-name--modificator`
+- CSS-классы названы по БЭМ: `.Component__element-name--modificator`. [Гайд по написанию стилей](https://github.com/VKCOM/VKUI/blob/master/CSS_GUIDE.md)
 - Свойства `className` и `style` навешиваются на корневой элемент компонента
 - Свойства, не используемые в коде компонента, навешиваются на **главный** элемент компонента. По умолчанию главным является корневой элемент:
 
@@ -57,7 +58,7 @@ const Cmp: React.FC<CmpProps> = ({
 }) => <div vkuiClass={classNames("Cmp", `Cmp--${mode}`)} {...restProps} />;
 ```
 
-- Для цветов используются цветовые токены
+- Для цветов используются цветовые токены. Старые компоненты поддерживают [Appearance](https://github.com/VKCOM/Appearance) и [vkui-tokens](https://github.com/VKCOM/vkui-tokens), новые — только vkui-tokens. [Гайд по миграции](https://github.com/VKCOM/VKUI/blob/master/VKUI_TOKENS_MIGRATION_GUIDE.md)
 - Для типографии используются компоненты [Typography](https://vkcom.github.io/VKUI/#!/Typography) там, где это возможно
 - Добавлен `export` компонента и его свойств в `src/index.ts`
 - Компонент покрыт юнит- и скриншотными тестами. [Гайд по тестированию](./TESTING.md)

package/CSS_GUIDE.md

@@ -0,0 +1,145 @@
+# Гайд по написанию стилей
+
+## Соглашения
+
+- Используем БЭМ-нотацию
+- Блок начинается с заглавной буквы: `.Checkbox`
+- Многословный блок разделяется через camelCase: `.SimpleCheckbox`
+- Элемент от блока отделяется двумя подчеркиваниями: `.Checkbox__in`
+- Многословные элементы разделяются через kebab-case: `.Banner__before-title`
+- Модификатор отделяется двумя дефисами: `.Input--plain`
+- Многословные модификаторы разделяются через kebab-case или camelCase: `.Checkbox--sizeX-regular`
+
+### Связность стилей
+
+Если компонент состоит из других компонентов, то для их модификации используем БЭМ-миксин. Пример:
+
+```tsx
+// Button.tsx
+<button vkuiClass="Button">
+  <Text vkuiClass="Button__text">{children}</Text>
+</button>
+```
+
+```css
+/* Button.css */
+.Button__text {
+  margin: 4px 0;
+}
+```
+
+Если в компонент прокидываются другие компоненты извне, то для их модификации используем обращение к блоку. Пример:
+
+```tsx
+// Cell.tsx
+<div vkuiClass="Cell">
+  {before} {/* В before может быть <Icon /> или <Avatar /> */}
+</div>
+```
+
+```css
+/* Cell.css */
+.Cell .Icon {
+  margin-right: 10px;
+}
+
+.Cell .Avatar {
+  margin-right: 8px;
+}
+```
+
+Таких ситуаций стоит избегать, так как подобное связывание лишает нас возможности в будущем хешировать имена классов с
+помощью css-modules.
+
+## Проблемы
+
+### Конфликт стилей блока и миксина
+
+```css
+/* Text.css */
+.Text {
+  margin: 0;
+}
+```
+
+```css
+/* Button.css */
+.Button__text {
+  margin: 4px 0;
+}
+```
+
+Вес селекторов одинаковый, поэтому применится последний по порядку. Рассчитывать на порядок сложно, так как он может
+меняться, если собирать стили вебпаком.
+
+#### Решение
+
+Избегать правил на блоке, которые могут быть в миксине.
+
+Список правил, которых стоит избегать:
+
+- display;
+- margin;
+- position;
+- left, right, top, bottom;
+- transform: translate
+
+### Сброс стилей
+
+Допустим, мы делаем компонент типографики. Для семантики мы даём возможность рендерить
+любой html-элемент. В итоге, если пользователь рендерит, допустим, `h1`, у него появляются
+дефолтные браузерные `margin`. Наше решение такое:
+
+```css
+/* Title.css */
+
+.Title {
+  /*...*/
+  margin: 0; /* или любое другое значение, диктуемое дизайном */
+}
+```
+
+Решение приводит нас к предыдущей проблеме.
+
+#### Решение
+
+В таком случае необходимо снабдить компонент режимом `withSpaces`, который
+если `false`, то никакие `margin` на блок не навешиваются.
+
+### Нормализация стилей
+
+Допустим, мы делаем компонент кнопки. Согласно дизайну, кнопка может быть ссылкой. Поэтому
+Button мы тоже наделяем возможностью рендерить любой html-элемент, в том числе `a`. В силу
+ряда стилей нам необходимо, что кнопка не была инлайновой. Поэтому мы пишем следующее:
+
+```css
+/* Button.css */
+
+.Button {
+  /* ... */
+  display: inline-block;
+}
+```
+
+Теперь те, кто хочет скрыть кнопку, используя миксин, столкнутся с проблемой конфликта
+блока и миксина.
+
+#### Решение
+
+В данном случае мы можем только порекомендовать разработчикам оборачивать кнопку
+в условный `div`.
+
+### Обращения к элементам другого блока
+
+```css
+/* Banner.css */
+.Banner .Button__in {
+  padding-top: 4px;
+}
+```
+
+Мы завязываемся на реализацию другого компонента. Это плохо, так как реализация может меняться.
+
+#### Решение
+
+Не обращаться к элементам другого блока

package/TESTING.md

@@ -0,0 +1,58 @@
+Мы используем три вида тестов:
+
+**Юнит-тесты** на 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 + [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) — чтобы платформа не влияла на рендеринг шрифтов. На линуксе докер не нужен.
+
+## Команды
+
+- `yarn test:unit` — только быстрые юниты + компонентные;
+- `yarn test:unit:quick` — только юниты + компонентные тесты на незакоммиченные изменения;
+- `yarn test:e2e` — только браузерные тесты;
+
+Все команды работают в интерактивном режиме с опцией `--watch` (`yarn test:unit --watch`).
+
+Чтобы обновить скриншоты, установите докер и git-lfs и запустите `yarn test:e2e -u`.
+
+## Покрытие
+
+Чтобы сгенерировать карту покрытия в `coverage/lcov/index.html`:
+
+- Только юнитами — просто `yarn test:unit`
+- Только E2E — `yarn test:e2e && yarn test:combine-coverage`
+- Совмещенного — `&& yarn test:e2e && yarn test:unit:ci && yarn test:combine-coverage`
+
+## `describeScreenshotFuzz`
+
+Функция `describeScreenshotFuzz` из [`/testing/utils`](./src/testing/e2e/utils.tsx) помогает быстро заскриншотить все состояния компонента в разных темах и на разных платформах:
+
+```ts
+describe("Button", () => {
+  describeScreenshotFuzz(
+    // Можем передать компонент или вот так добавить дефолтные пропы для скриншотов
+    (props: ButtonProps) => <Button {...props}>Кнопка</Button>,
+    // Описание комбинаций пропов — по элементу массива на независимый набор
+    [
+      // mode и disabled влияют на цвет, но не на размер
+      { 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"
+});
+```

package/babel.cjs.config.js

@@ -0,0 +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",
+        ],
+      },
+    ],
+  ],
+};

package/babel.config.js

@@ -0,0 +1,72 @@
+const { NODE_ENV, BABEL_KEEP_CSS } = process.env;
+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 testFiles = [
+  "./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",
+      },
+    ],
+  ],
+  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 : []),
+};

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

@@ -33,7 +33,7 @@ var _utils = require("../../lib/utils");
 
 var _ActionSheetContext = require("./ActionSheetContext");
 
-var _Caption = _interopRequireDefault(require("../Typography/Caption/Caption"));
+var _Caption = require("../Typography/Caption/Caption");
 
 var _usePlatform = require("../../hooks/usePlatform");
 
@@ -135,13 +135,10 @@ var ActionSheet = function ActionSheet(_ref) {
     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",
+  }, (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
+    weight: platform === _platform.IOS ? "1" : "2",
     vkuiClass: "ActionSheet__title"
-  }, header), (0, _utils.hasReactNode)(text) && (0, _jsxRuntime.createScopedElement)(_Caption.default, {
-    level: "1",
-    weight: "regular",
+  }, header), (0, _utils.hasReactNode)(text) && (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
     vkuiClass: "ActionSheet__text"
   }, text)), children, platform === _platform.IOS && !isDesktop && iosCloseItem));
 

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","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"}
+{"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                weight={platform === IOS ? \"1\" : \"2\"}\n                vkuiClass=\"ActionSheet__title\"\n              >\n                {header}\n              </Caption>\n            )}\n            {hasReactNode(text) && (\n              <Caption vkuiClass=\"ActionSheet__text\">{text}</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"}