refactor(mobile): after rebase

Author: iapolya

demo/stories/mobile-editor/MobileEditor.tsx

@@ -1,6 +1,5 @@
 import {memo} from 'react';
 
-import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 import cloneDeep from 'lodash/cloneDeep';
 
 import {
@@ -42,7 +41,6 @@ export const MobileEditor = memo(() => {
                     stickyToolbar
                     settingsVisible
                     editor={editor}
-                    toaster={toaster}
                     className={className}
                     mobile
                 />

src/bundle/SelectPopup.tsx

@@ -4,10 +4,9 @@ import {Popup, PopupProps, Sheet} from '@gravity-ui/uikit';
 
 import {cn} from '../classname';
 
-export type SelectPopupProps = Pick<PopupProps, 'placement' | 'open' | 'anchorRef'> & {
+export type SelectPopupProps = Pick<PopupProps, 'placement' | 'open' | 'anchorElement'> & {
     children: ReactNode;
     mobile?: boolean;
-    buttonRef?: PopupProps['anchorRef'];
     onClose?: () => void;
 };
 
@@ -19,7 +18,7 @@ export const SelectPopup: FC<SelectPopupProps> = ({
     mobile,
     children,
     onClose,
-    anchorRef,
+    anchorElement,
     placement,
     open = false,
 }) => {
@@ -32,7 +31,12 @@ export const SelectPopup: FC<SelectPopupProps> = ({
     }
 
     return (
-        <Popup anchorRef={anchorRef} open={open} onClose={onClose} placement={placement}>
+        <Popup
+            anchorElement={anchorElement}
+            open={open}
+            onOpenChange={onClose}
+            placement={placement}
+        >
             {children}
         </Popup>
     );

src/bundle/settings/index.tsx

@@ -10,7 +10,6 @@ import {
     HelpMark,
     Icon,
     Menu,
-    Popup,
     type PopupPlacement,
 } from '@gravity-ui/uikit';
 
@@ -90,7 +89,7 @@ export const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(
                         mobile={mobile}
                         open={popupShown}
                         onClose={hidePopup}
-                        anchorRef={chevronElement}
+                        anchorElement={chevronElement}
                         placement={placement}
                     >
                         <SettingsContent

src/toolbar/PreviewTooltip.tsx

@@ -11,14 +11,15 @@ const b = cn('preview-tooltip');
 type PreviewTooltipProps = {
     preview?: React.ReactNode;
     children: React.ReactElement;
+    mobile?: boolean;
 };
 
-export const PreviewTooltip: React.FC<PreviewTooltipProps> = ({preview, children}) => {
+export const PreviewTooltip: React.FC<PreviewTooltipProps> = ({preview, children, mobile}) => {
     return (
         <Tooltip
             placement="right"
             className={b()}
-            disabled={!preview}
+            disabled={!preview || mobile}
             openDelay={ToolbarTooltipDelay.Open}
             closeDelay={ToolbarTooltipDelay.Close}
             content={<div className={b('content')}>{preview}</div>}

src/toolbar/ToolbarListButton.tsx

@@ -1,16 +1,7 @@
 import {Fragment, useEffect, useState} from 'react';
 
 import {ChevronDown} from '@gravity-ui/icons';
-import {
-    ActionTooltip,
-    Button,
-    HelpMark,
-    Hotkey,
-    Icon,
-    Menu,
-    Popover,
-    Popup,
-} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, HelpMark, Hotkey, Icon, Menu, Popover} from '@gravity-ui/uikit';
 
 import {SelectPopup} from '../bundle/SelectPopup';
 import {cn} from '../classname';
@@ -110,7 +101,12 @@ export function ToolbarListButton<E>({
                     </Button>
                 </ActionTooltip>
             </Popover>
-            <SelectPopup mobile={mobile} open={popupOpen} onClose={hide} buttonRef={anchorElement}>
+            <SelectPopup
+                mobile={mobile}
+                open={popupOpen}
+                onClose={hide}
+                anchorElement={anchorElement}
+            >
                 <Menu size="l" className={b('menu')}>
                     {data
                         .map((data) => {
@@ -132,9 +128,7 @@ export function ToolbarListButton<E>({
 
                             const disabled = !isEnable(editor);
 
-                            const hideHintWhenDisabled =
-                                mobile || hintWhenDisabled === false || !disabled;
-
+                            const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;
                             const hintWhenDisabledText =
                                 typeof hintWhenDisabled === 'string'
                                     ? hintWhenDisabled
@@ -169,7 +163,7 @@ export function ToolbarListButton<E>({
                                     key={id}
                                 >
                                     {(props, ref) => (
-                                        <PreviewTooltip preview={preview}>
+                                        <PreviewTooltip preview={preview} mobile>
                                             <Menu.Item
                                                 key={id}
                                                 ref={ref}
@@ -186,17 +180,19 @@ export function ToolbarListButton<E>({
                                             >
                                                 <div className={b('item')}>
                                                     {titleText}
-                                                    <div className={b('extra')}>
-                                                        {hotkey && <Hotkey value={hotkey} />}
-                                                        {hintText && (
-                                                            <HelpMark
-                                                                className={b('hint')}
-                                                                popoverProps={{modal: false}}
-                                                            >
-                                                                {hintText}
-                                                            </HelpMark>
-                                                        )}
-                                                    </div>
+                                                    {!mobile && (
+                                                        <div className={b('extra')}>
+                                                            {hotkey && <Hotkey value={hotkey} />}
+                                                            {hintText && (
+                                                                <HelpMark
+                                                                    className={b('hint')}
+                                                                    popoverProps={{modal: false}}
+                                                                >
+                                                                    {hintText}
+                                                                </HelpMark>
+                                                            )}
+                                                        </div>
+                                                    )}
                                                 </div>
                                             </Menu.Item>
                                         </PreviewTooltip>