@gravity-ui/markdown-editor 15.25.0 → 15.26.1

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/Checkbox/CheckboxSpecs/schema.ts"],"names":[],"mappings":"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","sourcesContent":["import {Fragment, type NodeSpec} from 'prosemirror-model';\n\nimport type {PlaceholderOptions} from '../../../../utils/placeholder';\n\nimport {CheckboxAttr, CheckboxNode, b, checkboxInputType, checkboxLabelType} from './const';\n\nimport type {CheckboxSpecsOptions} from './index';\n\nconst DEFAULT_LABEL_PLACEHOLDER = 'Checkbox';\n\nexport const getSchemaSpecs = (\n    opts?: Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'>,\n    placeholder?: PlaceholderOptions,\n): Record<CheckboxNode, NodeSpec> => ({\n    [CheckboxNode.Checkbox]: {\n        group: 'block checkbox',\n        content: `${CheckboxNode.Input} ${CheckboxNode.Label}`,\n        selectable: true,\n        allowSelection: false,\n        attrs: {\n            [CheckboxAttr.Class]: {default: b()},\n            [CheckboxAttr.Line]: {default: null},\n        },\n        parseDOM: [\n            {\n                tag: 'div.checkbox',\n                priority: 100,\n                getContent(node, schema) {\n                    const input = (node as HTMLElement).querySelector<HTMLInputElement>(\n                        'input[type=checkbox]',\n                    );\n                    const label = (node as HTMLElement).querySelector<HTMLLabelElement>(\n                        'label[for]',\n                    );\n\n                    const checked = input?.checked ? 'true' : null;\n                    const text = label?.textContent;\n\n                    return Fragment.from([\n                        checkboxInputType(schema).create({[CheckboxAttr.Checked]: checked}),\n                        checkboxLabelType(schema).create(null, text ? schema.text(text) : null),\n                    ]);\n                },\n            },\n            {\n                tag: 'input[type=checkbox]',\n                priority: 50,\n                getContent(node, schema) {\n                    const id = (node as HTMLElement).id;\n                    const checked = (node as HTMLInputElement).checked ? 'true' : null;\n                    const text = node.parentNode?.querySelector<HTMLLabelElement>(\n                        `label[for=${id}]`,\n                    )?.textContent;\n\n                    return Fragment.from([\n                        checkboxInputType(schema).create({[CheckboxAttr.Checked]: checked}),\n                        checkboxLabelType(schema).create(null, text ? schema.text(text) : null),\n                    ]);\n                },\n            },\n        ],\n        toDOM(node) {\n            return ['div', node.attrs, 0];\n        },\n        complex: 'root',\n    },\n\n    [CheckboxNode.Input]: {\n        group: 'block checkbox',\n        parseDOM: [],\n        attrs: {\n            [CheckboxAttr.Type]: {default: 'checkbox'},\n            [CheckboxAttr.Id]: {default: null},\n            [CheckboxAttr.Checked]: {default: null},\n        },\n        toDOM(node) {\n            return ['div', node.attrs];\n        },\n        selectable: false,\n        allowSelection: false,\n        complex: 'leaf',\n    },\n\n    [CheckboxNode.Label]: {\n        content: 'inline*',\n        group: 'block checkbox',\n        parseDOM: [\n            {\n                tag: `span[class=\"${b('label')}\"]`,\n                getAttrs: (node) => ({\n                    [CheckboxAttr.For]: (node as Element).getAttribute(CheckboxAttr.For) || '',\n                }),\n            },\n            {\n                // input handled by checkbox node parse rule\n                // ignore label\n                tag: 'input[type=checkbox] ~ label[for]',\n                ignore: true,\n                consuming: true,\n            },\n        ],\n        attrs: {\n            [CheckboxAttr.For]: {default: null},\n        },\n        escapeText: false,\n        placeholder: {\n            content:\n                placeholder?.[CheckboxNode.Label] ??\n                opts?.checkboxLabelPlaceholder ??\n                DEFAULT_LABEL_PLACEHOLDER,\n            alwaysVisible: true,\n        },\n        toDOM(node) {\n            return ['span', {...node.attrs, class: b('label')}, 0];\n        },\n        selectable: false,\n        allowSelection: false,\n        disableGapCursor: true,\n        complex: 'leaf',\n    },\n});\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"../../../../../../src","sources":["extensions/yfm/Checkbox/CheckboxSpecs/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAA6B,MAAM,mBAAmB,CAAC;AAIvE,OAAO,EAAC,YAAY,EAAE,YAAY,EAAE,CAAC,EAAE,iBAAiB,EAAE,iBAAiB,EAAC,mBAAgB;AAI5F,MAAM,yBAAyB,GAAG,UAAU,CAAC;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,CAC1B,IAA6D,EAC7D,WAAgC,EACF,EAAE,CAAC,CAAC;IAClC,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;QACrB,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,GAAG,YAAY,CAAC,KAAK,IAAI,YAAY,CAAC,KAAK,EAAE;QACtD,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,KAAK;QACrB,KAAK,EAAE;YACH,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAC,OAAO,EAAE,CAAC,EAAE,EAAC;YACpC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;SACvC;QACD,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,cAAc;gBACnB,QAAQ,EAAE,GAAG;gBACb,UAAU,CAAC,IAAI,EAAE,MAAM;oBACnB,IAAI,IAAI,YAAY,WAAW,EAAE,CAAC;wBAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAmB,sBAAsB,CAAC,CAAC;wBAE3E,IAAI,KAAK,IAAI,KAAK,YAAY,gBAAgB,EAAE,CAAC;4BAC7C,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;4BACvC,OAAO,sBAAsB,CACzB,MAAM,EACN,KAAK,CAAC,OAAO,EACb,KAAK,EAAE,WAAW,CACrB,CAAC;wBACN,CAAC;oBACL,CAAC;oBACD,OAAO,QAAQ,CAAC,KAAK,CAAC;gBAC1B,CAAC;aACJ;YACD;gBACI,GAAG,EAAE,sBAAsB;gBAC3B,QAAQ,EAAE,EAAE;gBACZ,UAAU,CAAC,KAAK,EAAE,MAAM;oBACpB,IAAI,KAAK,YAAY,gBAAgB,EAAE,CAAC;wBACpC,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;wBACvC,OAAO,sBAAsB,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;oBAC7E,CAAC;oBACD,OAAO,QAAQ,CAAC,KAAK,CAAC;gBAC1B,CAAC;aACJ;SACJ;QACD,KAAK,CAAC,IAAI;YACN,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAClC,CAAC;QACD,OAAO,EAAE,MAAM;KAClB;IAED,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;QAClB,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE;YACH,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAC,OAAO,EAAE,UAAU,EAAC;YAC1C,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;YAClC,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;SAC1C;QACD,KAAK,CAAC,IAAI;YACN,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;QACD,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;KAClB;IAED,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;QAClB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,eAAe,CAAC,CAAC,OAAO,CAAC,IAAI;gBAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACjB,CAAC,YAAY,CAAC,GAAG,CAAC,EAAG,IAAgB,CAAC,YAAY,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE;iBAC7E,CAAC;aACL;YACD;gBACI,4CAA4C;gBAC5C,eAAe;gBACf,GAAG,EAAE,8BAA8B;gBACnC,MAAM,EAAE,IAAI;gBACZ,SAAS,EAAE,IAAI;aAClB;SACJ;QACD,KAAK,EAAE;YACH,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC;SACtC;QACD,UAAU,EAAE,KAAK;QACjB,WAAW,EAAE;YACT,OAAO,EACH,WAAW,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC;gBACjC,IAAI,EAAE,wBAAwB;gBAC9B,yBAAyB;YAC7B,aAAa,EAAE,IAAI;SACtB;QACD,KAAK,CAAC,IAAI;YACN,OAAO,CAAC,MAAM,EAAE,EAAC,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EAAC,EAAE,CAAC,CAAC,CAAC;QAC3D,CAAC;QACD,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,IAAI;QACtB,OAAO,EAAE,MAAM;KAClB;CACJ,CAAC,CAAC;AAEH,mEAAmE;AACnE,SAAS,oBAAoB,CAAC,OAAyB;IACnD,MAAM,WAAW,GAAG,OAAO,CAAC,kBAAkB,CAAC;IAC/C,OAAO,WAAW,YAAY,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACxE,CAAC;AAED,SAAS,iBAAiB,CAAC,OAAyB;IAChD,OAAO,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAChE,CAAC;AAED,SAAS,sBAAsB,CAC3B,MAAwB,EACxB,OAAuB,EACvB,SAAoC;IAEpC,OAAO,QAAQ,CAAC,IAAI,CAAC;QACjB,iBAAiB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAC,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAC,CAAC;QACnF,iBAAiB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;KACpF,CAAC,CAAC;AACP,CAAC","sourcesContent":["import {Fragment, type NodeSpec, type Schema} from 'prosemirror-model';\n\nimport type {PlaceholderOptions} from '../../../../utils/placeholder';\n\nimport {CheckboxAttr, CheckboxNode, b, checkboxInputType, checkboxLabelType} from './const';\n\nimport type {CheckboxSpecsOptions} from './index';\n\nconst DEFAULT_LABEL_PLACEHOLDER = 'Checkbox';\n\nexport const getSchemaSpecs = (\n    opts?: Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'>,\n    placeholder?: PlaceholderOptions,\n): Record<CheckboxNode, NodeSpec> => ({\n    [CheckboxNode.Checkbox]: {\n        group: 'block checkbox',\n        content: `${CheckboxNode.Input} ${CheckboxNode.Label}`,\n        selectable: true,\n        allowSelection: false,\n        attrs: {\n            [CheckboxAttr.Class]: {default: b()},\n            [CheckboxAttr.Line]: {default: null},\n        },\n        parseDOM: [\n            {\n                tag: 'div.checkbox',\n                priority: 100,\n                getContent(node, schema) {\n                    if (node instanceof HTMLElement) {\n                        const input = node.querySelector<HTMLInputElement>('input[type=checkbox]');\n\n                        if (input && input instanceof HTMLInputElement) {\n                            const label = findLabelForInput(input);\n                            return createCheckboxFragment(\n                                schema,\n                                input.checked,\n                                label?.textContent,\n                            );\n                        }\n                    }\n                    return Fragment.empty;\n                },\n            },\n            {\n                tag: 'input[type=checkbox]',\n                priority: 50,\n                getContent(input, schema) {\n                    if (input instanceof HTMLInputElement) {\n                        const label = findLabelForInput(input);\n                        return createCheckboxFragment(schema, input.checked, label?.textContent);\n                    }\n                    return Fragment.empty;\n                },\n            },\n        ],\n        toDOM(node) {\n            return ['div', node.attrs, 0];\n        },\n        complex: 'root',\n    },\n\n    [CheckboxNode.Input]: {\n        group: 'block checkbox',\n        parseDOM: [],\n        attrs: {\n            [CheckboxAttr.Type]: {default: 'checkbox'},\n            [CheckboxAttr.Id]: {default: null},\n            [CheckboxAttr.Checked]: {default: null},\n        },\n        toDOM(node) {\n            return ['div', node.attrs];\n        },\n        selectable: false,\n        allowSelection: false,\n        complex: 'leaf',\n    },\n\n    [CheckboxNode.Label]: {\n        content: 'inline*',\n        group: 'block checkbox',\n        parseDOM: [\n            {\n                tag: `span[class=\"${b('label')}\"]`,\n                getAttrs: (node) => ({\n                    [CheckboxAttr.For]: (node as Element).getAttribute(CheckboxAttr.For) || '',\n                }),\n            },\n            {\n                // input handled by checkbox node parse rule\n                // ignore label\n                tag: 'input[type=checkbox] ~ label',\n                ignore: true,\n                consuming: true,\n            },\n        ],\n        attrs: {\n            [CheckboxAttr.For]: {default: null},\n        },\n        escapeText: false,\n        placeholder: {\n            content:\n                placeholder?.[CheckboxNode.Label] ??\n                opts?.checkboxLabelPlaceholder ??\n                DEFAULT_LABEL_PLACEHOLDER,\n            alwaysVisible: true,\n        },\n        toDOM(node) {\n            return ['span', {...node.attrs, class: b('label')}, 0];\n        },\n        selectable: false,\n        allowSelection: false,\n        disableGapCursor: true,\n        complex: 'leaf',\n    },\n});\n\n// fallback for invalid HTML (input without id + label without for)\nfunction findNextSiblingLabel(element: HTMLInputElement): HTMLLabelElement | null {\n    const nextSibling = element.nextElementSibling;\n    return nextSibling instanceof HTMLLabelElement ? nextSibling : null;\n}\n\nfunction findLabelForInput(element: HTMLInputElement): HTMLLabelElement | null {\n    return element.labels?.[0] || findNextSiblingLabel(element);\n}\n\nfunction createCheckboxFragment(\n    schema: Schema<any, any>,\n    checked: boolean | null,\n    labelText: string | null | undefined,\n): Fragment {\n    return Fragment.from([\n        checkboxInputType(schema).create({[CheckboxAttr.Checked]: checked ? 'true' : null}),\n        checkboxLabelType(schema).create(null, labelText ? schema.text(labelText) : null),\n    ]);\n}\n"]}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.d.ts

@@ -1,8 +1,9 @@
 import { type ButtonButtonProps, type DropdownMenuProps } from '@gravity-ui/uikit';
+import { type ReferenceType } from "../FloatingPopup/index.js";
 export type FloatingMenuProps = {
     dirtype: 'row' | 'column';
     canDrag: boolean;
-    anchorElement: Element;
+    anchorElement: ReferenceType;
     dropdownItems: DropdownMenuProps<unknown>['items'];
     switcherMouseProps?: Pick<ButtonButtonProps, 'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'>;
     onOpenToggle: NonNullable<DropdownMenuProps<unknown>['onOpenToggle']>;

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingMenu.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useState} from 'react';\n\nimport {Ellipsis as DotsColumn, GripHorizontal as GripColumn} from '@gravity-ui/icons';\nimport {\n    Button,\n    type ButtonButtonProps,\n    DropdownMenu,\n    type DropdownMenuProps,\n    Flex,\n    Icon,\n} from '@gravity-ui/uikit';\n\nimport {useBooleanState} from 'src/react-utils';\n\nimport {FloatingPopup, type FloatingPopupProps} from '../FloatingPopup';\n\nconst popupOffset: FloatingPopupProps['offset'] = {\n    mainAxis: -9.5,\n};\n\nexport type FloatingMenuProps = {\n    dirtype: 'row' | 'column';\n    canDrag: boolean;\n    anchorElement: Element;\n    dropdownItems: DropdownMenuProps<unknown>['items'];\n    switcherMouseProps?: Pick<\n        ButtonButtonProps,\n        'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'\n    >;\n    onOpenToggle: NonNullable<DropdownMenuProps<unknown>['onOpenToggle']>;\n};\n\nexport const FloatingMenu: React.FC<FloatingMenuProps> = function YfmTableFloatingMenu(props) {\n    const {dirtype, canDrag, anchorElement, dropdownItems, switcherMouseProps, onOpenToggle} =\n        props;\n\n    const [isMenuOpened, setMenuOpened] = useState(false);\n    const [isHovered, setHovered, unsetHovered] = useBooleanState(false);\n\n    const showActionView = isMenuOpened || isHovered;\n    const isRowType = dirtype === 'row';\n\n    return (\n        <FloatingPopup\n            open\n            offset={popupOffset}\n            anchorElement={anchorElement}\n            placement={isRowType ? 'left' : 'top'}\n            floatingStyles={{\n                lineHeight: 'initial',\n            }}\n            style={{\n                backgroundColor: 'transparent',\n            }}\n        >\n            <DropdownMenu\n                onOpenToggle={(...args) => {\n                    setMenuOpened(...args);\n                    onOpenToggle(...args);\n                }}\n                renderSwitcher={(switcherProps) => (\n                    <Flex\n                        centerContent\n                        width={20} // xs button\n                        height={20} // xs button\n                        style={{\n                            borderRadius: 'var(--g-border-radius-xs)',\n                            backgroundColor: showActionView\n                                ? 'var(--g-color-base-background)'\n                                : undefined,\n                        }}\n                        onMouseEnter={setHovered}\n                        onMouseLeave={unsetHovered}\n                    >\n                        <Button\n                            style={{\n                                cursor: canDrag ? 'grab' : undefined,\n                                transform: isRowType ? 'rotate(90deg)' : undefined,\n                                '--g-button-height': showActionView ? undefined : '5px',\n                                '--_--background-color': showActionView\n                                    ? undefined\n                                    : 'var(--g-color-base-background)',\n                            }}\n                            view={isMenuOpened ? 'outlined-action' : 'outlined'}\n                            pin={showActionView ? 'round-round' : 'circle-circle'}\n                            size=\"xs\"\n                            qa={isRowType ? 'g-md-yfm-table-row-btn' : 'g-md-yfm-table-column-btn'}\n                            {...switcherProps}\n                            {...switcherMouseProps}\n                        >\n                            {showActionView ? (\n                                <Icon data={canDrag ? GripColumn : DotsColumn} />\n                            ) : (\n                                String.fromCharCode(8194) // en space\n                            )}\n                        </Button>\n                    </Flex>\n                )}\n                popupProps={{\n                    zIndex: 1010,\n                    placement: isRowType ? 'right-start' : 'bottom-start',\n                }}\n                menuProps={{qa: `g-md-yfm-table-${dirtype}-menu`}}\n                items={dropdownItems}\n            />\n        </FloatingPopup>\n    );\n};\n"]}
+{"version":3,"file":"FloatingMenu.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useState} from 'react';\n\nimport {Ellipsis as DotsColumn, GripHorizontal as GripColumn} from '@gravity-ui/icons';\nimport {\n    Button,\n    type ButtonButtonProps,\n    DropdownMenu,\n    type DropdownMenuProps,\n    Flex,\n    Icon,\n} from '@gravity-ui/uikit';\n\nimport {useBooleanState} from 'src/react-utils';\n\nimport {FloatingPopup, type FloatingPopupProps, type ReferenceType} from '../FloatingPopup';\n\nconst popupOffset: FloatingPopupProps['offset'] = {\n    mainAxis: -9.5,\n};\n\nexport type FloatingMenuProps = {\n    dirtype: 'row' | 'column';\n    canDrag: boolean;\n    anchorElement: ReferenceType;\n    dropdownItems: DropdownMenuProps<unknown>['items'];\n    switcherMouseProps?: Pick<\n        ButtonButtonProps,\n        'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'\n    >;\n    onOpenToggle: NonNullable<DropdownMenuProps<unknown>['onOpenToggle']>;\n};\n\nexport const FloatingMenu: React.FC<FloatingMenuProps> = function YfmTableFloatingMenu(props) {\n    const {dirtype, canDrag, anchorElement, dropdownItems, switcherMouseProps, onOpenToggle} =\n        props;\n\n    const [isMenuOpened, setMenuOpened] = useState(false);\n    const [isHovered, setHovered, unsetHovered] = useBooleanState(false);\n\n    const showActionView = isMenuOpened || isHovered;\n    const isRowType = dirtype === 'row';\n\n    return (\n        <FloatingPopup\n            open\n            offset={popupOffset}\n            anchorElement={anchorElement}\n            placement={isRowType ? 'left' : 'top'}\n            floatingStyles={{\n                lineHeight: 'initial',\n            }}\n            style={{\n                backgroundColor: 'transparent',\n            }}\n        >\n            <DropdownMenu\n                onOpenToggle={(...args) => {\n                    setMenuOpened(...args);\n                    onOpenToggle(...args);\n                }}\n                renderSwitcher={(switcherProps) => (\n                    <Flex\n                        centerContent\n                        width={20} // xs button\n                        height={20} // xs button\n                        style={{\n                            borderRadius: 'var(--g-border-radius-xs)',\n                            backgroundColor: showActionView\n                                ? 'var(--g-color-base-background)'\n                                : undefined,\n                        }}\n                        onMouseEnter={setHovered}\n                        onMouseLeave={unsetHovered}\n                    >\n                        <Button\n                            style={{\n                                cursor: canDrag ? 'grab' : undefined,\n                                transform: isRowType ? 'rotate(90deg)' : undefined,\n                                '--g-button-height': showActionView ? undefined : '5px',\n                                '--_--background-color': showActionView\n                                    ? undefined\n                                    : 'var(--g-color-base-background)',\n                            }}\n                            view={isMenuOpened ? 'outlined-action' : 'outlined'}\n                            pin={showActionView ? 'round-round' : 'circle-circle'}\n                            size=\"xs\"\n                            qa={isRowType ? 'g-md-yfm-table-row-btn' : 'g-md-yfm-table-column-btn'}\n                            {...switcherProps}\n                            {...switcherMouseProps}\n                        >\n                            {showActionView ? (\n                                <Icon data={canDrag ? GripColumn : DotsColumn} />\n                            ) : (\n                                String.fromCharCode(8194) // en space\n                            )}\n                        </Button>\n                    </Flex>\n                )}\n                popupProps={{\n                    zIndex: 1010,\n                    placement: isRowType ? 'right-start' : 'bottom-start',\n                }}\n                menuProps={{qa: `g-md-yfm-table-${dirtype}-menu`}}\n                items={dropdownItems}\n            />\n        </FloatingPopup>\n    );\n};\n"]}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.d.ts

@@ -1,9 +1,11 @@
 import type { DnDControlHandler } from "../../dnd/dnd.js";
 import { type FloatingMenuProps } from "../FloatingMenu/FloatingMenu.js";
+type ControlType = FloatingMenuProps['dirtype'];
 export type FloatingMenuControlProps = {
-    acnhorElement: Element;
+    cellElement: Element;
+    tableElement: Element;
     multiple: boolean;
-    type: FloatingMenuProps['dirtype'];
+    type: ControlType;
     dndHandler?: DnDControlHandler;
     onMenuOpenToggle: FloatingMenuProps['onOpenToggle'];
     onClearCellsClick: () => void;
@@ -13,3 +15,4 @@ export type FloatingMenuControlProps = {
     onRemoveTableClick: () => void;
 };
 export declare const FloatingMenuControl: React.FC<FloatingMenuControlProps>;
+export {};

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.js

@@ -4,7 +4,7 @@ import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, BroomMotion as ClearCells, T
 import { Icon } from '@gravity-ui/uikit';
 import { i18n } from "../../../../../../../i18n/yfm-table/index.js";
 import { FloatingMenu } from "../FloatingMenu/FloatingMenu.js";
-export const FloatingMenuControl = function YfmTableFloatingMenuControl({ type, multiple, dndHandler, acnhorElement, onMenuOpenToggle, onClearCellsClick, onInsertBeforeClick, onInsertAfterClick, onRemoveRangeClick, onRemoveTableClick, }) {
+export const FloatingMenuControl = function YfmTableFloatingMenuControl({ type, multiple, dndHandler, cellElement, tableElement, onMenuOpenToggle, onClearCellsClick, onInsertBeforeClick, onInsertAfterClick, onRemoveRangeClick, onRemoveTableClick, }) {
     const dropdownItems = useMemo(() => [
         [
             {
@@ -52,7 +52,8 @@ export const FloatingMenuControl = function YfmTableFloatingMenuControl({ type,
         onRemoveRangeClick,
         onRemoveTableClick,
     ]);
-    return (_jsx(FloatingMenu, { dirtype: type, canDrag: dndHandler ? dndHandler.canDrag() : false, onOpenToggle: onMenuOpenToggle, anchorElement: acnhorElement, switcherMouseProps: dndHandler
+    const anchor = useMemo(() => getVirtualAnchor(type, tableElement, cellElement), [type, tableElement, cellElement]);
+    return (_jsx(FloatingMenu, { dirtype: type, canDrag: dndHandler ? dndHandler.canDrag() : false, onOpenToggle: onMenuOpenToggle, anchorElement: anchor, switcherMouseProps: dndHandler
             ? {
                 onMouseLeave: dndHandler.control_handleMouseLeave,
                 onMouseDown: dndHandler.control_handleMouseDown,
@@ -61,4 +62,60 @@ export const FloatingMenuControl = function YfmTableFloatingMenuControl({ type,
             }
             : undefined, dropdownItems: dropdownItems }));
 };
+function getVirtualAnchor(type, tableElem, cellElem) {
+    if (type === 'row') {
+        return {
+            contextElement: cellElem,
+            getBoundingClientRect() {
+                const cellRect = cellElem.getBoundingClientRect();
+                const tableRect = tableElem.getBoundingClientRect().toJSON();
+                {
+                    // fix table rect
+                    tableRect.x += 1;
+                    tableRect.width -= 2;
+                    tableRect.left += 1;
+                    tableRect.right -= 1;
+                }
+                return {
+                    // from table
+                    x: tableRect.x,
+                    width: tableRect.width,
+                    left: tableRect.left,
+                    right: tableRect.right,
+                    // from cell
+                    y: cellRect.y,
+                    height: cellRect.height,
+                    top: cellRect.top,
+                    bottom: cellRect.top,
+                };
+            },
+        };
+    }
+    if (type === 'column') {
+        return {
+            contextElement: cellElem,
+            getBoundingClientRect() {
+                const cellRect = cellElem.getBoundingClientRect().toJSON();
+                const tableRect = tableElem.getBoundingClientRect();
+                const EDGE_OFFSET = 16;
+                const cellMiddle = cellRect.x + cellRect.width / 2;
+                // left border of table
+                if (cellMiddle - EDGE_OFFSET <= tableRect.left) {
+                    const visible = cellRect.right - tableRect.left;
+                    cellRect.width = (visible - EDGE_OFFSET) * 2;
+                    cellRect.left = cellRect.right - cellRect.width;
+                    cellRect.x = cellRect.left;
+                }
+                // right border of table
+                if (cellMiddle + EDGE_OFFSET >= tableRect.right) {
+                    const visible = tableRect.right - cellRect.left;
+                    cellRect.width = (visible - EDGE_OFFSET) * 2;
+                    cellRect.right = cellRect.left + cellRect.width;
+                }
+                return cellRect;
+            },
+        };
+    }
+    throw new Error(`Unknown control type: ${type}`);
+}
 //# sourceMappingURL=FloatingMenuControl.js.map

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingMenuControl.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useMemo} from 'react';\n\nimport {\n    ArrowDown,\n    ArrowLeft,\n    ArrowRight,\n    ArrowUp,\n    BroomMotion as ClearCells,\n    TrashBin,\n    Xmark,\n} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {i18n} from 'src/i18n/yfm-table';\n\nimport type {DnDControlHandler} from '../../dnd/dnd';\nimport {FloatingMenu, type FloatingMenuProps} from '../FloatingMenu/FloatingMenu';\n\nexport type FloatingMenuControlProps = {\n    acnhorElement: Element;\n    multiple: boolean;\n    type: FloatingMenuProps['dirtype'];\n    dndHandler?: DnDControlHandler;\n    onMenuOpenToggle: FloatingMenuProps['onOpenToggle'];\n    onClearCellsClick: () => void;\n    onInsertBeforeClick: () => void;\n    onInsertAfterClick: () => void;\n    onRemoveRangeClick: () => void;\n    onRemoveTableClick: () => void;\n};\n\nexport const FloatingMenuControl: React.FC<FloatingMenuControlProps> =\n    function YfmTableFloatingMenuControl({\n        type,\n        multiple,\n        dndHandler,\n        acnhorElement,\n        onMenuOpenToggle,\n        onClearCellsClick,\n        onInsertBeforeClick,\n        onInsertAfterClick,\n        onRemoveRangeClick,\n        onRemoveTableClick,\n    }) {\n        const dropdownItems = useMemo<FloatingMenuProps['dropdownItems']>(\n            () =>\n                [\n                    [\n                        {\n                            text: i18n(`${type}.add.before`),\n                            qa: `g-md-yfm-table-action-add-${type}-before`,\n                            action: onInsertBeforeClick,\n                            iconStart: <Icon data={type === 'row' ? ArrowUp : ArrowLeft} />,\n                        },\n                        {\n                            text: i18n(`${type}.add.after`),\n                            qa: `g-md-yfm-table-action-add-${type}-after`,\n                            action: onInsertAfterClick,\n                            iconStart: <Icon data={type === 'row' ? ArrowDown : ArrowRight} />,\n                        },\n                    ],\n                    [\n                        {\n                            text: i18n('cells.clear'),\n                            qa: `g-md-yfm-table-${type}-clear-cells`,\n                            action: onClearCellsClick,\n                            iconStart: <Icon data={ClearCells} />,\n                        },\n                    ],\n                    [\n                        {\n                            text: i18n(`${type}.remove${multiple ? '.multiple' : ''}`),\n                            qa: `g-md-yfm-table-action-remove-${type}`,\n                            action: onRemoveRangeClick,\n                            iconStart: <Icon data={Xmark} />,\n                        },\n                        {\n                            theme: 'danger',\n                            text: i18n('table.remove'),\n                            qa: 'g-md-yfm-table-action-remove-table',\n                            action: onRemoveTableClick,\n                            iconStart: <Icon data={TrashBin} />,\n                        },\n                    ],\n                ] satisfies FloatingMenuProps['dropdownItems'],\n            [\n                type,\n                multiple,\n                onClearCellsClick,\n                onInsertAfterClick,\n                onInsertBeforeClick,\n                onRemoveRangeClick,\n                onRemoveTableClick,\n            ],\n        );\n\n        return (\n            <FloatingMenu\n                dirtype={type}\n                canDrag={dndHandler ? dndHandler.canDrag() : false}\n                onOpenToggle={onMenuOpenToggle}\n                anchorElement={acnhorElement}\n                switcherMouseProps={\n                    dndHandler\n                        ? {\n                              onMouseLeave: dndHandler.control_handleMouseLeave,\n                              onMouseDown: dndHandler.control_handleMouseDown,\n                              onMouseMove: dndHandler.control_handleMouseMove,\n                              onMouseUp: dndHandler.control_handleMouseUp,\n                          }\n                        : undefined\n                }\n                dropdownItems={dropdownItems}\n            />\n        );\n    };\n"]}
+{"version":3,"file":"FloatingMenuControl.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useMemo} from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport type {ClientRectObject, VirtualElement} from '@floating-ui/dom';\nimport {\n    ArrowDown,\n    ArrowLeft,\n    ArrowRight,\n    ArrowUp,\n    BroomMotion as ClearCells,\n    TrashBin,\n    Xmark,\n} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {i18n} from 'src/i18n/yfm-table';\n\nimport type {DnDControlHandler} from '../../dnd/dnd';\nimport {FloatingMenu, type FloatingMenuProps} from '../FloatingMenu/FloatingMenu';\n\ntype ControlType = FloatingMenuProps['dirtype'];\n\nexport type FloatingMenuControlProps = {\n    cellElement: Element;\n    tableElement: Element;\n    multiple: boolean;\n    type: ControlType;\n    dndHandler?: DnDControlHandler;\n    onMenuOpenToggle: FloatingMenuProps['onOpenToggle'];\n    onClearCellsClick: () => void;\n    onInsertBeforeClick: () => void;\n    onInsertAfterClick: () => void;\n    onRemoveRangeClick: () => void;\n    onRemoveTableClick: () => void;\n};\n\nexport const FloatingMenuControl: React.FC<FloatingMenuControlProps> =\n    function YfmTableFloatingMenuControl({\n        type,\n        multiple,\n        dndHandler,\n        cellElement,\n        tableElement,\n        onMenuOpenToggle,\n        onClearCellsClick,\n        onInsertBeforeClick,\n        onInsertAfterClick,\n        onRemoveRangeClick,\n        onRemoveTableClick,\n    }) {\n        const dropdownItems = useMemo<FloatingMenuProps['dropdownItems']>(\n            () =>\n                [\n                    [\n                        {\n                            text: i18n(`${type}.add.before`),\n                            qa: `g-md-yfm-table-action-add-${type}-before`,\n                            action: onInsertBeforeClick,\n                            iconStart: <Icon data={type === 'row' ? ArrowUp : ArrowLeft} />,\n                        },\n                        {\n                            text: i18n(`${type}.add.after`),\n                            qa: `g-md-yfm-table-action-add-${type}-after`,\n                            action: onInsertAfterClick,\n                            iconStart: <Icon data={type === 'row' ? ArrowDown : ArrowRight} />,\n                        },\n                    ],\n                    [\n                        {\n                            text: i18n('cells.clear'),\n                            qa: `g-md-yfm-table-${type}-clear-cells`,\n                            action: onClearCellsClick,\n                            iconStart: <Icon data={ClearCells} />,\n                        },\n                    ],\n                    [\n                        {\n                            text: i18n(`${type}.remove${multiple ? '.multiple' : ''}`),\n                            qa: `g-md-yfm-table-action-remove-${type}`,\n                            action: onRemoveRangeClick,\n                            iconStart: <Icon data={Xmark} />,\n                        },\n                        {\n                            theme: 'danger',\n                            text: i18n('table.remove'),\n                            qa: 'g-md-yfm-table-action-remove-table',\n                            action: onRemoveTableClick,\n                            iconStart: <Icon data={TrashBin} />,\n                        },\n                    ],\n                ] satisfies FloatingMenuProps['dropdownItems'],\n            [\n                type,\n                multiple,\n                onClearCellsClick,\n                onInsertAfterClick,\n                onInsertBeforeClick,\n                onRemoveRangeClick,\n                onRemoveTableClick,\n            ],\n        );\n\n        const anchor = useMemo(\n            () => getVirtualAnchor(type, tableElement, cellElement),\n            [type, tableElement, cellElement],\n        );\n\n        return (\n            <FloatingMenu\n                dirtype={type}\n                canDrag={dndHandler ? dndHandler.canDrag() : false}\n                onOpenToggle={onMenuOpenToggle}\n                anchorElement={anchor}\n                switcherMouseProps={\n                    dndHandler\n                        ? {\n                              onMouseLeave: dndHandler.control_handleMouseLeave,\n                              onMouseDown: dndHandler.control_handleMouseDown,\n                              onMouseMove: dndHandler.control_handleMouseMove,\n                              onMouseUp: dndHandler.control_handleMouseUp,\n                          }\n                        : undefined\n                }\n                dropdownItems={dropdownItems}\n            />\n        );\n    };\n\nfunction getVirtualAnchor(\n    type: ControlType,\n    tableElem: Element,\n    cellElem: Element,\n): VirtualElement {\n    if (type === 'row') {\n        return {\n            contextElement: cellElem,\n            getBoundingClientRect() {\n                const cellRect = cellElem.getBoundingClientRect();\n                const tableRect: ClientRectObject = tableElem.getBoundingClientRect().toJSON();\n\n                {\n                    // fix table rect\n                    tableRect.x += 1;\n                    tableRect.width -= 2;\n                    tableRect.left += 1;\n                    tableRect.right -= 1;\n                }\n\n                return {\n                    // from table\n                    x: tableRect.x,\n                    width: tableRect.width,\n                    left: tableRect.left,\n                    right: tableRect.right,\n                    // from cell\n                    y: cellRect.y,\n                    height: cellRect.height,\n                    top: cellRect.top,\n                    bottom: cellRect.top,\n                };\n            },\n        };\n    }\n\n    if (type === 'column') {\n        return {\n            contextElement: cellElem,\n            getBoundingClientRect() {\n                const cellRect: ClientRectObject = cellElem.getBoundingClientRect().toJSON();\n                const tableRect = tableElem.getBoundingClientRect();\n\n                const EDGE_OFFSET = 16;\n\n                const cellMiddle = cellRect.x + cellRect.width / 2;\n\n                // left border of table\n                if (cellMiddle - EDGE_OFFSET <= tableRect.left) {\n                    const visible = cellRect.right - tableRect.left;\n                    cellRect.width = (visible - EDGE_OFFSET) * 2;\n                    cellRect.left = cellRect.right - cellRect.width;\n                    cellRect.x = cellRect.left;\n                }\n\n                // right border of table\n                if (cellMiddle + EDGE_OFFSET >= tableRect.right) {\n                    const visible = tableRect.right - cellRect.left;\n                    cellRect.width = (visible - EDGE_OFFSET) * 2;\n                    cellRect.right = cellRect.left + cellRect.width;\n                }\n\n                return cellRect;\n            },\n        };\n    }\n\n    throw new Error(`Unknown control type: ${type}`);\n}\n"]}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusButton/FloatingPlusButton.d.ts

@@ -1,4 +1,6 @@
+import { type FloatingPopupProps, type FloatingPopupRef } from "../FloatingPopup/index.js";
 import { type InsertCursorProps } from "./InsertCursor.js";
 import { type PlusButtonProps } from "./PlusButton.js";
-export type FloatingPlusButtonProps = Pick<PlusButtonProps, 'onClick'> & Pick<InsertCursorProps, 'type' | 'anchor'>;
-export declare const FloatingPlusButton: React.FC<FloatingPlusButtonProps>;
+export type FloatingPlusButtonRef = FloatingPopupRef & {};
+export type FloatingPlusButtonProps = Pick<FloatingPopupProps, 'floatingStyles'> & Pick<PlusButtonProps, 'onClick'> & Pick<InsertCursorProps, 'type' | 'anchor'>;
+export declare const FloatingPlusButton: import("react").ForwardRefExoticComponent<Pick<FloatingPopupProps, "floatingStyles"> & Pick<PlusButtonProps, "onClick"> & Pick<InsertCursorProps, "type" | "anchor"> & import("react").RefAttributes<FloatingPopupRef>>;

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusButton/FloatingPlusButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import { FloatingPopup } from "../FloatingPopup/index.js";
 import { InsertCursor } from "./InsertCursor.js";
 import { PlusButton } from "./PlusButton.js";
@@ -15,8 +15,8 @@ const offsetByType = {
     row: { alignmentAxis: -10 },
     column: { alignmentAxis: -10 },
 };
-export const FloatingPlusButton = function YfmTableFloatingPlusButton({ anchor, type, ...btnProps }) {
+export const FloatingPlusButton = forwardRef(function YfmTableFloatingPlusButton({ anchor, type, floatingStyles, ...btnProps }, ref) {
     const [hovered, setHovered] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(FloatingPopup, { open: true, anchorElement: anchor, placement: placementByType[type], offset: offsetByType[type], style: styles, children: _jsx(PlusButton, { ...btnProps, onHoverChange: setHovered, qa: `g-md-yfm-table-plus-${type}` }) }), hovered && _jsx(InsertCursor, { anchor: anchor, type: type })] }));
-};
+    return (_jsxs(_Fragment, { children: [_jsx(FloatingPopup, { open: true, ref: ref, anchorElement: anchor, floatingStyles: floatingStyles, placement: placementByType[type], offset: offsetByType[type], style: styles, children: _jsx(PlusButton, { ...btnProps, onHoverChange: setHovered, qa: `g-md-yfm-table-plus-${type}` }) }), hovered && _jsx(InsertCursor, { anchor: anchor, type: type })] }));
+});
 //# sourceMappingURL=FloatingPlusButton.js.map

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusButton/FloatingPlusButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPlusButton.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusButton/FloatingPlusButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,aAAa,EAA0B,kCAAyB;AAExE,OAAO,EAAC,YAAY,EAAyB,0BAAuB;AACpE,OAAO,EAAC,UAAU,EAAuB,wBAAqB;AAE9D,MAAM,MAAM,GAAwB;IAChC,YAAY,EAAE,OAAO,EAAE,8BAA8B;IACrD,UAAU,EAAE,aAAa;CAC5B,CAAC;AACF,MAAM,eAAe,GAAuE;IACxF,GAAG,EAAE,UAAU;IACf,MAAM,EAAE,SAAS;CACpB,CAAC;AACF,MAAM,YAAY,GAAoE;IAClF,GAAG,EAAE,EAAC,aAAa,EAAE,CAAC,EAAE,EAAC;IACzB,MAAM,EAAE,EAAC,aAAa,EAAE,CAAC,EAAE,EAAC;CAC/B,CAAC;AAKF,MAAM,CAAC,MAAM,kBAAkB,GAC3B,SAAS,0BAA0B,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAC;IAC3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACH,8BACI,KAAC,aAAa,IACV,IAAI,QACJ,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,EAC1B,KAAK,EAAE,MAAM,YAEb,KAAC,UAAU,OACH,QAAQ,EACZ,aAAa,EAAE,UAAU,EACzB,EAAE,EAAE,uBAAuB,IAAI,EAAE,GACnC,GACU,EACf,OAAO,IAAI,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,IACzD,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useState} from 'react';\n\nimport {FloatingPopup, type FloatingPopupProps} from '../FloatingPopup';\n\nimport {InsertCursor, type InsertCursorProps} from './InsertCursor';\nimport {PlusButton, type PlusButtonProps} from './PlusButton';\n\nconst styles: React.CSSProperties = {\n    borderRadius: '100px', // button circle border radius\n    background: 'transparent',\n};\nconst placementByType: Record<InsertCursorProps['type'], FloatingPopupProps['placement']> = {\n    row: 'left-end',\n    column: 'top-end',\n};\nconst offsetByType: Record<InsertCursorProps['type'], FloatingPopupProps['offset']> = {\n    row: {alignmentAxis: -10},\n    column: {alignmentAxis: -10},\n};\n\nexport type FloatingPlusButtonProps = Pick<PlusButtonProps, 'onClick'> &\n    Pick<InsertCursorProps, 'type' | 'anchor'>;\n\nexport const FloatingPlusButton: React.FC<FloatingPlusButtonProps> =\n    function YfmTableFloatingPlusButton({anchor, type, ...btnProps}) {\n        const [hovered, setHovered] = useState(false);\n\n        return (\n            <>\n                <FloatingPopup\n                    open\n                    anchorElement={anchor}\n                    placement={placementByType[type]}\n                    offset={offsetByType[type]}\n                    style={styles}\n                >\n                    <PlusButton\n                        {...btnProps}\n                        onHoverChange={setHovered}\n                        qa={`g-md-yfm-table-plus-${type}`}\n                    />\n                </FloatingPopup>\n                {hovered && <InsertCursor anchor={anchor} type={type} />}\n            </>\n        );\n    };\n"]}
+{"version":3,"file":"FloatingPlusButton.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusButton/FloatingPlusButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAC,aAAa,EAAiD,kCAAyB;AAE/F,OAAO,EAAC,YAAY,EAAyB,0BAAuB;AACpE,OAAO,EAAC,UAAU,EAAuB,wBAAqB;AAE9D,MAAM,MAAM,GAAwB;IAChC,YAAY,EAAE,OAAO,EAAE,8BAA8B;IACrD,UAAU,EAAE,aAAa;CAC5B,CAAC;AACF,MAAM,eAAe,GAAuE;IACxF,GAAG,EAAE,UAAU;IACf,MAAM,EAAE,SAAS;CACpB,CAAC;AACF,MAAM,YAAY,GAAoE;IAClF,GAAG,EAAE,EAAC,aAAa,EAAE,CAAC,EAAE,EAAC;IACzB,MAAM,EAAE,EAAC,aAAa,EAAE,CAAC,EAAE,EAAC;CAC/B,CAAC;AAQF,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CACxC,SAAS,0BAA0B,CAAC,EAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,QAAQ,EAAC,EAAE,GAAG;IAChF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACH,8BACI,KAAC,aAAa,IACV,IAAI,QACJ,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,EAC1B,KAAK,EAAE,MAAM,YAEb,KAAC,UAAU,OACH,QAAQ,EACZ,aAAa,EAAE,UAAU,EACzB,EAAE,EAAE,uBAAuB,IAAI,EAAE,GACnC,GACU,EACf,OAAO,IAAI,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,IACzD,CACN,CAAC;AACN,CAAC,CACJ,CAAC","sourcesContent":["import {forwardRef, useState} from 'react';\n\nimport {FloatingPopup, type FloatingPopupProps, type FloatingPopupRef} from '../FloatingPopup';\n\nimport {InsertCursor, type InsertCursorProps} from './InsertCursor';\nimport {PlusButton, type PlusButtonProps} from './PlusButton';\n\nconst styles: React.CSSProperties = {\n    borderRadius: '100px', // button circle border radius\n    background: 'transparent',\n};\nconst placementByType: Record<InsertCursorProps['type'], FloatingPopupProps['placement']> = {\n    row: 'left-end',\n    column: 'top-end',\n};\nconst offsetByType: Record<InsertCursorProps['type'], FloatingPopupProps['offset']> = {\n    row: {alignmentAxis: -10},\n    column: {alignmentAxis: -10},\n};\n\nexport type FloatingPlusButtonRef = FloatingPopupRef & {};\n\nexport type FloatingPlusButtonProps = Pick<FloatingPopupProps, 'floatingStyles'> &\n    Pick<PlusButtonProps, 'onClick'> &\n    Pick<InsertCursorProps, 'type' | 'anchor'>;\n\nexport const FloatingPlusButton = forwardRef<FloatingPlusButtonRef, FloatingPlusButtonProps>(\n    function YfmTableFloatingPlusButton({anchor, type, floatingStyles, ...btnProps}, ref) {\n        const [hovered, setHovered] = useState(false);\n\n        return (\n            <>\n                <FloatingPopup\n                    open\n                    ref={ref}\n                    anchorElement={anchor}\n                    floatingStyles={floatingStyles}\n                    placement={placementByType[type]}\n                    offset={offsetByType[type]}\n                    style={styles}\n                >\n                    <PlusButton\n                        {...btnProps}\n                        onHoverChange={setHovered}\n                        qa={`g-md-yfm-table-plus-${type}`}\n                    />\n                </FloatingPopup>\n                {hovered && <InsertCursor anchor={anchor} type={type} />}\n            </>\n        );\n    },\n);\n"]}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusControl/FloatingPlusControl.d.ts

@@ -1,9 +1,11 @@
 import { type FloatingPlusButtonProps } from "../FloatingPlusButton/index.js";
+type ControlType = FloatingPlusButtonProps['type'];
 export type FloatingPlusControlProps = {
-    type: FloatingPlusButtonProps['type'];
+    type: ControlType;
     index: number;
     cellElem: Element;
     tableElem: Element;
     onClick: (rowIdx: number) => void;
 };
 export declare const FloatingPlusControl: import("react").NamedExoticComponent<FloatingPlusControlProps>;
+export {};

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusControl/FloatingPlusControl.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
-import { FloatingPlusButton } from "../FloatingPlusButton/index.js";
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffectOnce } from 'react-use';
+import { useRafThrottle } from "../../hooks/use-raf-throttle.js";
+import { FloatingPlusButton, } from "../FloatingPlusButton/index.js";
 export const FloatingPlusControl = memo(function YfmTableRowFloatingPlusControl({ type, index, cellElem, tableElem, onClick }) {
     const anchor = useMemo(() => ({
         contextElement: tableElem,
@@ -30,6 +32,39 @@ export const FloatingPlusControl = memo(function YfmTableRowFloatingPlusControl(
                 };
         },
     }), [cellElem, tableElem, type]);
-    return _jsx(FloatingPlusButton, { anchor: anchor, type: type, onClick: () => onClick(index) });
+    const [visible, setVisible] = useState(() => shouldBeVisible(type, cellElem, tableElem));
+    const buttonRef = useRef(null);
+    const updateVisibility = () => {
+        const newVisible = shouldBeVisible(type, cellElem, tableElem);
+        if (visible !== newVisible)
+            setVisible(newVisible);
+    };
+    const onChange = useRafThrottle(() => {
+        buttonRef.current?.forceUpdate();
+        updateVisibility();
+    });
+    // Update after first render
+    useEffectOnce(updateVisibility);
+    useEffect(() => {
+        if (type !== 'column')
+            return undefined;
+        const observer = new ResizeObserver(onChange);
+        observer.observe(tableElem);
+        tableElem.addEventListener('scroll', onChange);
+        return () => {
+            observer.unobserve(tableElem);
+            tableElem.removeEventListener('scroll', onChange);
+        };
+    }, [tableElem, onChange, type]);
+    return (_jsx(FloatingPlusButton, { ref: buttonRef, anchor: anchor, type: type, onClick: () => onClick(index), floatingStyles: visible ? undefined : { display: 'none' } }));
 });
+function shouldBeVisible(type, cellElem, tableElem) {
+    if (type !== 'column')
+        return true;
+    const THRESHOLD = 4; // px
+    const cellRect = cellElem.getBoundingClientRect();
+    const tableRect = tableElem.getBoundingClientRect();
+    return (tableRect.left - cellRect.right <= THRESHOLD &&
+        cellRect.right - tableRect.right <= THRESHOLD);
+}
 //# sourceMappingURL=FloatingPlusControl.js.map

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusControl/FloatingPlusControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPlusControl.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusControl/FloatingPlusControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAKpC,OAAO,EAAC,kBAAkB,EAA+B,uCAA8B;AAUvF,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,CACnC,SAAS,8BAA8B,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAC;IAC/E,MAAM,MAAM,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,CAAC;QACH,cAAc,EAAE,SAAS;QACzB,qBAAqB;YACjB,MAAM,QAAQ,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;YAClD,MAAM,SAAS,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YAEpD,OAAO,IAAI,KAAK,KAAK;gBACjB,CAAC,CAAC;oBACI,CAAC,EAAE,SAAS,CAAC,CAAC;oBACd,CAAC,EAAE,QAAQ,CAAC,CAAC;oBACb,KAAK,EAAE,SAAS,CAAC,KAAK;oBACtB,MAAM,EAAE,QAAQ,CAAC,MAAM;oBACvB,GAAG,EAAE,QAAQ,CAAC,GAAG;oBACjB,IAAI,EAAE,SAAS,CAAC,IAAI;oBACpB,KAAK,EAAE,SAAS,CAAC,KAAK;oBACtB,MAAM,EAAE,QAAQ,CAAC,GAAG;iBACvB;gBACH,CAAC,CAAC;oBACI,CAAC,EAAE,QAAQ,CAAC,CAAC;oBACb,CAAC,EAAE,SAAS,CAAC,CAAC;oBACd,KAAK,EAAE,QAAQ,CAAC,KAAK;oBACrB,MAAM,EAAE,SAAS,CAAC,MAAM;oBACxB,GAAG,EAAE,SAAS,CAAC,GAAG;oBAClB,IAAI,EAAE,QAAQ,CAAC,IAAI;oBACnB,KAAK,EAAE,QAAQ,CAAC,KAAK;oBACrB,MAAM,EAAE,SAAS,CAAC,GAAG;iBACxB,CAAC;QACZ,CAAC;KACJ,CAAC,EACF,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAC9B,CAAC;IAEF,OAAO,KAAC,kBAAkB,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAI,CAAC;AAC7F,CAAC,CACJ,CAAC","sourcesContent":["import {memo, useMemo} from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport type {VirtualElement} from '@floating-ui/dom';\n\nimport {FloatingPlusButton, type FloatingPlusButtonProps} from '../FloatingPlusButton';\n\nexport type FloatingPlusControlProps = {\n    type: FloatingPlusButtonProps['type'];\n    index: number;\n    cellElem: Element;\n    tableElem: Element;\n    onClick: (rowIdx: number) => void;\n};\n\nexport const FloatingPlusControl = memo<FloatingPlusControlProps>(\n    function YfmTableRowFloatingPlusControl({type, index, cellElem, tableElem, onClick}) {\n        const anchor = useMemo<VirtualElement>(\n            () => ({\n                contextElement: tableElem,\n                getBoundingClientRect() {\n                    const cellRect = cellElem.getBoundingClientRect();\n                    const tableRect = tableElem.getBoundingClientRect();\n\n                    return type === 'row'\n                        ? {\n                              x: tableRect.x,\n                              y: cellRect.y,\n                              width: tableRect.width,\n                              height: cellRect.height,\n                              top: cellRect.top,\n                              left: tableRect.left,\n                              right: tableRect.right,\n                              bottom: cellRect.top,\n                          }\n                        : {\n                              x: cellRect.x,\n                              y: tableRect.y,\n                              width: cellRect.width,\n                              height: tableRect.height,\n                              top: tableRect.top,\n                              left: cellRect.left,\n                              right: cellRect.right,\n                              bottom: tableRect.top,\n                          };\n                },\n            }),\n            [cellElem, tableElem, type],\n        );\n\n        return <FloatingPlusButton anchor={anchor} type={type} onClick={() => onClick(index)} />;\n    },\n);\n"]}
+{"version":3,"file":"FloatingPlusControl.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPlusControl/FloatingPlusControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import {memo, useEffect, useMemo, useRef, useState} from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport type {VirtualElement} from '@floating-ui/dom';\nimport {useEffectOnce} from 'react-use';\n\nimport {useRafThrottle} from '../../hooks/use-raf-throttle';\nimport {\n    FloatingPlusButton,\n    type FloatingPlusButtonProps,\n    type FloatingPlusButtonRef,\n} from '../FloatingPlusButton';\n\ntype ControlType = FloatingPlusButtonProps['type'];\n\nexport type FloatingPlusControlProps = {\n    type: ControlType;\n    index: number;\n    cellElem: Element;\n    tableElem: Element;\n    onClick: (rowIdx: number) => void;\n};\n\nexport const FloatingPlusControl = memo<FloatingPlusControlProps>(\n    function YfmTableRowFloatingPlusControl({type, index, cellElem, tableElem, onClick}) {\n        const anchor = useMemo<VirtualElement>(\n            () => ({\n                contextElement: tableElem,\n                getBoundingClientRect() {\n                    const cellRect = cellElem.getBoundingClientRect();\n                    const tableRect = tableElem.getBoundingClientRect();\n\n                    return type === 'row'\n                        ? {\n                              x: tableRect.x,\n                              y: cellRect.y,\n                              width: tableRect.width,\n                              height: cellRect.height,\n                              top: cellRect.top,\n                              left: tableRect.left,\n                              right: tableRect.right,\n                              bottom: cellRect.top,\n                          }\n                        : {\n                              x: cellRect.x,\n                              y: tableRect.y,\n                              width: cellRect.width,\n                              height: tableRect.height,\n                              top: tableRect.top,\n                              left: cellRect.left,\n                              right: cellRect.right,\n                              bottom: tableRect.top,\n                          };\n                },\n            }),\n            [cellElem, tableElem, type],\n        );\n\n        const [visible, setVisible] = useState(() => shouldBeVisible(type, cellElem, tableElem));\n        const buttonRef = useRef<FloatingPlusButtonRef>(null);\n\n        const updateVisibility = () => {\n            const newVisible = shouldBeVisible(type, cellElem, tableElem);\n            if (visible !== newVisible) setVisible(newVisible);\n        };\n\n        const onChange = useRafThrottle(() => {\n            buttonRef.current?.forceUpdate();\n            updateVisibility();\n        });\n\n        // Update after first render\n        useEffectOnce(updateVisibility);\n\n        useEffect(() => {\n            if (type !== 'column') return undefined;\n\n            const observer = new ResizeObserver(onChange);\n            observer.observe(tableElem);\n            tableElem.addEventListener('scroll', onChange);\n\n            return () => {\n                observer.unobserve(tableElem);\n                tableElem.removeEventListener('scroll', onChange);\n            };\n        }, [tableElem, onChange, type]);\n\n        return (\n            <FloatingPlusButton\n                ref={buttonRef}\n                anchor={anchor}\n                type={type}\n                onClick={() => onClick(index)}\n                floatingStyles={visible ? undefined : {display: 'none'}}\n            />\n        );\n    },\n);\n\nfunction shouldBeVisible(type: ControlType, cellElem: Element, tableElem: Element): boolean {\n    if (type !== 'column') return true;\n\n    const THRESHOLD = 4; // px\n\n    const cellRect = cellElem.getBoundingClientRect();\n    const tableRect = tableElem.getBoundingClientRect();\n\n    return (\n        tableRect.left - cellRect.right <= THRESHOLD &&\n        cellRect.right - tableRect.right <= THRESHOLD\n    );\n}\n"]}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPopup/FloatingPopup.d.ts

@@ -1,6 +1,10 @@
 import { type OffsetOptions, type Placement, type ReferenceType } from '@floating-ui/react';
 import { type DOMProps, type QAProps } from '@gravity-ui/uikit';
 import "./FloatingPopup.css";
+export type { ReferenceType };
+export type FloatingPopupRef = {
+    forceUpdate: () => void;
+};
 export type FloatingPopupProps = QAProps & DOMProps & {
     open?: boolean;
     zIndex?: number;
@@ -10,4 +14,12 @@ export type FloatingPopupProps = QAProps & DOMProps & {
     children: React.ReactNode;
     floatingStyles?: React.CSSProperties;
 };
-export declare const FloatingPopup: React.FC<FloatingPopupProps>;
+export declare const FloatingPopup: import("react").ForwardRefExoticComponent<QAProps & DOMProps & {
+    open?: boolean;
+    zIndex?: number;
+    placement: Placement;
+    offset?: OffsetOptions;
+    anchorElement: ReferenceType | undefined | null;
+    children: React.ReactNode;
+    floatingStyles?: React.CSSProperties;
+} & import("react").RefAttributes<FloatingPopupRef>>;

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPopup/FloatingPopup.js

@@ -3,36 +3,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /// Fork of Popup component from @gravity-ui/uikit
 /// This fork does not use floating focus manager
 ///
-import { useEffect, useMemo } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { FloatingNode, FloatingTree, autoUpdate, offset as offsetMiddleware, useFloating, useFloatingNodeId, useFloatingParentNodeId, useInteractions, } from '@floating-ui/react';
 import { Portal } from '@gravity-ui/uikit';
 import { cn } from "../../../../../../../classname.js";
 import "./FloatingPopup.css";
 const b = cn('yfm-table-floating-popup');
-export const FloatingPopup = function YfmTableFloatingPopup(props) {
+export const FloatingPopup = forwardRef(function YfmTableFloatingPopup(props, ref) {
     const { anchorElement, zIndex = 1000, style, className, qa, children, floatingStyles: floatingStylesFromProps, } = props;
     const nodeId = useFloatingNodeId();
     const parentId = useFloatingParentNodeId();
     const middleware = useMemo(() => [offsetMiddleware(props.offset)], [props.offset]);
-    const { refs, elements, floatingStyles, placement, context: { open }, update, } = useFloating({
+    const { refs, floatingStyles, placement, context: { open }, update, } = useFloating({
         nodeId,
         open: props.open,
         placement: props.placement,
         middleware,
+        whileElementsMounted: autoUpdate,
     });
+    useImperativeHandle(ref, () => ({
+        forceUpdate: update,
+    }), [update]);
     const { getFloatingProps } = useInteractions();
     useEffect(() => {
         if (anchorElement !== undefined && anchorElement !== refs.reference.current) {
             refs.setReference(anchorElement);
         }
     }, [anchorElement, refs]);
-    useEffect(() => {
-        if (elements.reference && elements.floating) {
-            return autoUpdate(elements.reference, elements.floating, update);
-        }
-        return undefined;
-    }, [elements, update]);
     function wrapper(node) {
         if (parentId === null) {
             return _jsx(FloatingTree, { children: node });
@@ -50,5 +48,5 @@ export const FloatingPopup = function YfmTableFloatingPopup(props) {
                     ...floatingStylesFromProps,
                     ...floatingStyles,
                 }, "data-floating-ui-placement": placement, ...getFloatingProps(), children: _jsx("div", { className: b(null, className), style: style, "data-qa": qa, children: children }) }) })) : null }));
-};
+});
 //# sourceMappingURL=FloatingPopup.js.map

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPopup/FloatingPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPopup.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPopup/FloatingPopup.tsx"],"names":[],"mappings":"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","sourcesContent":["///\n/// Fork of Popup component from @gravity-ui/uikit\n/// This fork does not use floating focus manager\n///\n\nimport {useEffect, useMemo} from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {\n    FloatingNode,\n    FloatingTree,\n    type OffsetOptions,\n    type Placement,\n    type ReferenceType,\n    autoUpdate,\n    offset as offsetMiddleware,\n    useFloating,\n    useFloatingNodeId,\n    useFloatingParentNodeId,\n    useInteractions,\n} from '@floating-ui/react';\nimport {type DOMProps, Portal, type QAProps} from '@gravity-ui/uikit';\n\nimport {cn} from 'src/classname';\n\nimport './FloatingPopup.scss';\n\nconst b = cn('yfm-table-floating-popup');\n\nexport type FloatingPopupProps = QAProps &\n    DOMProps & {\n        open?: boolean;\n        zIndex?: number;\n        placement: Placement;\n        offset?: OffsetOptions;\n        anchorElement: ReferenceType | undefined | null;\n        children: React.ReactNode;\n        floatingStyles?: React.CSSProperties;\n    };\n\nexport const FloatingPopup: React.FC<FloatingPopupProps> = function YfmTableFloatingPopup(\n    props: FloatingPopupProps,\n) {\n    const {\n        anchorElement,\n        zIndex = 1000,\n        style,\n        className,\n        qa,\n        children,\n        floatingStyles: floatingStylesFromProps,\n    } = props;\n\n    const nodeId = useFloatingNodeId();\n    const parentId = useFloatingParentNodeId();\n\n    const middleware = useMemo(() => [offsetMiddleware(props.offset)], [props.offset]);\n\n    const {\n        refs,\n        elements,\n        floatingStyles,\n        placement,\n        context: {open},\n        update,\n    } = useFloating({\n        nodeId,\n        open: props.open,\n        placement: props.placement,\n        middleware,\n    });\n\n    const {getFloatingProps} = useInteractions();\n\n    useEffect(() => {\n        if (anchorElement !== undefined && anchorElement !== refs.reference.current) {\n            refs.setReference(anchorElement);\n        }\n    }, [anchorElement, refs]);\n\n    useEffect(() => {\n        if (elements.reference && elements.floating) {\n            return autoUpdate(elements.reference, elements.floating, update);\n        }\n        return undefined;\n    }, [elements, update]);\n\n    function wrapper(node: JSX.Element) {\n        if (parentId === null) {\n            return <FloatingTree>{node}</FloatingTree>;\n        }\n\n        return node;\n    }\n\n    return wrapper(\n        <FloatingNode id={nodeId}>\n            {open ? (\n                <Portal>\n                    <div\n                        ref={refs.setFloating}\n                        style={{\n                            position: 'absolute',\n                            top: 0,\n                            left: 0,\n                            zIndex,\n                            width: 'max-content',\n                            pointerEvents: 'auto',\n                            outline: 'none',\n                            ...floatingStylesFromProps,\n                            ...floatingStyles,\n                        }}\n                        data-floating-ui-placement={placement}\n                        {...getFloatingProps()}\n                    >\n                        <div className={b(null, className)} style={style} data-qa={qa}>\n                            {children}\n                        </div>\n                    </div>\n                </Portal>\n            ) : null}\n        </FloatingNode>,\n    );\n};\n"]}
+{"version":3,"file":"FloatingPopup.js","sourceRoot":"../../../../../../../../../src","sources":["extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingPopup/FloatingPopup.tsx"],"names":[],"mappings":"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","sourcesContent":["///\n/// Fork of Popup component from @gravity-ui/uikit\n/// This fork does not use floating focus manager\n///\n\nimport {forwardRef, useEffect, useImperativeHandle, useMemo} from 'react';\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport {\n    FloatingNode,\n    FloatingTree,\n    type OffsetOptions,\n    type Placement,\n    type ReferenceType,\n    autoUpdate,\n    offset as offsetMiddleware,\n    useFloating,\n    useFloatingNodeId,\n    useFloatingParentNodeId,\n    useInteractions,\n} from '@floating-ui/react';\nimport {type DOMProps, Portal, type QAProps} from '@gravity-ui/uikit';\n\nimport {cn} from 'src/classname';\n\nimport './FloatingPopup.scss';\n\nconst b = cn('yfm-table-floating-popup');\n\nexport type {ReferenceType};\n\nexport type FloatingPopupRef = {\n    forceUpdate: () => void;\n};\n\nexport type FloatingPopupProps = QAProps &\n    DOMProps & {\n        open?: boolean;\n        zIndex?: number;\n        placement: Placement;\n        offset?: OffsetOptions;\n        anchorElement: ReferenceType | undefined | null;\n        children: React.ReactNode;\n        floatingStyles?: React.CSSProperties;\n    };\n\nexport const FloatingPopup = forwardRef<FloatingPopupRef, FloatingPopupProps>(\n    function YfmTableFloatingPopup(props, ref) {\n        const {\n            anchorElement,\n            zIndex = 1000,\n            style,\n            className,\n            qa,\n            children,\n            floatingStyles: floatingStylesFromProps,\n        } = props;\n\n        const nodeId = useFloatingNodeId();\n        const parentId = useFloatingParentNodeId();\n\n        const middleware = useMemo(() => [offsetMiddleware(props.offset)], [props.offset]);\n\n        const {\n            refs,\n            floatingStyles,\n            placement,\n            context: {open},\n            update,\n        } = useFloating({\n            nodeId,\n            open: props.open,\n            placement: props.placement,\n            middleware,\n            whileElementsMounted: autoUpdate,\n        });\n\n        useImperativeHandle<FloatingPopupRef, FloatingPopupRef>(\n            ref,\n            () => ({\n                forceUpdate: update,\n            }),\n            [update],\n        );\n\n        const {getFloatingProps} = useInteractions();\n\n        useEffect(() => {\n            if (anchorElement !== undefined && anchorElement !== refs.reference.current) {\n                refs.setReference(anchorElement);\n            }\n        }, [anchorElement, refs]);\n\n        function wrapper(node: JSX.Element) {\n            if (parentId === null) {\n                return <FloatingTree>{node}</FloatingTree>;\n            }\n\n            return node;\n        }\n\n        return wrapper(\n            <FloatingNode id={nodeId}>\n                {open ? (\n                    <Portal>\n                        <div\n                            ref={refs.setFloating}\n                            style={{\n                                position: 'absolute',\n                                top: 0,\n                                left: 0,\n                                zIndex,\n                                width: 'max-content',\n                                pointerEvents: 'auto',\n                                outline: 'none',\n                                ...floatingStylesFromProps,\n                                ...floatingStyles,\n                            }}\n                            data-floating-ui-placement={placement}\n                            {...getFloatingProps()}\n                        >\n                            <div className={b(null, className)} style={style} data-qa={qa}>\n                                {children}\n                            </div>\n                        </div>\n                    </Portal>\n                ) : null}\n            </FloatingNode>,\n        );\n    },\n);\n"]}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-drop-cursor.d.ts

@@ -30,6 +30,9 @@ export declare class DropCursor {
         isBlock: boolean;
     }): void;
 }
+export declare class TableRowDropCursor extends DropCursor {
+    update(): void;
+}
 export declare class TableColumnDropCursor extends DropCursor {
     update(): void;
 }

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-drop-cursor.js

@@ -1,5 +1,5 @@
 import { findParentNodeClosestToPos } from "../../../../../../pm/utils.js";
-import { isTableCellNode, isTableNode } from "../../../../../../table-utils/index.js";
+import { isTableCellNode, isTableNode, isTableRowNode } from "../../../../../../table-utils/index.js";
 export class DropCursor {
     editorView;
     width;
@@ -99,6 +99,43 @@ export class DropCursor {
         this.cursorElem.style.height = rect.bottom - rect.top + 'px';
     }
 }
+export class TableRowDropCursor extends DropCursor {
+    update() {
+        const cursorPos = this.getPos();
+        if (cursorPos === null)
+            return;
+        const $cursorPos = this.editorView.state.doc.resolve(cursorPos);
+        const parentTable = findParentNodeClosestToPos($cursorPos, isTableNode);
+        if (!parentTable)
+            return;
+        let side;
+        let trowPos;
+        if ($cursorPos.nodeAfter && isTableRowNode($cursorPos.nodeAfter)) {
+            side = 'top';
+            trowPos = cursorPos;
+        }
+        else if ($cursorPos.nodeBefore && isTableRowNode($cursorPos.nodeBefore)) {
+            side = 'bottom';
+            trowPos = cursorPos - $cursorPos.nodeBefore.nodeSize;
+        }
+        else {
+            this.cursorElem?.remove();
+            this.cursorElem = null;
+            return;
+        }
+        const trElem = this.editorView.nodeDOM(trowPos);
+        const tableElem = this.editorView.nodeDOM(parentTable.pos);
+        const trRect = trElem.getBoundingClientRect();
+        const tableRect = tableElem.getBoundingClientRect();
+        const rect = {
+            top: trRect[side] - this.width / 2,
+            bottom: trRect[side] + this.width / 2,
+            left: tableRect.left,
+            right: tableRect.right,
+        };
+        this.render(rect, { isBlock: true });
+    }
+}
 export class TableColumnDropCursor extends DropCursor {
     update() {
         const cursorPos = this.getPos();