Merge branch 'main' into feat/improve-handling-aria-props

.babelrc

@@ -10,7 +10,12 @@
       }
     ],
     "@babel/preset-typescript",
-    "@babel/preset-react"
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
   ],
   "plugins": []
-}
+}

.eslintrc

@@ -4,7 +4,8 @@
         "@gravity-ui/eslint-config/client",
         "@gravity-ui/eslint-config/prettier",
         "@gravity-ui/eslint-config/import-order",
-        "@gravity-ui/eslint-config/a11y"
+        "@gravity-ui/eslint-config/a11y",
+        "plugin:react/jsx-runtime"
     ],
     "root": true,
     "rules": {
@@ -15,8 +16,8 @@
         "no-restricted-syntax": [
             "error",
             {
-                "selector": "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier, ImportSpecifier)",
-                "message": "Please use import React from 'react' instead."
+                "selector": "ImportDeclaration[source.value='react'] :matches(ImportDefaultSpecifier, ImportSpecifier)",
+                "message": "Please use `import * as React from 'react'` instead."
             },
             {
                 "selector": "TSTypeReference>TSQualifiedName[left.name='React'][right.name='FC']",

.storybook/decorators/withLang.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {Decorator} from '@storybook/react';
 
 import {configure} from '../../src';

.storybook/decorators/withMobile.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {Decorator} from '@storybook/react';
 
 import {MobileProvider} from '../../src';

.storybook/decorators/withStrictMode.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import type {Decorator} from '@storybook/react';
 

.storybook/decorators/withTheme.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {Decorator} from '@storybook/react';
 
 import {ThemeProvider} from '../../src';

.storybook/theme-addon/register.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import type {API} from '@storybook/manager-api';
 import {addons, types, useGlobals} from '@storybook/manager-api';

CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## [6.40.0](https://github.com/gravity-ui/uikit/compare/v6.39.0...v6.40.0) (2024-12-24)
+
+
+### Features
+
+* **Select:** add data for option group ([#2011](https://github.com/gravity-ui/uikit/issues/2011)) ([46c9d28](https://github.com/gravity-ui/uikit/commit/46c9d28b972ad63dd9ce334b1d052b76fa5720ec))
+
+## [6.39.0](https://github.com/gravity-ui/uikit/compare/v6.38.0...v6.39.0) (2024-12-19)
+
+
+### Features
+
+* **Progress:** change prop text ([#1993](https://github.com/gravity-ui/uikit/issues/1993)) ([92e53a0](https://github.com/gravity-ui/uikit/commit/92e53a088112d41a1fe96f091350f36d0caaa97c))
+* **Select:** add title for option ([#1994](https://github.com/gravity-ui/uikit/issues/1994)) ([03b5dbf](https://github.com/gravity-ui/uikit/commit/03b5dbfbe68abf98de3407643140ddb226379d51))
+* **styles:** manage animations by user settings ([#1996](https://github.com/gravity-ui/uikit/issues/1996)) ([19ca365](https://github.com/gravity-ui/uikit/commit/19ca365acde4fb5b467e9ac36a373a6ea5def728))
+* **Tabs:** allow string for TabItem counter value ([#1989](https://github.com/gravity-ui/uikit/issues/1989)) ([b628086](https://github.com/gravity-ui/uikit/commit/b6280863bb474f9d52fdc1f3f26dd5e0507254df))
+
+
+### Bug Fixes
+
+* **Icon:** remove redundant color:inherit style ([#1999](https://github.com/gravity-ui/uikit/issues/1999)) ([d6cda6e](https://github.com/gravity-ui/uikit/commit/d6cda6ebf38216da1eac56e3b87343603cf29c63))
+* **Sheet:** remove animation lags when closing in some browsers ([#1984](https://github.com/gravity-ui/uikit/issues/1984)) ([555b186](https://github.com/gravity-ui/uikit/commit/555b18687ce431fe78102b0e98fac35464fe7957))
+
+## [6.38.0](https://github.com/gravity-ui/uikit/compare/v6.37.0...v6.38.0) (2024-12-06)
+
+
+### Features
+
+* **User:** add html titles for elements ([#1982](https://github.com/gravity-ui/uikit/issues/1982)) ([105d43b](https://github.com/gravity-ui/uikit/commit/105d43b0d511e516675e66877fb31c94bf583f91))
+
+
+### Bug Fixes
+
+* **PinInput:** remove height glitch in Safari ([#1938](https://github.com/gravity-ui/uikit/issues/1938)) ([d6cb1cf](https://github.com/gravity-ui/uikit/commit/d6cb1cfaec89a806b6948f92aa2c12669c110fb8))
+* **TextInput:** share font styles between error and note blocks in OuterAdditionalContent ([#1970](https://github.com/gravity-ui/uikit/issues/1970)) ([55737b5](https://github.com/gravity-ui/uikit/commit/55737b5a66dbd975ecbbf84dac95592cd65e3b1a))
+
 ## [6.37.0](https://github.com/gravity-ui/uikit/compare/v6.36.0...v6.37.0) (2024-11-27)
 
 

CODEOWNERS

@@ -18,6 +18,7 @@
 /src/components/Disclosure @Raubzeug
 /src/components/Divider @v4dyar4
 /src/components/DropdownMenu @axtk
+/src/components/FilePreview @mournfulCoroner
 /src/components/HelpMark @Raubzeug
 /src/components/Hotkey @d3m1d0v
 /src/components/Icon @amje

README-ru.md

@@ -0,0 +1,107 @@
+# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/uikit/)
+
+Набор гибких, универсальных и высокоэффективных React-компонентов для создания сложных веб-приложений.
+
+<!--GITHUB_BLOCK-->
+
+![Cover image](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png)
+
+## Ресурсы
+
+### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Веб-сайт](https://gravity-ui.com)
+
+### ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Документация](https://gravity-ui.com/components/uikit/alert)
+
+### ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma](<https://www.figma.com/community/file/1271150067798118027/Gravity-UI-Design-System-(Beta)>)
+
+### ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer)
+
+### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/)
+
+### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Сообщество](https://t.me/gravity_ui)
+
+<!--/GITHUB_BLOCK-->
+
+## Установка
+
+```shell
+npm install --save-dev @gravity-ui/uikit
+```
+
+## Использование
+
+```jsx
+import React from 'react';
+import {Button} from '@gravity-ui/uikit';
+
+const SubmitButton = <Button view="action" size="l" />;
+```
+
+### Стили
+
+UIKit включает в себя базовое стилизованное оформление и тему. Чтобы подключить их, добавьте следующий фрагмент кода в начало точки входа приложения:
+
+```js
+// index.js
+
+import '@gravity-ui/uikit/styles/fonts.css';
+import '@gravity-ui/uikit/styles/styles.css';
+
+// ...
+```
+
+UIKit поддерживает несколько тем: светлая, темная и их контрастные версии. Приложение должно быть отрисовано внутри компонента `ThemeProvider`:
+
+```js
+import {createRoot} from 'react-dom/client';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <ThemeProvider theme="light">
+    <App />
+  </ThemeProvider>,
+);
+```
+
+Для предотвращения мигания темы можно сгенерировать исходные CSS-классы для корневого элемента во время серверного рендеринга.
+
+```js
+import {getRootClassName} from '@gravity-ui/uikit/server';
+
+const theme = 'dark';
+const rootClassName = getRootClassName({theme});
+
+const html = `
+<html>
+  <body>
+    <div id="root" class="${rootClassName}"></div>
+  </body>
+</html>
+`;
+```
+
+Также предусмотрен файл с SCSS-[миксинами](styles/mixins.scss), которые можно использовать в приложении.
+
+### I18N
+
+Некоторые компоненты содержат текстовые токены (слова и фразы), доступные на двух языках: `en` (по умолчанию) и `ru`.
+Для настройки языка используйте функцию `configure`:
+
+```js
+// index.js
+
+import {configure} from '@gravity-ui/uikit';
+
+configure({
+  lang: 'ru',
+});
+```
+
+## Разработка
+
+Для запуска Storybook в режиме разработки выполните следующую команду:
+
+```shell
+npm start
+```

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.37.0",
+    "version": "6.40.0",
     "description": "Gravity UI base styling and components",
     "keywords": [
         "component",
@@ -204,8 +204,8 @@
         "typescript": "^5.3.3"
     },
     "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "nano-staged": {
         "*.{scss}": [

playwright/core/mountFixture.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type {MountFixture, PlaywrightFixture} from './types';
 
 export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: baseMount}, use) => {
@@ -12,6 +10,7 @@ export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: base
                     boxSizing: options?.width ? 'content-box' : undefined,
                     width: options?.width ? options.width : 'fit-content',
                     height: 'fit-content',
+                    ...options?.rootStyle,
                 }}
                 className="playwright-wrapper-test"
             >

playwright/core/types.ts

@@ -1,8 +1,9 @@
-import type React from 'react';
+import type * as React from 'react';
 
 import type {MountOptions, MountResult} from '@playwright/experimental-ct-react';
 import type {
     Locator,
+    Page,
     PageScreenshotOptions,
     PlaywrightTestArgs,
     PlaywrightTestOptions,
@@ -14,7 +15,10 @@ import type {
 interface ComponentFixtures {
     mount<HooksConfig>(
         component: React.JSX.Element,
-        options?: MountOptions<HooksConfig> & {width?: number},
+        options?: MountOptions<HooksConfig> & {
+            width?: number | string;
+            rootStyle?: React.CSSProperties;
+        },
     ): Promise<MountResult>;
 }
 
@@ -36,6 +40,6 @@ export interface ExpectScreenshotFixture {
 
 export interface CaptureScreenshotParams extends PageScreenshotOptions {
     nameSuffix?: string;
-    component?: Locator;
+    component?: Locator | Page;
     themes?: Array<'light' | 'dark'>;
 }

playwright/playwright/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {beforeMount} from '@playwright/experimental-ct-react/hooks';
 
 import {ToasterProvider} from '../../src/components/Toaster';

src/components/ActionTooltip/ActionTooltip.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import * as React from 'react';
 
 import {useForkRef} from '../../hooks';
 import {useTooltipVisible} from '../../hooks/private';

src/components/ActionTooltip/README-ru.md

@@ -0,0 +1,34 @@
+<!--GITHUB_BLOCK-->
+
+# ActionTooltip
+
+<!--/GITHUB_BLOCK-->
+
+`ActionTooltip` — это простая текстовая подсказка, использующая в качестве якоря дочерний элемент. Для правильной работы элемент-якорь должен поддерживать события мыши и события получения или потери фокуса.
+
+## Использование
+
+```tsx
+import {ActionTooltip} from '@gravity-ui/uikit';
+
+<ActionTooltip title="Content">
+  <div tabIndex={0}>Anchor</div>
+</ActionTooltip>;
+```
+
+## Свойства
+
+| Имя              | Описание                                                                                   |                       Тип                        | Значение по умолчанию |
+| :--------------- | ------------------------------------------------------------------------------------------ | :----------------------------------------------: | :-------------------: |
+| children         | Элемент-якорь для `Tooltip`. Должен принимать `ref` для передачи DOM-элемента.             |               `React.ReactElement`               |                       |
+| closeDelay       | Время задержки в миллисекундах перед скрытием `Tooltip` после увода курсора с элемента.    |                     `number`                     |          `0`          |
+| openDelay        | Время задержки в миллисекундах перед показом `Tooltip` после наведения курсора на элемент. |                     `number`                     |         `250`         |
+| placement        | Положение `Tooltip` относительно якоря.                                                    | [`PopupPlacement`](../Popup/README.md#placement) |                       |
+| qa               | HTML-атрибут `data-qa`, используется для тестирования.                                     |                     `string`                     |                       |
+| title            | Текст заголовка для тултипа.                                                               |                     `string`                     |                       |
+| description      | Текст описания в тултипе.                                                                  |                     `string`                     |                       |
+| hotkey           | Горячие клавиши, назначенные на действие в интерфейсе.                                     |                     `string`                     |                       |
+| id               | Используется для реализации логики доступности.                                            |                     `string`                     |                       |
+| disablePortal    | Отключает использование `Portal` для дочерних элементов.                                   |                    `boolean`                     |                       |
+| contentClassName | HTML-атрибут `class` для узла с содержимым.                                                |                     `string`                     |                       |
+| disabled         | Блокирует открытие всплывающего окна.                                                      |                    `boolean`                     |        `false`        |