feat!: update uikit@7, components@3

package.json

@@ -52,13 +52,13 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@doc-tools/transform": "^3.11.0",
-    "@gravity-ui/components": "^3.0.0",
+    "@gravity-ui/components": "^4.0.0-beta.3",
     "@gravity-ui/eslint-config": "^3.3.0",
     "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/prettier-config": "^1.0.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.15.0",
+    "@gravity-ui/uikit": "^7.0.0-beta.5",
     "@playwright/experimental-ct-react": "^1.49.1",
     "@playwright/test": "^1.49.1",
     "@rollup/plugin-commonjs": "^28.0.2",
@@ -110,9 +110,9 @@
   },
   "peerDependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/components": "^3.0.0",
+    "@gravity-ui/components": "^4.0.0-beta.3",
     "@gravity-ui/icons": "^2.2.0",
-    "@gravity-ui/uikit": "^6.15.0",
+    "@gravity-ui/uikit": "^7.0.0-beta.5",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },

src/components/ActionBar/Group/ActionBarGroup.scss

@@ -10,6 +10,8 @@ $block: '.#{variables.$ns}action-bar-group';
     flex-flow: row nowrap;
     align-items: center;
     justify-content: flex-start;
+    flex-grow: 1;
+
     margin: 0;
     padding: 0;
 }

src/components/ActionBar/README.md

@@ -12,13 +12,13 @@ function Page() {
   return (
     <ActionBar aria-label="Actions bar">
       <ActionBar.Section>
-        <ActionBar.Group>
+        <ActionBar.Group pull="left">
           <ActionBar.Item>
-            <Breadcrumbs
-              lastDisplayedItemsCount={1}
-              firstDisplayedItemsCount={1}
-              items={[{text: 'Root Item', action() {}}]}
-            />
+            <Breadcrumbs showRoot={true} onAction={(id) => alert(id)}>
+              <Breadcrumbs.Item href="/" key="1">
+                Root Item
+              </Breadcrumbs.Item>
+            </Breadcrumbs>
           </ActionBar.Item>
         </ActionBar.Group>
 
@@ -74,14 +74,14 @@ import {ActionBar} from '@gravity-ui/navigation';
   <ActionBar.Section type="primary">
     <ActionBar.Group>
       <ActionBar.Item>
-        <Breadcrumbs
-          lastDisplayedItemsCount={1}
-          firstDisplayedItemsCount={1}
-          items={[
-            {text: 'Wiki Main Page', action() {}},
-            {text: 'Wiki Article', action() {}},
-          ]}
-        />
+        <Breadcrumbs onAction={(id) => alert(id)}>
+          <Breadcrumbs.Item href="/" key="1">
+            Wiki Main Page
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item href="/" key="2">
+            Wiki Article
+          </Breadcrumbs.Item>
+        </Breadcrumbs>
       </ActionBar.Item>
     </ActionBar.Group>
   </ActionBar.Section>
@@ -106,7 +106,7 @@ Group few `ActionBar.Item`.
 
 #### `pull`
 
-Move group to `left`, `right` or `center`.
+Move group to `left`, `left-grow`, `right`, `right-grow` or `center`, `center-grow`.
 
 #### `className`
 

src/components/ActionBar/__stories__/ActionBarShowcase.tsx

@@ -25,17 +25,15 @@ export function ActionBarShowcase() {
                 </ActionBar.Group>
             </ActionBar.Section>
             <ActionBar.Section type="primary">
-                <ActionBar.Group pull="left">
-                    <ActionBar.Item>
-                        <Breadcrumbs
-                            lastDisplayedItemsCount={1}
-                            items={[
-                                {text: 'Projects', action() {}},
-                                {text: '@gravity-ui', action() {}},
-                                {text: 'navigation', action() {}},
-                            ]}
-                            firstDisplayedItemsCount={1}
-                        />
+                <ActionBar.Group pull="left-grow">
+                    <ActionBar.Item pull="left-grow">
+                        <Breadcrumbs showRoot={true} onAction={(id) => alert(id)}>
+                            <Breadcrumbs.Item href="/" key="1">
+                                Projects
+                            </Breadcrumbs.Item>
+                            <Breadcrumbs.Item key="2">@gravity-ui</Breadcrumbs.Item>
+                            <Breadcrumbs.Item key="3">navigation</Breadcrumbs.Item>
+                        </Breadcrumbs>
                     </ActionBar.Item>
                 </ActionBar.Group>
 

src/components/ActionBar/__stories__/ActionBarSingleSection.tsx

@@ -8,16 +8,16 @@ export function ActionBarSingleSection() {
     return (
         <ActionBar>
             <ActionBar.Section type="primary">
-                <ActionBar.Group>
-                    <ActionBar.Item>
-                        <Breadcrumbs
-                            lastDisplayedItemsCount={1}
-                            items={[
-                                {text: 'Devtools Support', action() {}},
-                                {text: 'DEVTOOLSSUPPORT-21001', action() {}},
-                            ]}
-                            firstDisplayedItemsCount={1}
-                        />
+                <ActionBar.Group pull="left">
+                    <ActionBar.Item pull="left-grow">
+                        <Breadcrumbs showRoot={true} onAction={(id) => alert(id)}>
+                            <Breadcrumbs.Item href="/" key="1">
+                                Devtools Support
+                            </Breadcrumbs.Item>
+                            <Breadcrumbs.Item href="/" key="2">
+                                DEVTOOLSSUPPORT-21001
+                            </Breadcrumbs.Item>
+                        </Breadcrumbs>
                     </ActionBar.Item>
 
                     <ActionBar.Item spacing={false}>

src/components/ActionBar/mixins/pull.scss

@@ -3,32 +3,47 @@
         left: 0;
         right: auto;
     }
+    justify-content: flex-start;
 }
 
 @mixin right {
     margin: {
         left: auto;
         right: 0;
     }
+    justify-content: flex-end;
 }
 
 @mixin center {
     margin: {
         left: auto;
         right: auto;
     }
+    justify-content: center;
 }
 
 @mixin modifiers {
     &_pull_left {
         @include left;
+
+        &-grow {
+            flex-grow: 1;
+        }
     }
 
     &_pull_right {
         @include right;
+
+        &-grow {
+            flex-grow: 1;
+        }
     }
 
     &_pull_center {
         @include center;
+
+        &-grow {
+            flex-grow: 1;
+        }
     }
 }

src/components/ActionBar/types.ts

@@ -1,3 +1,3 @@
 export type PropsWithPull<T> = T & {
-    pull?: 'left' | 'right' | 'center';
+    pull?: 'left' | 'left-grow' | 'right' | 'right-grow' | 'center' | 'center-grow';
 };

src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss

@@ -89,9 +89,6 @@ body {
 
         opacity: 70%;
     }
-    &__popup-content-class-name {
-        border-radius: 16px;
-    }
 }
 
 .composite-bar-showcase__tag {

src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx

@@ -7,7 +7,7 @@ import {
     Icon,
     Modal,
     Radio,
-    RadioButton,
+    SegmentedRadioGroup,
     eventBroker,
 } from '@gravity-ui/uikit';
 
@@ -127,10 +127,9 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                         },
                         popupAnchor: ref,
                         popupPlacement: ['right-start'],
-                        popupOffset: [10, 10],
+                        popupOffset: {mainAxis: 10, crossAxis: 10},
                         popupVisible: subheaderPopupVisible,
                         onClosePopup: () => setSubheaderPopupVisible(false),
-                        popupContentClassName: b('popup-content-class-name'),
                         renderPopupContent: () => {
                             return (
                                 <div className={b('settings')}>
@@ -189,7 +188,7 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                             popupVisible={popupVisible}
                             popupAnchor={asideRef}
                             popupPlacement={['right-end']}
-                            popupOffset={[-20, 10]}
+                            popupOffset={{mainAxis: -20, crossAxis: 10}}
                             onClosePopup={() => setPopupVisible(false)}
                             popupKeepMounted={true}
                             renderPopupContent={() => {
@@ -254,15 +253,15 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                     return (
                         <div className={b('content')}>
                             <pre>{placeholderText}</pre>
-                            <RadioButton
+                            <SegmentedRadioGroup
                                 value={addonHeaderDecoration}
                                 onChange={(event) => {
                                     setHeaderDecoration(event.target.value);
                                 }}
                             >
                                 <Radio value={BOOLEAN_OPTIONS.No}>No</Radio>
                                 <Radio value={BOOLEAN_OPTIONS.Yes}>Yes</Radio>
-                            </RadioButton>
+                            </SegmentedRadioGroup>
                             <br />
                             <br />
                             <Button onClick={() => setIsModalOpen(true)}>Open Modal</Button>

src/components/CompositeBar/Item/Item.tsx

@@ -21,13 +21,26 @@ const b = block('composite-bar-item');
 
 interface ItemPopup {
     popupVisible?: PopupProps['open'];
+    /**
+     * floating element anchor ref object
+     *
+     * @deprecated Use `popupAnchorElement` instead
+     * */
     popupAnchor?: PopupProps['anchorRef'];
+    popupAnchorElement?: PopupProps['anchorElement'];
     popupPlacement?: PopupProps['placement'];
     popupOffset?: PopupProps['offset'];
     popupKeepMounted?: PopupProps['keepMounted'];
-    popupContentClassName?: PopupProps['contentClassName'];
     renderPopupContent?: () => React.ReactNode;
+    /**
+     * This callback will be called when Escape key pressed on keyboard, or click outside was made
+     * This behaviour could be disabled with `disableEscapeKeyDown`
+     * and `disableOutsideClick` options
+     *
+     * @deprecated Use `onOpenChangePopup` instead
+     */
     onClosePopup?: () => void;
+    onOpenChangePopup?: PopupProps['onOpenChange'];
 }
 
 export interface ItemProps extends ItemPopup {
@@ -66,7 +79,7 @@ function renderItemTitle(item: MenuItem) {
 }
 
 export const defaultPopupPlacement: PopupPlacement = ['right-end'];
-export const defaultPopupOffset: NonNullable<PopupProps['offset']> = [-20, 8];
+export const defaultPopupOffset: NonNullable<PopupProps['offset']> = {mainAxis: -20, crossAxis: 8};
 
 export const Item: React.FC<ItemInnerProps> = (props) => {
     const {
@@ -78,12 +91,13 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
         enableTooltip = true,
         popupVisible = false,
         popupAnchor,
+        popupAnchorElement,
         popupPlacement = defaultPopupPlacement,
         popupOffset = defaultPopupOffset,
         popupKeepMounted,
-        popupContentClassName,
         renderPopupContent,
         onClosePopup,
+        onOpenChangePopup,
         onItemClick,
         onItemClickCapture,
         onCollapseItemClick,
@@ -95,7 +109,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
     const [open, toggleOpen] = React.useState<boolean>(false);
 
     const ref = React.useRef<HTMLAnchorElement & HTMLButtonElement>(null);
-    const anchorRef = popupAnchor || ref;
+    const anchorRef = popupAnchorElement ? {current: popupAnchorElement} : popupAnchor || ref;
     const highlightedRef = React.useRef<HTMLDivElement>(null);
 
     const type = item.type || ITEM_TYPE_REGULAR;
@@ -106,20 +120,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
     const iconQa = item.iconQa;
     const collapsedItem = item.id === COLLAPSE_ITEM_ID;
 
-    const modifiers: Required<PopupProps>['modifiers'] = React.useMemo(
-        () => [
-            {
-                name: 'compact',
-                enabled: true,
-                options: {compact},
-                phase: 'main',
-                fn() {},
-            },
-        ],
-        [compact],
-    );
-
-    const onClose = React.useCallback(
+    const handleClosePopup = React.useCallback(
         (event: MouseEvent | KeyboardEvent) => {
             if (
                 event instanceof MouseEvent &&
@@ -209,14 +210,13 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
                 </Tag>
                 {renderPopupContent && Boolean(anchorRef?.current) && (
                     <Popup
-                        contentClassName={b('popup', popupContentClassName)}
                         open={popupVisible}
                         keepMounted={popupKeepMounted}
                         placement={popupPlacement}
                         offset={popupOffset}
                         anchorRef={anchorRef}
-                        onClose={onClose}
-                        modifiers={modifiers}
+                        onClose={handleClosePopup}
+                        onOpenChange={onOpenChangePopup}
                     >
                         {renderPopupContent()}
                     </Popup>

src/components/CompositeBar/MultipleTooltip/MultipleTooltip.tsx

@@ -12,13 +12,7 @@ import './MultipleTooltip.scss';
 
 const b = block('multiple-tooltip');
 
-const POPUP_OFFSET: PopupProps['offset'] = [-32, 4];
-const POPUP_MODIFIERS: PopupProps['modifiers'] = [
-    {
-        name: 'preventOverflow',
-        enabled: false,
-    },
-];
+const POPUP_OFFSET: PopupProps['offset'] = {mainAxis: -32, crossAxis: 4};
 
 export type MultipleTooltipProps = Pick<PopupProps, 'open' | 'anchorRef' | 'placement'> & {
     items: MenuItem[];
@@ -34,16 +28,8 @@ export const MultipleTooltip: React.FC<MultipleTooltipProps> = ({
     const activeItem = activeIndex === undefined ? null : items[activeIndex];
 
     return (
-        <Popup
-            open={open}
-            anchorRef={anchorRef}
-            placement={placement}
-            offset={POPUP_OFFSET}
-            contentClassName={b(null)}
-            modifiers={POPUP_MODIFIERS}
-            disableLayer
-        >
-            <div className={b('items-container')}>
+        <Popup open={open} anchorRef={anchorRef} placement={placement} offset={POPUP_OFFSET}>
+            <div className={b()}>
                 {items
                     .filter(
                         ({type = 'regular', id}) =>