Merge branch 'DATAUI-2111' of github.com:gravity-ui/uikit into DATAUI…

…-2111

.storybook/main.ts

@@ -3,7 +3,7 @@ import type {StorybookConfig} from '@storybook/react-webpack5';
 const config: StorybookConfig = {
     framework: {
         name: '@storybook/react-webpack5',
-        options: {fastRefresh: true},
+        options: {},
     },
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
     docs: {
@@ -14,6 +14,7 @@ const config: StorybookConfig = {
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         './theme-addon/register.tsx',
         '@storybook/addon-a11y',
+        '@storybook/addon-webpack5-compiler-babel',
     ],
 };
 

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 
 import {themes} from './theme';
 

.storybook/theme-addon/register.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import {addons, types} from '@storybook/addons';
-import {useGlobals} from '@storybook/api';
-import type {API} from '@storybook/api';
+import type {API} from '@storybook/manager-api';
+import {addons, types, useGlobals} from '@storybook/manager-api';
 
 import {getThemeType} from '../../src/components/theme/getThemeType';
 import {themes} from '../theme';

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [6.9.0](https://github.com/gravity-ui/uikit/compare/v6.8.0...v6.9.0) (2024-04-03)
+
+
+### Features
+
+* **DropdownMenu:** add class name for submenu parents ([#1465](https://github.com/gravity-ui/uikit/issues/1465)) ([a314081](https://github.com/gravity-ui/uikit/commit/a3140811d9c80fb1e61e315c838f4209d7a23459))
+* **useList:** update codeowners ([#1473](https://github.com/gravity-ui/uikit/issues/1473)) ([d8b71e9](https://github.com/gravity-ui/uikit/commit/d8b71e937d113d6a291849e9515b922083702f18))
+
+
+### Bug Fixes
+
+* **Breadcrumbs:** fix recalculate method ([#1475](https://github.com/gravity-ui/uikit/issues/1475)) ([2f8acf7](https://github.com/gravity-ui/uikit/commit/2f8acf7f8278d704a6cbb5351ef73dd4774c1d5d))
+* **List:** fix `onSortEnd` method ([#1476](https://github.com/gravity-ui/uikit/issues/1476)) ([1567248](https://github.com/gravity-ui/uikit/commit/156724825d12c4e3c185fa766c74c212838ead8c))
+* **TextInput:** fix control line height ([#1477](https://github.com/gravity-ui/uikit/issues/1477)) ([e5438ed](https://github.com/gravity-ui/uikit/commit/e5438ed8fb9b8ae9e9497b8448a67512e9e0983c))
+* **TreeList:** add getId prop drilling to list container ([#1469](https://github.com/gravity-ui/uikit/issues/1469)) ([484cac7](https://github.com/gravity-ui/uikit/commit/484cac79bfa6f408d833cfdd33c20dac33bf66ac))
+* **TreeList:** fixes + documentation ([#1447](https://github.com/gravity-ui/uikit/issues/1447)) ([46b2850](https://github.com/gravity-ui/uikit/commit/46b2850731b1699c517c2787a6b370a219323e52))
+* **useList:** add export of computeItemSize to useList ([#1472](https://github.com/gravity-ui/uikit/issues/1472)) ([c6c8ed4](https://github.com/gravity-ui/uikit/commit/c6c8ed428053e7f18634d827990ef97dabf5700f))
+* **useList:** added dragging property to ListItemView docs ([#1470](https://github.com/gravity-ui/uikit/issues/1470)) ([750e5ba](https://github.com/gravity-ui/uikit/commit/750e5ba829fbfea798412f3192406b400007bdfc))
+* **useList:** added missing imports to docs ([#1466](https://github.com/gravity-ui/uikit/issues/1466)) ([4940a9a](https://github.com/gravity-ui/uikit/commit/4940a9adc0fb036aa2b39b0c67283ac75443be53))
+
 ## [6.8.0](https://github.com/gravity-ui/uikit/compare/v6.7.0...v6.8.0) (2024-03-29)
 
 

CODEOWNERS

@@ -33,6 +33,7 @@
 /src/components/RadioGroup @zamkovskaya
 /src/components/User @DakEnviy
 /src/components/UserLabel @DakEnviy
+/src/components/useList @IsaevAlexandr
 /src/components/Select @korvin89
 /src/components/Sheet @mournfulCoroner
 /src/components/Skeleton @SeqviriouM
@@ -43,6 +44,8 @@
 /src/components/Table @Raubzeug
 /src/components/Tabs @sofiushko
 /src/components/Text @IsaevAlexandr
+/src/components/TreeList @IsaevAlexandr
+/src/components/TreeSelect @IsaevAlexandr
 /src/components/controls/TextArea @korvin89
 /src/components/controls/TextInput @korvin89
 /src/components/Toaster @ogonkov

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.8.0",
+    "version": "6.9.0",
     "description": "Gravity UI base styling and components",
     "license": "MIT",
     "repository": {
@@ -73,8 +73,8 @@
         "test:watch": "jest --watchAll",
         "clean": "gulp clean",
         "build": "gulp",
-        "start": "sb dev -p 7007",
-        "build-storybook": "sb build -c .storybook -o storybook-static",
+        "start": "storybook dev -p 7007",
+        "build-storybook": "storybook build -c .storybook -o storybook-static",
         "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .",
         "lint:js:fix": "npm run lint:js -- --fix",
         "lint:styles": "cross-env stylelint '{styles,src}/**/*.scss'",
@@ -122,12 +122,15 @@
         "@gravity-ui/tsconfig": "^1.0.0",
         "@playwright/experimental-ct-react": "^1.42.1",
         "@playwright/test": "^1.42.1",
-        "@storybook/addon-a11y": "^7.6.13",
-        "@storybook/addon-essentials": "^7.6.10",
-        "@storybook/cli": "^7.6.10",
+        "@storybook/addon-a11y": "^8.0.5",
+        "@storybook/addon-essentials": "^8.0.5",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+        "@storybook/cli": "^8.0.5",
+        "@storybook/manager-api": "^8.0.5",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react-webpack5": "^7.6.10",
-        "@storybook/test-runner": "^0.16.0",
+        "@storybook/preview-api": "^8.0.5",
+        "@storybook/react-webpack5": "^8.0.5",
+        "@storybook/test-runner": "^0.17.0",
         "@testing-library/jest-dom": "^6.3.0",
         "@testing-library/react": "^14.1.2",
         "@testing-library/user-event": "^14.5.2",
@@ -167,6 +170,7 @@
         "rimraf": "^5.0.5",
         "sass": "^1.70.0",
         "sass-loader": "^14.0.0",
+        "storybook": "^8.0.5",
         "stylelint": "^15.11.0",
         "stylelint-use-logical": "^2.1.0",
         "ts-jest": "^29.1.2",

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -221,9 +221,10 @@ export class Breadcrumbs<T extends BreadcrumbsItem = BreadcrumbsItem> extends Re
 
     private recalculate() {
         const {items: allItems, lastDisplayedItemsCount, firstDisplayedItemsCount} = this.props;
-        const availableWidth = this.container.current?.offsetWidth || 0;
+        let availableWidth = this.container.current?.offsetWidth || 0;
 
         if (this.container.current && availableWidth > 0) {
+            availableWidth += GAP_WIDTH;
             const dividers: HTMLElement[] = Array.from(
                 this.container.current.querySelectorAll(`.${b('divider')}`),
             );

src/components/DropdownMenu/DropdownMenuPopup.tsx

@@ -150,6 +150,13 @@ export const DropdownMenuPopup = <T,>({
                         const isActive = isNavigationActive && activeItemIndex === index;
                         const activate = () => setActiveItemIndex(index);
 
+                        const isActiveParent =
+                            open &&
+                            !isActive &&
+                            activeMenuPath.length !== 0 &&
+                            stringifyNavigationPath(item.path) ===
+                                stringifyNavigationPath(activeMenuPath.slice(0, item.path.length));
+
                         const extraProps = {
                             ...item.extraProps,
                             onMouseEnter: activate,
@@ -160,7 +167,11 @@ export const DropdownMenuPopup = <T,>({
                                 key={index}
                                 className={cnDropdownMenu(
                                     'menu-item',
-                                    {separator: isSeparator(item)},
+                                    {
+                                        separator: isSeparator(item),
+                                        'active-parent': isActiveParent,
+                                        'with-submenu': Boolean(item.items?.length),
+                                    },
                                     item.className,
                                 )}
                                 selected={isActive}

src/components/DropdownMenu/README.md

@@ -160,6 +160,11 @@ LANDING_BLOCK-->
 
 The `items` property on an individual menu item adds nested subitems to this menu item.
 
+Menu items with submenus obtain the following additional class names to allow for extra styling:
+
+- the class name `.g-dropdown-menu__menu-item_with-submenu` is added to items with more than 1 nested item;
+- the class name `.g-dropdown-menu__menu-item_active-parent` is added to an item whose submenu is currently open.
+
 <!--LANDING_BLOCK
 
 <ExampleBlock

src/components/List/List.tsx

@@ -367,7 +367,6 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                                 ref={this.refContainer}
                                 itemCount={items.length}
                                 provided={droppableProvided}
-                                sortable={sortable}
                             >
                                 {items.map((_item, index) => {
                                     return (
@@ -598,10 +597,12 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
 
     private onSortEnd = (result: DropResult) => {
         if (!result.destination) {
+            this.setState({sorting: false});
             return;
         }
 
         if (result.source.index === result.destination.index) {
+            this.setState({sorting: false});
             return;
         }
 

src/components/List/__stories__/List.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {ComponentMeta, ComponentStory} from '@storybook/react';
+import type {Meta, StoryFn} from '@storybook/react';
 
 import {List, listDefaultProps} from '..';
 import type {ListProps} from '..';
@@ -48,18 +48,18 @@ export default {
             },
         },
     },
-} as ComponentMeta<ComponentType>;
+} as Meta<ComponentType>;
 
 const items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
 
-const DefaultTemplate: ComponentStory<ComponentType> = (args) => <List {...args} />;
+const DefaultTemplate: StoryFn<ComponentType> = (args) => <List {...args} />;
 export const Default = DefaultTemplate.bind({});
 Default.args = {
     items,
     itemsHeight: 150,
 };
 
-const SortableTemplate: ComponentStory<ComponentType> = (args) => <List {...args} />;
+const SortableTemplate: StoryFn<ComponentType> = (args) => <List {...args} />;
 export const Sortable = SortableTemplate.bind({});
 Sortable.args = {
     items,
@@ -72,14 +72,14 @@ Sortable.parameters = {
     disableStrictMode: true,
 };
 
-const RenderItemTemplate: ComponentStory<ComponentType> = (args) => <List {...args} />;
+const RenderItemTemplate: StoryFn<ComponentType> = (args) => <List {...args} />;
 export const RenderItem = RenderItemTemplate.bind({});
 RenderItem.args = {
     items,
     renderItem: (item) => `🔥🔥🔥 ${item} 🔥🔥🔥`,
 };
 
-const TemplateWithState: ComponentStory<ComponentType> = (args) => <ListWithLoader {...args} />;
+const TemplateWithState: StoryFn<ComponentType> = (args) => <ListWithLoader {...args} />;
 
 export const WithLoadingMoreItems = TemplateWithState.bind({});
 WithLoadingMoreItems.args = {
@@ -90,7 +90,7 @@ WithLoadingMoreItems.args = {
     virtualized: false,
 };
 
-const ShowcaseTemplate: ComponentStory<ComponentType> = () => <ListShowcase />;
+const ShowcaseTemplate: StoryFn<ComponentType> = () => <ListShowcase />;
 export const Showcase = ShowcaseTemplate.bind({});
 Showcase.parameters = {
     // Strict mode ruins sortable list due to this react-beautiful-dnd issue

src/components/List/components/SimpleContainer.tsx

@@ -8,15 +8,12 @@ import type {ListItem} from './ListItem';
 export type SimpleContainerProps = React.PropsWithChildren<{
     itemCount: number;
     provided?: DroppableProvided;
-    sortable?: boolean;
 }>;
 
 type RefsList = Record<number, React.RefObject<ListItem>>;
 
 export type SimpleContainerState = {
     refsList: RefsList;
-    minWidth?: number;
-    minHeight?: number;
 };
 
 function getRefs(count: number) {
@@ -50,24 +47,12 @@ export class SimpleContainer extends React.Component<SimpleContainerProps, Simpl
         };
     }
 
-    componentDidMount() {
-        if (this.node && this.props.sortable) {
-            const {width, height} = this.node.getBoundingClientRect();
-            this.setState({minWidth: width, minHeight: height});
-        }
-    }
-
     render() {
-        const {minWidth, minHeight} = this.state;
         const children = React.Children.map(this.props.children, (child, index) =>
             React.cloneElement(child as React.ReactElement, {ref: this.state.refsList[index]}),
         );
 
-        return (
-            <div ref={this.setRef} style={{minWidth, minHeight}}>
-                {children}
-            </div>
-        );
+        return <div ref={this.setRef}>{children}</div>;
     }
 
     scrollToItem(index: number) {

src/components/Pagination/__stories__/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {Meta, Story} from '@storybook/react';
+import type {Meta, StoryFn} from '@storybook/react';
 
 import {Pagination} from '../../Pagination';
 import type {PaginationProps} from '../../Pagination';
@@ -23,7 +23,7 @@ export default {
     component: Pagination,
 } as Meta;
 
-const Template: Story<PaginationProps> = (args) => {
+const Template: StoryFn<PaginationProps> = (args) => {
     const state = useState(args);
     return <Pagination {...state} />;
 };
@@ -38,7 +38,7 @@ Default.args = {
     compact: false,
 };
 
-const TotalUnknownTemplate: Story<PaginationProps> = (args) => {
+const TotalUnknownTemplate: StoryFn<PaginationProps> = (args) => {
     const state = useState(args);
     return <Pagination {...state} />;
 };
@@ -52,7 +52,7 @@ TotalUnknown.args = {
     compact: false,
 };
 
-const CompactTemplate: Story<PaginationProps> = (args) => {
+const CompactTemplate: StoryFn<PaginationProps> = (args) => {
     const state = useState(args);
     return <Pagination {...state} />;
 };
@@ -66,7 +66,7 @@ Compact.args = {
     compact: true,
 };
 
-const HidePagesTemplate: Story<PaginationProps> = (args) => {
+const HidePagesTemplate: StoryFn<PaginationProps> = (args) => {
     const state1 = useState({
         ...args,
         page: 1,
@@ -98,7 +98,7 @@ const HidePagesTemplate: Story<PaginationProps> = (args) => {
 
 export const HidePages = HidePagesTemplate.bind({});
 
-const PagesSetTemplate: Story<PaginationProps> = (args) => {
+const PagesSetTemplate: StoryFn<PaginationProps> = (args) => {
     const state1 = useState({...args, page: 1, pageSize: 1, total: 1});
     const state2 = useState({...args, page: 1, pageSize: 1, total: 2});
     const state3 = useState({...args, page: 1, pageSize: 1, total: 3});