@uva-glass/component-library 3.57.2 → 3.57.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ActionList-D2GC2qPX.js.map +1 -1
- package/dist/AddCatalogueLinkForm-Di0xm7Ep.js.map +1 -1
- package/dist/ClipboardButton-Cg6LGUiD.js.map +1 -1
- package/dist/ControlsButton-Byx4XQtB.js.map +1 -1
- package/dist/CopyableText-BKsM-TuS.js.map +1 -1
- package/dist/DataTable-Cgn_RKTA.js.map +1 -1
- package/dist/{Lexical.prod-nAj5fF96.js → Lexical.prod-Dy5aDppc.js} +2449 -1794
- package/dist/Lexical.prod-Dy5aDppc.js.map +1 -0
- package/dist/LexicalClipboard.prod-CS8a49uL.js +398 -0
- package/dist/LexicalClipboard.prod-CS8a49uL.js.map +1 -0
- package/dist/{LexicalComposerContext.prod-DumMmRBt.js → LexicalComposerContext.prod-D4HOlWII.js} +3 -3
- package/dist/LexicalComposerContext.prod-D4HOlWII.js.map +1 -0
- package/dist/LexicalHtml.prod-BtzosUOH.js +1611 -0
- package/dist/LexicalHtml.prod-BtzosUOH.js.map +1 -0
- package/dist/LexicalLink.prod-DzgwWhQM.js +646 -0
- package/dist/LexicalLink.prod-DzgwWhQM.js.map +1 -0
- package/dist/LexicalList.prod-icY8mpm6.js +710 -0
- package/dist/LexicalList.prod-icY8mpm6.js.map +1 -0
- package/dist/{LexicalTable.prod-BpHQYpBM.js → LexicalTable.prod-Bf0is-op.js} +674 -750
- package/dist/LexicalTable.prod-Bf0is-op.js.map +1 -0
- package/dist/LexicalUtils.prod-CjGUKarD.js +259 -0
- package/dist/LexicalUtils.prod-CjGUKarD.js.map +1 -0
- package/dist/{LinkContextMenu-Byu3AEqp.js → LinkContextMenu-C8ehPbP8.js} +2 -2
- package/dist/{LinkContextMenu-Byu3AEqp.js.map → LinkContextMenu-C8ehPbP8.js.map} +1 -1
- package/dist/MenuLink-sK2_W2zs.js.map +1 -1
- package/dist/MetaDataList-Co9WCexh.js.map +1 -1
- package/dist/MultiSelectBox-D34qAgzc.js.map +1 -1
- package/dist/OverlayStepBar-BiC06Itd.js.map +1 -1
- package/dist/{PasteHandlerPlugin-DyTXcFsj.js → PasteHandlerPlugin-CSo_lOE8.js} +6 -6
- package/dist/{PasteHandlerPlugin-DyTXcFsj.js.map → PasteHandlerPlugin-CSo_lOE8.js.map} +1 -1
- package/dist/Periods-B4ms3N24.js.map +1 -1
- package/dist/SortableProvider-D-6Ttz0h.js.map +1 -1
- package/dist/{TableCellContextMenu--4IdoKAU.js → TableCellContextMenu-Cu5iXYSJ.js} +2 -2
- package/dist/{TableCellContextMenu--4IdoKAU.js.map → TableCellContextMenu-Cu5iXYSJ.js.map} +1 -1
- package/dist/{TableCellResizerPlugin-Dn8Ks2Lm.js → TableCellResizerPlugin-Bb2blXnq.js} +43 -43
- package/dist/TableCellResizerPlugin-Bb2blXnq.js.map +1 -0
- package/dist/VarIndicator-D0cnlcIf.js.map +1 -1
- package/dist/{chunk-5WKL7XVT-3IraU-Ja.js → chunk-5WKL7XVT-CvOIS3NE.js} +15 -15
- package/dist/{chunk-5WKL7XVT-3IraU-Ja.js.map → chunk-5WKL7XVT-CvOIS3NE.js.map} +1 -1
- package/dist/{client-BcEWjSJP.js → client-CXlG3hNo.js} +956 -957
- package/dist/{client-BcEWjSJP.js.map → client-CXlG3hNo.js.map} +1 -1
- package/dist/components/Accordion/Accordion.test.js +3 -3
- package/dist/components/Accordion/Accordion.test.js.map +1 -1
- package/dist/components/AccordionCard/AccordionCard.stories.js.map +1 -1
- package/dist/components/AccordionCard/AccordionCard.test.js +3 -3
- package/dist/components/AccordionCard/AccordionCard.test.js.map +1 -1
- package/dist/components/ActionList/ActionList.test.js +3 -3
- package/dist/components/ActionList/ActionList.test.js.map +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.test.js +2 -2
- package/dist/components/AppStatusBar/AppStatusBar.test.js.map +1 -1
- package/dist/components/Attention/Attention.stories.js.map +1 -1
- package/dist/components/Attention/Attention.test.js +2 -2
- package/dist/components/Attention/Attention.test.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.stories.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.test.js +2 -2
- package/dist/components/Backdrop/Backdrop.test.js.map +1 -1
- package/dist/components/Buttons/Button.stories.js +1 -1
- package/dist/components/Buttons/Button.test.js +2 -2
- package/dist/components/Buttons/Button.test.js.map +1 -1
- package/dist/components/Buttons/LinkButton.stories.js +1 -1
- package/dist/components/Buttons/LinkButton.test.js +2 -2
- package/dist/components/Buttons/LinkButton.test.js.map +1 -1
- package/dist/components/Buttons/MenuButton.stories.js +1 -1
- package/dist/components/Buttons/MenuButton.test.js +2 -2
- package/dist/components/Buttons/MenuButton.test.js.map +1 -1
- package/dist/components/Card/Card.test.js +2 -2
- package/dist/components/Card/Card.test.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.test.js +3 -3
- package/dist/components/Checkbox/Checkbox.test.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js +2 -2
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +3 -3
- package/dist/components/CheckboxTree/CheckboxTree.stories.js.map +1 -1
- package/dist/components/CheckboxTree/index.js +1 -1
- package/dist/components/Chip/Chip.stories.js +1 -1
- package/dist/components/ControlsButton/ControlsButton.stories.js +1 -1
- package/dist/components/CopyableText/CopyableText.stories.js.map +1 -1
- package/dist/components/DataTable/DataTable.stories.js +2 -2
- package/dist/components/DataTable/DataTable.stories.js.map +1 -1
- package/dist/components/Drawer/Drawer.stories.js +1 -1
- package/dist/components/Drawer/Drawer.stories.js.map +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.js.map +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.stories.js.map +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.test.js +2 -2
- package/dist/components/FeedbackBar/FeedbackBar.test.js.map +1 -1
- package/dist/components/FormInput/FormInput.js +1 -1
- package/dist/components/FormInput/FormInput.stories.js +2 -2
- package/dist/components/FormInput/index.js +1 -1
- package/dist/components/GridRow/GridRow.stories.js.map +1 -1
- package/dist/components/Icon/Icon.stories.js.map +1 -1
- package/dist/components/IconButton/IconButton.stories.js +1 -1
- package/dist/components/IconButton/IconButton.stories.js.map +1 -1
- package/dist/components/InfoBanner/InfoBanner.stories.js.map +1 -1
- package/dist/components/InfoMessage/InfoMessage.stories.js.map +1 -1
- package/dist/components/InputField/InputField.stories.js +1 -1
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/Label/Label.test.js +2 -2
- package/dist/components/Label/Label.test.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.stories.js.map +1 -1
- package/dist/components/MetaDataBar/MetaDataBar.stories.js.map +1 -1
- package/dist/components/MetaDataBar/MetaDataBar.test.js +1 -1
- package/dist/components/MetaDataBar/MetaDataBar.test.js.map +1 -1
- package/dist/components/MetaDataList/MetaDataList.stories.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +2 -2
- package/dist/components/MultiSelect/MultiSelect.stories.js.map +1 -1
- package/dist/components/MultiSelect/components/MultiSelectHeader.js +1 -1
- package/dist/components/MultiSelect/index.js +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.stories.js +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.stories.js.map +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.test.js +2 -2
- package/dist/components/MultiSelectBox/MultiSelectBox.test.js.map +1 -1
- package/dist/components/Notification/Notification.stories.js +1 -1
- package/dist/components/Notification/Notification.test.js +2 -2
- package/dist/components/Notification/Notification.test.js.map +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js.map +1 -1
- package/dist/components/PageOverlay/PageOverlay.stories.js.map +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.stories.js +2 -2
- package/dist/components/PeriodSelector/PeriodSelector.stories.js.map +1 -1
- package/dist/components/PeriodSelector/index.js +1 -1
- package/dist/components/Periods/Periods.stories.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.stories.js.map +1 -1
- package/dist/components/RadioGroup/RadioGroup.stories.js +1 -1
- package/dist/components/RadioGroup/RadioGroup.stories.js.map +1 -1
- package/dist/components/RadioGroup/Radiogroup.test.js +2 -2
- package/dist/components/RadioGroup/Radiogroup.test.js.map +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.js +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.js +2 -2
- package/dist/components/RadioTabSelector/index.js +1 -1
- package/dist/components/Repeater/Repeater.stories.js.map +1 -1
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js +1 -1
- package/dist/components/RteEditor/EditorHeader/index.js +1 -1
- package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js +4 -4
- package/dist/components/RteEditor/Plugins/CourseCataloguePlugin/CourseCataloguePlugin.js +35 -35
- package/dist/components/RteEditor/Plugins/CourseCataloguePlugin/CourseCataloguePlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/HistoryPlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/helpers.js +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js +15 -15
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/PasteHandlerPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/TableCellResizerPlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.js +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/index.js +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js +33 -33
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/index.js +2 -2
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/index.js +4 -4
- package/dist/components/RteEditor/RteEditor.js +1 -1
- package/dist/components/RteEditor/RteEditor.stories.js +1 -1
- package/dist/components/RteEditor/RteEditor.stories.js.map +1 -1
- package/dist/components/RteEditor/helpers.js +7 -7
- package/dist/components/RteEditor/helpers.js.map +1 -1
- package/dist/components/RteEditor/index.js +1 -1
- package/dist/components/RteEditor/nodes/CourseCatalogueNode/CourseCatalogueNode.js +18 -18
- package/dist/components/RteEditor/nodes/CourseCatalogueNode/CourseCatalogueNode.js.map +1 -1
- package/dist/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js +22 -22
- package/dist/components/SearchField/SearcheField.stories.js.map +1 -1
- package/dist/components/SectionNotification/SectionNotification.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectProvider.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectOption.js.map +1 -1
- package/dist/components/Slider/Slider.stories.js.map +1 -1
- package/dist/components/Sortable/Sortable.stories.js +1 -1
- package/dist/components/Sortable/Sortable.stories.js.map +1 -1
- package/dist/components/Spinner/Spinner.stories.js.map +1 -1
- package/dist/components/StatusBadge/StatusBadge.test.js +2 -2
- package/dist/components/StatusBadge/StatusBadge.test.js.map +1 -1
- package/dist/components/StatusPill/StatusPill.stories.js.map +1 -1
- package/dist/components/TextArea/TextArea.stories.js +1 -1
- package/dist/components/TextArea/TextArea.test.js +3 -3
- package/dist/components/TextArea/TextArea.test.js.map +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.js +1 -1
- package/dist/components/Tooltip/Tooltip.stories.js.map +1 -1
- package/dist/components/VarIndicator/VarIndicator.stories.js +1 -1
- package/dist/components/VarIndicator/VarIndicator.test.js +3 -3
- package/dist/components/VarIndicator/VarIndicator.test.js.map +1 -1
- package/dist/components/WeekSelector/WeekSelector.js.map +1 -1
- package/dist/components/WeekSelector/WeekSelector.stories.js.map +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorOption.js.map +1 -1
- package/dist/components/hooks/useOnClickOutside.js.map +1 -1
- package/dist/components/hooks/usePositionedFloaters.js.map +1 -1
- package/dist/components/hooks/useResponsive.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components-CgBF6db6.js +2013 -0
- package/dist/components-CgBF6db6.js.map +1 -0
- package/dist/{dist-C6Ar8a59.js → dist-oLwM--0y.js} +14 -14
- package/dist/{dist-C6Ar8a59.js.map → dist-oLwM--0y.js.map} +1 -1
- package/dist/{esm-B6Pg-v2v.js → esm-BXzGXYWZ.js} +3 -3
- package/dist/{esm-B6Pg-v2v.js.map → esm-BXzGXYWZ.js.map} +1 -1
- package/dist/{helpers-BzYayeT-.js → helpers-MMNO9vlK.js} +9 -9
- package/dist/helpers-MMNO9vlK.js.map +1 -0
- package/dist/index.js +1 -1
- package/dist/{react-18-DbbN8Pdb.js → react-18-BwdnKC48.js} +3 -3
- package/dist/react-18-BwdnKC48.js.map +1 -0
- package/dist/{react.esm-56DGmlLk.js → react.esm-DwWzhs9e.js} +17 -17
- package/dist/react.esm-DwWzhs9e.js.map +1 -0
- package/dist/setupTests.js +2 -2
- package/dist/setupTests.js.map +1 -1
- package/dist/storybook__react.d.js +266 -266
- package/dist/storybook__react.d.js.map +1 -1
- package/dist/{test-WxLxsxwA.js → test-Gtly6H2f.js} +7 -5
- package/dist/{test-WxLxsxwA.js.map → test-Gtly6H2f.js.map} +1 -1
- package/dist/{test-utils-CMrZ33U0.js → test-utils-BVa31HVj.js} +2 -2
- package/dist/{test-utils-CMrZ33U0.js.map → test-utils-BVa31HVj.js.map} +1 -1
- package/package.json +21 -22
- package/dist/Lexical.prod-nAj5fF96.js.map +0 -1
- package/dist/LexicalClipboard.prod-B9sWgdS2.js +0 -348
- package/dist/LexicalClipboard.prod-B9sWgdS2.js.map +0 -1
- package/dist/LexicalComposerContext.prod-DumMmRBt.js.map +0 -1
- package/dist/LexicalHtml.prod-RCMsF0qt.js +0 -2139
- package/dist/LexicalHtml.prod-RCMsF0qt.js.map +0 -1
- package/dist/LexicalLink.prod-BcBNTFEb.js +0 -707
- package/dist/LexicalLink.prod-BcBNTFEb.js.map +0 -1
- package/dist/LexicalList.prod-THQt9B32.js +0 -890
- package/dist/LexicalList.prod-THQt9B32.js.map +0 -1
- package/dist/LexicalTable.prod-BpHQYpBM.js.map +0 -1
- package/dist/LexicalUtils.prod-7S6iuu9A.js +0 -347
- package/dist/LexicalUtils.prod-7S6iuu9A.js.map +0 -1
- package/dist/TableCellResizerPlugin-Dn8Ks2Lm.js.map +0 -1
- package/dist/components-KU0q76JR.js +0 -2150
- package/dist/components-KU0q76JR.js.map +0 -1
- package/dist/helpers-BzYayeT-.js.map +0 -1
- package/dist/react-18-DbbN8Pdb.js.map +0 -1
- package/dist/react.esm-56DGmlLk.js.map +0 -1
- /package/dist/{chunk-CWhphoD1.js → rolldown-runtime-CWhphoD1.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCellContextMenu--4IdoKAU.js","names":[],"sources":["../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.module.css","../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.tsx"],"sourcesContent":[".context-menu__wrapper {\n left: 0;\n min-width: 10rem;\n position: fixed;\n top: 0;\n visibility: visible;\n z-index: 1000;\n}\n\n.context-menu__button {\n align-items: center;\n background-color: var(--color-grey-300);\n border: 0;\n border-radius: 4px;\n color: var(--color-grey-700);\n display: flex;\n height: 1.35rem;\n justify-content: center;\n position: absolute;\n right: 0.25rem;\n top: -1.6rem;\n width: 1.35rem;\n}\n\n.context-menu {\n background-color: var(--color-uva-white);\n border: 1px solid var(--color-grey-500);\n border-radius: 4px;\n box-shadow: 0 2px 6px rgba(0 0 0 / 20%);\n height: 0;\n list-style-type: none;\n margin: -2px 0 0;\n overflow: hidden;\n padding: 0;\n visibility: hidden;\n}\n\n.context-menu--open {\n height: auto;\n visibility: visible;\n}\n\n.context-menu__item {\n align-items: center;\n background-color: var(--color-uva-white);\n border: none;\n color: var(--color-uva-black);\n display: flex;\n padding: 0.65rem;\n width: 100%;\n}\n\n.context-menu__item:hover {\n background-color: var(--color-grey-300);\n}\n\n.context-menu__item-divider {\n border-bottom: 1px solid var(--color-grey-500);\n}\n\n.context-menu__wrapper--hidden,\n.context-menu__wrapper--hidden .context-menu {\n visibility: hidden;\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\n\nimport type { Position } from 'components/RteEditor/Plugins/ToolbarPlugin';\n\nimport styles from './TableCellContextMenu.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport type Actions =\n | 'insertRowAbove'\n | 'insertRowBelow'\n | 'deleteRow'\n | 'deleteTable'\n | 'insertColumnLeft'\n | 'insertColumnRight'\n | 'deleteColumn';\ninterface TableCellContextMenuProps {\n position: Position;\n parentScrollPosition: number;\n onAction: (action: Actions) => void;\n}\n\nconst CONTEXT_MENU_OFFSET = 25;\nconst WHITE_SPACE = 10;\nconst BUTTON_SHIFT = 4;\nconst BUTTON_RESET = 25;\n\nconst measureElement = (srcElement: HTMLElement) => {\n const measureElement = srcElement.cloneNode(true) as HTMLElement;\n measureElement.style.height = 'auto';\n measureElement.style.left = '-3000px';\n document.body.appendChild(measureElement);\n const height = measureElement.getBoundingClientRect().height;\n document.body.removeChild(measureElement);\n return height;\n};\n\nexport const TableCellContextMenu = ({ position, parentScrollPosition, onAction }: TableCellContextMenuProps) => {\n const t = useTranslation();\n const [isOpen, setIsOpen] = useState(false);\n const [isHidden, setIsHidden] = useState(false);\n const [localPosition, setLocalPosition] = useState<Position>({ xPos: 0, yPos: 0, height: 0 });\n const [menuHeight, setMenuHeight] = useState(0);\n const startScrollPosition = useRef(0);\n const menuRef = useRef<HTMLUListElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [editor] = useLexicalComposerContext();\n\n const handleAction = (action: Actions) => {\n onAction(action);\n setIsOpen(false);\n };\n\n const flipMenuIfNotInViewport = () => {\n const menuWidth = menuRef.current ? menuRef.current.getBoundingClientRect().width : 0;\n\n if (containerRef.current && menuRef.current && buttonRef.current) {\n if (localPosition.xPos < menuWidth && containerRef.current) {\n containerRef.current.style.left = `${menuWidth - localPosition.xPos + WHITE_SPACE}px`;\n buttonRef.current.style.right = `${menuWidth - localPosition.xPos + BUTTON_SHIFT + WHITE_SPACE}px`;\n } else {\n containerRef.current.style.left = '0px';\n buttonRef.current.style.right = `${BUTTON_SHIFT}px`;\n }\n\n if (!menuHeight) {\n setMenuHeight(measureElement(menuRef.current));\n }\n\n if (menuHeight > document.documentElement.clientHeight - localPosition.yPos) {\n containerRef.current.style.top = `-${menuHeight + localPosition.height}px`;\n buttonRef.current.style.top = `${menuHeight + BUTTON_SHIFT}px`;\n buttonRef.current.style.transform = 'rotate(180deg)';\n } else {\n containerRef.current.style.top = '0px';\n buttonRef.current.style.top = `-${BUTTON_RESET}px`;\n buttonRef.current.style.transform = 'none';\n }\n }\n };\n\n const setMenuPosition = () => {\n flipMenuIfNotInViewport();\n return `translate(${(localPosition?.xPos ?? 0) - (menuRef.current ? menuRef.current.getBoundingClientRect().width : 0)}px, ${localPosition.yPos - (parentScrollPosition - startScrollPosition.current)}px)`;\n };\n\n useEffect(() => {\n setLocalPosition(position);\n if (position) {\n startScrollPosition.current = parentScrollPosition;\n }\n setIsOpen(false);\n setIsHidden(false);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [position]);\n\n useEffect(() => {\n if (buttonRef.current) {\n const rect = buttonRef.current.getBoundingClientRect();\n const rootElement = editor.getRootElement();\n if (!rootElement) return;\n if (\n rect.top - rootElement.getBoundingClientRect().top <= 0 ||\n rect.top - rootElement.getBoundingClientRect().bottom + CONTEXT_MENU_OFFSET >= 0\n ) {\n setIsHidden(true);\n } else {\n setIsHidden(false);\n }\n flipMenuIfNotInViewport();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parentScrollPosition]);\n\n return (\n <div\n className={clsx(styles['context-menu__wrapper'], [isHidden && styles['context-menu__wrapper--hidden']])}\n style={{\n transform: `${setMenuPosition()}`,\n }}\n ref={containerRef}\n >\n <button\n type=\"button\"\n onClick={() => setIsOpen((prev) => !prev)}\n className={styles['context-menu__button']}\n ref={buttonRef}\n >\n <Icon name=\"CheveronDown\" size={16} />\n </button>\n <ul ref={menuRef} className={clsx(styles['context-menu'], isOpen && styles['context-menu--open'])}>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertRowAbove')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertRowAbove}\n >\n {t.table.insertRowAbove}\n </button>\n </li>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertRowBelow')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertRowBelow}\n >\n {t.table.insertRowBelow}\n </button>\n </li>\n <li className={styles['context-menu__item-divider']}>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteRow')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteRow}\n >\n {t.table.deleteRow}\n </button>\n </li>\n\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertColumnLeft')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertColumnLeft}\n >\n {t.table.insertColumnLeft}\n </button>\n </li>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertColumnRight')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertColumnRight}\n >\n {t.table.insertColumnRight}\n </button>\n </li>\n <li className={styles['context-menu__item-divider']}>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteColumn')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteColumn}\n >\n {t.table.deleteColumn}\n </button>\n </li>\n\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteTable')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteTable}\n >\n {t.table.deleteTable}\n </button>\n </li>\n </ul>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;GCyBM,IAAsB,IACtB,IAAc,IACd,IAAe,GACf,IAAe,IAEf,KAAkB,MAA4B;CAClD,IAAM,IAAiB,EAAW,UAAU,EAAI;CAGhD,AAFA,EAAe,MAAM,SAAS,QAC9B,EAAe,MAAM,OAAO,WAC5B,SAAS,KAAK,YAAY,CAAc;CACxC,IAAM,IAAS,EAAe,sBAAsB,EAAE;CAEtD,OADA,SAAS,KAAK,YAAY,CAAc,GACjC;AACT,GAEa,KAAwB,EAAE,aAAU,yBAAsB,kBAA0C;CAC/G,IAAM,IAAI,EAAe,GACnB,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,CAAC,GAAU,KAAe,EAAS,EAAK,GACxC,CAAC,GAAe,KAAoB,EAAmB;EAAE,MAAM;EAAG,MAAM;EAAG,QAAQ;CAAE,CAAC,GACtF,CAAC,GAAY,KAAiB,EAAS,CAAC,GACxC,IAAsB,EAAO,CAAC,GAC9B,IAAU,EAAyB,IAAI,GACvC,IAAe,EAAuB,IAAI,GAC1C,IAAY,EAA0B,IAAI,GAC1C,CAAC,KAAU,EAA0B,GAErC,KAAgB,MAAoB;EAExC,AADA,EAAS,CAAM,GACf,EAAU,EAAK;CACjB,GAEM,UAAgC;EACpC,IAAM,IAAY,EAAQ,UAAU,EAAQ,QAAQ,sBAAsB,EAAE,QAAQ;EAEpF,AAAI,EAAa,WAAW,EAAQ,WAAW,EAAU,YACnD,EAAc,OAAO,KAAa,EAAa,WACjD,EAAa,QAAQ,MAAM,OAAO,GAAG,IAAY,EAAc,OAAO,EAAY,KAClF,EAAU,QAAQ,MAAM,QAAQ,GAAG,IAAY,EAAc,OAAO,IAAe,EAAY,QAE/F,EAAa,QAAQ,MAAM,OAAO,OAClC,EAAU,QAAQ,MAAM,QAAQ,GAAG,EAAa,MAG7C,KACH,EAAc,EAAe,EAAQ,OAAO,CAAC,GAG3C,IAAa,SAAS,gBAAgB,eAAe,EAAc,QACrE,EAAa,QAAQ,MAAM,MAAM,IAAI,IAAa,EAAc,OAAO,KACvE,EAAU,QAAQ,MAAM,MAAM,GAAG,IAAa,EAAa,KAC3D,EAAU,QAAQ,MAAM,YAAY,qBAEpC,EAAa,QAAQ,MAAM,MAAM,OACjC,EAAU,QAAQ,MAAM,MAAM,IAAI,EAAa,KAC/C,EAAU,QAAQ,MAAM,YAAY;CAG1C;CAmCA,OA5BA,QAAgB;EAMd,AALA,EAAiB,CAAQ,GACrB,MACF,EAAoB,UAAU,IAEhC,EAAU,EAAK,GACf,EAAY,EAAK;CAEnB,GAAG,CAAC,CAAQ,CAAC,GAEb,QAAgB;EACd,IAAI,EAAU,SAAS;GACrB,IAAM,IAAO,EAAU,QAAQ,sBAAsB,GAC/C,IAAc,EAAO,eAAe;GAC1C,IAAI,CAAC,GAAa;GASlB,AAPE,EAAK,MAAM,EAAY,sBAAsB,EAAE,OAAO,KACtD,EAAK,MAAM,EAAY,sBAAsB,EAAE,SAAS,KAAuB,IAE/E,EAAY,EAAI,IAEhB,EAAY,EAAK,GAEnB,EAAwB;EAC1B;CAEF,GAAG,CAAC,CAAoB,CAAC,GAGvB,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,0BAA0B,CAAC,KAAY,EAAO,gCAAgC,CAAC;EACtG,OAAO,EACL,WAAW,GApCf,EAAwB,GACjB,cAAc,GAAe,QAAQ,MAAM,EAAQ,UAAU,EAAQ,QAAQ,sBAAsB,EAAE,QAAQ,GAAG,MAAM,EAAc,QAAQ,IAAuB,EAAoB,SAAS,OAoCrM;EACA,KAAK;YALP,CAOE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,GAAW,MAAS,CAAC,CAAI;GACxC,WAAW,EAAO;GAClB,KAAK;aAEL,kBAAC,GAAD;IAAM,MAAK;IAAe,MAAM;GAAK,CAAA;EAC/B,CAAA,GACR,kBAAC,MAAD;GAAI,KAAK;GAAS,WAAW,EAAK,EAAO,iBAAiB,KAAU,EAAO,qBAAqB;aAAhG;IACE,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,gBAAgB;KAC5C,WAAW,EAAO;KAClB,cAAY,EAAE,KAAK,OAAO;eAEzB,EAAE,MAAM;IACH,CAAA,EACN,CAAA;IACJ,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,gBAAgB;KAC5C,WAAW,EAAO;KAClB,cAAY,EAAE,KAAK,OAAO;eAEzB,EAAE,MAAM;IACH,CAAA,EACN,CAAA;IACJ,kBAAC,MAAD;KAAI,WAAW,EAAO;eACpB,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAa,WAAW;MACvC,WAAW,EAAO;MAClB,cAAY,EAAE,KAAK,OAAO;gBAEzB,EAAE,MAAM;KACH,CAAA;IACN,CAAA;IAEJ,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,kBAAkB;KAC9C,WAAW,EAAO;KAClB,cAAY,EAAE,KAAK,OAAO;eAEzB,EAAE,MAAM;IACH,CAAA,EACN,CAAA;IACJ,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,mBAAmB;KAC/C,WAAW,EAAO;KAClB,cAAY,EAAE,KAAK,OAAO;eAEzB,EAAE,MAAM;IACH,CAAA,EACN,CAAA;IACJ,kBAAC,MAAD;KAAI,WAAW,EAAO;eACpB,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAa,cAAc;MAC1C,WAAW,EAAO;MAClB,cAAY,EAAE,KAAK,OAAO;gBAEzB,EAAE,MAAM;KACH,CAAA;IACN,CAAA;IAEJ,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,aAAa;KACzC,WAAW,EAAO;KAClB,cAAY,EAAE,KAAK,OAAO;eAEzB,EAAE,MAAM;IACH,CAAA,EACN,CAAA;GACF;IACD;;AAET"}
|
|
1
|
+
{"version":3,"file":"TableCellContextMenu-Cu5iXYSJ.js","names":[],"sources":["../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.module.css","../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.tsx"],"sourcesContent":[".context-menu__wrapper {\n left: 0;\n min-width: 10rem;\n position: fixed;\n top: 0;\n visibility: visible;\n z-index: 1000;\n}\n\n.context-menu__button {\n align-items: center;\n background-color: var(--color-grey-300);\n border: 0;\n border-radius: 4px;\n color: var(--color-grey-700);\n display: flex;\n height: 1.35rem;\n justify-content: center;\n position: absolute;\n right: 0.25rem;\n top: -1.6rem;\n width: 1.35rem;\n}\n\n.context-menu {\n background-color: var(--color-uva-white);\n border: 1px solid var(--color-grey-500);\n border-radius: 4px;\n box-shadow: 0 2px 6px rgba(0 0 0 / 20%);\n height: 0;\n list-style-type: none;\n margin: -2px 0 0;\n overflow: hidden;\n padding: 0;\n visibility: hidden;\n}\n\n.context-menu--open {\n height: auto;\n visibility: visible;\n}\n\n.context-menu__item {\n align-items: center;\n background-color: var(--color-uva-white);\n border: none;\n color: var(--color-uva-black);\n display: flex;\n padding: 0.65rem;\n width: 100%;\n}\n\n.context-menu__item:hover {\n background-color: var(--color-grey-300);\n}\n\n.context-menu__item-divider {\n border-bottom: 1px solid var(--color-grey-500);\n}\n\n.context-menu__wrapper--hidden,\n.context-menu__wrapper--hidden .context-menu {\n visibility: hidden;\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\n\nimport type { Position } from 'components/RteEditor/Plugins/ToolbarPlugin';\n\nimport styles from './TableCellContextMenu.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport type Actions =\n | 'insertRowAbove'\n | 'insertRowBelow'\n | 'deleteRow'\n | 'deleteTable'\n | 'insertColumnLeft'\n | 'insertColumnRight'\n | 'deleteColumn';\ninterface TableCellContextMenuProps {\n position: Position;\n parentScrollPosition: number;\n onAction: (action: Actions) => void;\n}\n\nconst CONTEXT_MENU_OFFSET = 25;\nconst WHITE_SPACE = 10;\nconst BUTTON_SHIFT = 4;\nconst BUTTON_RESET = 25;\n\nconst measureElement = (srcElement: HTMLElement) => {\n const measureElement = srcElement.cloneNode(true) as HTMLElement;\n measureElement.style.height = 'auto';\n measureElement.style.left = '-3000px';\n document.body.appendChild(measureElement);\n const height = measureElement.getBoundingClientRect().height;\n document.body.removeChild(measureElement);\n return height;\n};\n\nexport const TableCellContextMenu = ({ position, parentScrollPosition, onAction }: TableCellContextMenuProps) => {\n const t = useTranslation();\n const [isOpen, setIsOpen] = useState(false);\n const [isHidden, setIsHidden] = useState(false);\n const [localPosition, setLocalPosition] = useState<Position>({ xPos: 0, yPos: 0, height: 0 });\n const [menuHeight, setMenuHeight] = useState(0);\n const startScrollPosition = useRef(0);\n const menuRef = useRef<HTMLUListElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [editor] = useLexicalComposerContext();\n\n const handleAction = (action: Actions) => {\n onAction(action);\n setIsOpen(false);\n };\n\n const flipMenuIfNotInViewport = () => {\n const menuWidth = menuRef.current ? menuRef.current.getBoundingClientRect().width : 0;\n\n if (containerRef.current && menuRef.current && buttonRef.current) {\n if (localPosition.xPos < menuWidth && containerRef.current) {\n containerRef.current.style.left = `${menuWidth - localPosition.xPos + WHITE_SPACE}px`;\n buttonRef.current.style.right = `${menuWidth - localPosition.xPos + BUTTON_SHIFT + WHITE_SPACE}px`;\n } else {\n containerRef.current.style.left = '0px';\n buttonRef.current.style.right = `${BUTTON_SHIFT}px`;\n }\n\n if (!menuHeight) {\n setMenuHeight(measureElement(menuRef.current));\n }\n\n if (menuHeight > document.documentElement.clientHeight - localPosition.yPos) {\n containerRef.current.style.top = `-${menuHeight + localPosition.height}px`;\n buttonRef.current.style.top = `${menuHeight + BUTTON_SHIFT}px`;\n buttonRef.current.style.transform = 'rotate(180deg)';\n } else {\n containerRef.current.style.top = '0px';\n buttonRef.current.style.top = `-${BUTTON_RESET}px`;\n buttonRef.current.style.transform = 'none';\n }\n }\n };\n\n const setMenuPosition = () => {\n flipMenuIfNotInViewport();\n return `translate(${(localPosition?.xPos ?? 0) - (menuRef.current ? menuRef.current.getBoundingClientRect().width : 0)}px, ${localPosition.yPos - (parentScrollPosition - startScrollPosition.current)}px)`;\n };\n\n useEffect(() => {\n setLocalPosition(position);\n if (position) {\n startScrollPosition.current = parentScrollPosition;\n }\n setIsOpen(false);\n setIsHidden(false);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [position]);\n\n useEffect(() => {\n if (buttonRef.current) {\n const rect = buttonRef.current.getBoundingClientRect();\n const rootElement = editor.getRootElement();\n if (!rootElement) return;\n if (\n rect.top - rootElement.getBoundingClientRect().top <= 0 ||\n rect.top - rootElement.getBoundingClientRect().bottom + CONTEXT_MENU_OFFSET >= 0\n ) {\n setIsHidden(true);\n } else {\n setIsHidden(false);\n }\n flipMenuIfNotInViewport();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parentScrollPosition]);\n\n return (\n <div\n className={clsx(styles['context-menu__wrapper'], [isHidden && styles['context-menu__wrapper--hidden']])}\n style={{\n transform: `${setMenuPosition()}`,\n }}\n ref={containerRef}\n >\n <button\n type=\"button\"\n onClick={() => setIsOpen((prev) => !prev)}\n className={styles['context-menu__button']}\n ref={buttonRef}\n >\n <Icon name=\"CheveronDown\" size={16} />\n </button>\n <ul ref={menuRef} className={clsx(styles['context-menu'], isOpen && styles['context-menu--open'])}>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertRowAbove')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertRowAbove}\n >\n {t.table.insertRowAbove}\n </button>\n </li>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertRowBelow')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertRowBelow}\n >\n {t.table.insertRowBelow}\n </button>\n </li>\n <li className={styles['context-menu__item-divider']}>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteRow')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteRow}\n >\n {t.table.deleteRow}\n </button>\n </li>\n\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertColumnLeft')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertColumnLeft}\n >\n {t.table.insertColumnLeft}\n </button>\n </li>\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('insertColumnRight')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableInsertColumnRight}\n >\n {t.table.insertColumnRight}\n </button>\n </li>\n <li className={styles['context-menu__item-divider']}>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteColumn')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteColumn}\n >\n {t.table.deleteColumn}\n </button>\n </li>\n\n <li>\n <button\n type=\"button\"\n onClick={() => handleAction('deleteTable')}\n className={styles['context-menu__item']}\n aria-label={t.aria.labels.tableDeleteTable}\n >\n {t.table.deleteTable}\n </button>\n </li>\n </ul>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;GCyBM,IAAsB,IACtB,IAAc,IACd,IAAe,GACf,IAAe,IAEf,KAAkB,MAA4B;CAClD,IAAM,IAAiB,EAAW,UAAU,EAAI;CAGhD,AAFA,EAAe,MAAM,SAAS,QAC9B,EAAe,MAAM,OAAO,WAC5B,SAAS,KAAK,YAAY,CAAc;CACxC,IAAM,IAAS,EAAe,sBAAsB,CAAC,CAAC;CAEtD,OADA,SAAS,KAAK,YAAY,CAAc,GACjC;AACT,GAEa,KAAwB,EAAE,aAAU,yBAAsB,kBAA0C;CAC/G,IAAM,IAAI,EAAe,GACnB,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,CAAC,GAAU,KAAe,EAAS,EAAK,GACxC,CAAC,GAAe,KAAoB,EAAmB;EAAE,MAAM;EAAG,MAAM;EAAG,QAAQ;CAAE,CAAC,GACtF,CAAC,GAAY,KAAiB,EAAS,CAAC,GACxC,IAAsB,EAAO,CAAC,GAC9B,IAAU,EAAyB,IAAI,GACvC,IAAe,EAAuB,IAAI,GAC1C,IAAY,EAA0B,IAAI,GAC1C,CAAC,KAAU,EAA0B,GAErC,KAAgB,MAAoB;EAExC,AADA,EAAS,CAAM,GACf,EAAU,EAAK;CACjB,GAEM,UAAgC;EACpC,IAAM,IAAY,EAAQ,UAAU,EAAQ,QAAQ,sBAAsB,CAAC,CAAC,QAAQ;EAEpF,AAAI,EAAa,WAAW,EAAQ,WAAW,EAAU,YACnD,EAAc,OAAO,KAAa,EAAa,WACjD,EAAa,QAAQ,MAAM,OAAO,GAAG,IAAY,EAAc,OAAO,EAAY,KAClF,EAAU,QAAQ,MAAM,QAAQ,GAAG,IAAY,EAAc,OAAO,IAAe,EAAY,QAE/F,EAAa,QAAQ,MAAM,OAAO,OAClC,EAAU,QAAQ,MAAM,QAAQ,GAAG,EAAa,MAG7C,KACH,EAAc,EAAe,EAAQ,OAAO,CAAC,GAG3C,IAAa,SAAS,gBAAgB,eAAe,EAAc,QACrE,EAAa,QAAQ,MAAM,MAAM,IAAI,IAAa,EAAc,OAAO,KACvE,EAAU,QAAQ,MAAM,MAAM,GAAG,IAAa,EAAa,KAC3D,EAAU,QAAQ,MAAM,YAAY,qBAEpC,EAAa,QAAQ,MAAM,MAAM,OACjC,EAAU,QAAQ,MAAM,MAAM,IAAI,EAAa,KAC/C,EAAU,QAAQ,MAAM,YAAY;CAG1C;CAmCA,OA5BA,QAAgB;EAMd,AALA,EAAiB,CAAQ,GACrB,MACF,EAAoB,UAAU,IAEhC,EAAU,EAAK,GACf,EAAY,EAAK;CAEnB,GAAG,CAAC,CAAQ,CAAC,GAEb,QAAgB;EACd,IAAI,EAAU,SAAS;GACrB,IAAM,IAAO,EAAU,QAAQ,sBAAsB,GAC/C,IAAc,EAAO,eAAe;GAC1C,IAAI,CAAC,GAAa;GASlB,AAPE,EAAK,MAAM,EAAY,sBAAsB,CAAC,CAAC,OAAO,KACtD,EAAK,MAAM,EAAY,sBAAsB,CAAC,CAAC,SAAS,KAAuB,IAE/E,EAAY,EAAI,IAEhB,EAAY,EAAK,GAEnB,EAAwB;EAC1B;CAEF,GAAG,CAAC,CAAoB,CAAC,GAGvB,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,0BAA0B,CAAC,KAAY,EAAO,gCAAgC,CAAC;EACtG,OAAO,EACL,WAAW,GApCf,EAAwB,GACjB,cAAc,GAAe,QAAQ,MAAM,EAAQ,UAAU,EAAQ,QAAQ,sBAAsB,CAAC,CAAC,QAAQ,GAAG,MAAM,EAAc,QAAQ,IAAuB,EAAoB,SAAS,OAoCrM;EACA,KAAK;YALP,CAOE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,GAAW,MAAS,CAAC,CAAI;GACxC,WAAW,EAAO;GAClB,KAAK;aAEL,kBAAC,GAAD;IAAM,MAAK;IAAe,MAAM;GAAK,CAAA;EAC/B,CAAA,GACR,kBAAC,MAAD;GAAI,KAAK;GAAS,WAAW,EAAK,EAAO,iBAAiB,KAAU,EAAO,qBAAqB;aAAhG;IACE,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,gBAAgB;KAC5C,WAAW,EAAO;KAClB,cAAY,EAAE,KAAK,OAAO;eAEzB,EAAE,MAAM;IACH,CAAA,EACN,CAAA;IACJ,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,gBAAgB;KAC5C,WAAW,EAAO;KAClB,cAAY,EAAE,KAAK,OAAO;eAEzB,EAAE,MAAM;IACH,CAAA,EACN,CAAA;IACJ,kBAAC,MAAD;KAAI,WAAW,EAAO;eACpB,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAa,WAAW;MACvC,WAAW,EAAO;MAClB,cAAY,EAAE,KAAK,OAAO;gBAEzB,EAAE,MAAM;KACH,CAAA;IACN,CAAA;IAEJ,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,kBAAkB;KAC9C,WAAW,EAAO;KAClB,cAAY,EAAE,KAAK,OAAO;eAEzB,EAAE,MAAM;IACH,CAAA,EACN,CAAA;IACJ,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,mBAAmB;KAC/C,WAAW,EAAO;KAClB,cAAY,EAAE,KAAK,OAAO;eAEzB,EAAE,MAAM;IACH,CAAA,EACN,CAAA;IACJ,kBAAC,MAAD;KAAI,WAAW,EAAO;eACpB,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAa,cAAc;MAC1C,WAAW,EAAO;MAClB,cAAY,EAAE,KAAK,OAAO;gBAEzB,EAAE,MAAM;KACH,CAAA;IACN,CAAA;IAEJ,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,aAAa;KACzC,WAAW,EAAO;KAClB,cAAY,EAAE,KAAK,OAAO;eAEzB,EAAE,MAAM;IACH,CAAA,EACN,CAAA;GACF;IACD;;AAET"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { t as e } from "./LexicalComposerContext.prod-
|
|
2
|
-
import {
|
|
3
|
-
import { l as i,
|
|
4
|
-
import {
|
|
1
|
+
import { t as e } from "./LexicalComposerContext.prod-D4HOlWII.js";
|
|
2
|
+
import { Qt as t, Vn as n, zt as r } from "./Lexical.prod-Dy5aDppc.js";
|
|
3
|
+
import { l as i, t as a } from "./LexicalUtils.prod-CjGUKarD.js";
|
|
4
|
+
import { C as o, S as s, _ as c, c as l, g as u, m as d, n as f, p, r as m } from "./LexicalTable.prod-Bf0is-op.js";
|
|
5
5
|
import { $createTableWrapperNode as h, TableWrapperNode as g } from "./components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js";
|
|
6
6
|
import { getEditorContentWidth as _, getEditorParrentCellWidth as v, tableHasContent as y } from "./components/RteEditor/Plugins/TablePlugin/helpers.js";
|
|
7
7
|
import { useCallback as b, useEffect as x, useLayoutEffect as S, useMemo as C, useRef as w, useState as T } from "react";
|
|
8
8
|
import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
|
|
9
9
|
import { createPortal as k } from "react-dom";
|
|
10
|
-
import './assets/TableCellResizerPlugin.css';//#region node_modules/.pnpm/@lexical+react@0.
|
|
10
|
+
import './assets/TableCellResizerPlugin.css';//#region node_modules/.pnpm/@lexical+react@0.46.0_react-dom@19.2.7_react@19.2.7__react@19.2.7_typescript@5.9.3_yjs@13.6.31/node_modules/@lexical/react/dist/useLexicalEditable.prod.mjs
|
|
11
11
|
var A = n ? S : x;
|
|
12
12
|
function j(e) {
|
|
13
13
|
return {
|
|
@@ -37,11 +37,11 @@ function L({ editor: e }) {
|
|
|
37
37
|
if (!t.getColWidths()) {
|
|
38
38
|
let n = t.getChildren(), r = t.getColumnCount(), a = Array(r).fill(void 0);
|
|
39
39
|
n[0].getChildren().forEach((n, o) => {
|
|
40
|
-
let
|
|
41
|
-
if (
|
|
40
|
+
let s = e.getElementByKey(n.getKey());
|
|
41
|
+
if (s && s.style.width) a[o] = parseInt(s.style.width, 10), s.style.width = "";
|
|
42
42
|
else if (y(t)) {
|
|
43
|
-
let n = t ? i(t,
|
|
44
|
-
a[o] = Math.max(
|
|
43
|
+
let n = t ? i(t, l) : null, s = (n ? v(n, r, e) : _(e)) / r;
|
|
44
|
+
a[o] = Math.max(s, F);
|
|
45
45
|
} else a[o] = F;
|
|
46
46
|
}), t.setColWidths(a);
|
|
47
47
|
}
|
|
@@ -53,7 +53,7 @@ function L({ editor: e }) {
|
|
|
53
53
|
}), [e]), x(() => {
|
|
54
54
|
let i = (i) => {
|
|
55
55
|
let a = i.target;
|
|
56
|
-
if (
|
|
56
|
+
if (t(a)) {
|
|
57
57
|
if (B) {
|
|
58
58
|
j({
|
|
59
59
|
x: i.clientX,
|
|
@@ -63,25 +63,25 @@ function L({ editor: e }) {
|
|
|
63
63
|
}
|
|
64
64
|
if (z(U(i)), !(S.current && S.current.contains(a)) && n.current !== a) {
|
|
65
65
|
n.current = a;
|
|
66
|
-
let
|
|
67
|
-
|
|
68
|
-
let i = t
|
|
66
|
+
let t = c(a);
|
|
67
|
+
t && M !== t ? e.getEditorState().read(() => {
|
|
68
|
+
let i = r(t.elem);
|
|
69
69
|
if (!i) throw Error("TableCellResizer: Table cell node not found.");
|
|
70
|
-
let
|
|
70
|
+
let o = d(i), c = s(o, e.getElementByKey(o.getKey()));
|
|
71
71
|
if (!c) throw Error("TableCellResizer: Table element not found.");
|
|
72
|
-
n.current = a, C.current = c.getBoundingClientRect(), L(
|
|
73
|
-
}, { editor: e }) :
|
|
72
|
+
n.current = a, C.current = c.getBoundingClientRect(), L(t);
|
|
73
|
+
}, { editor: e }) : t ?? H();
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}, a = () => {
|
|
77
77
|
z(!0);
|
|
78
|
-
},
|
|
78
|
+
}, o = () => {
|
|
79
79
|
z(!1);
|
|
80
|
-
},
|
|
81
|
-
t?.removeEventListener("mousemove", i), t?.removeEventListener("mousedown", a), t?.removeEventListener("mouseup",
|
|
80
|
+
}, l = e.registerRootListener((e, t) => {
|
|
81
|
+
t?.removeEventListener("mousemove", i), t?.removeEventListener("mousedown", a), t?.removeEventListener("mouseup", o), e?.addEventListener("mousemove", i), e?.addEventListener("mousedown", a), e?.addEventListener("mouseup", o);
|
|
82
82
|
});
|
|
83
83
|
return () => {
|
|
84
|
-
|
|
84
|
+
l();
|
|
85
85
|
};
|
|
86
86
|
}, [
|
|
87
87
|
M,
|
|
@@ -89,43 +89,43 @@ function L({ editor: e }) {
|
|
|
89
89
|
e,
|
|
90
90
|
H
|
|
91
91
|
]);
|
|
92
|
-
let W = (e) => e === "bottom", G = b((
|
|
92
|
+
let W = (e) => e === "bottom", G = b((t) => {
|
|
93
93
|
if (!M) throw Error("TableCellResizer: Expected active cell.");
|
|
94
94
|
e.update(() => {
|
|
95
|
-
let
|
|
96
|
-
if (!
|
|
97
|
-
let i =
|
|
95
|
+
let n = r(M.elem);
|
|
96
|
+
if (!o(n)) throw Error("TableCellResizer: Table cell node not found.");
|
|
97
|
+
let i = d(n), a = u(n) + n.getRowSpan() - 1, s = i.getChildren();
|
|
98
98
|
if (a >= s.length || a < 0) throw Error("Expected table cell to be inside of table row.");
|
|
99
|
-
let
|
|
100
|
-
if (!
|
|
101
|
-
let
|
|
102
|
-
if (
|
|
103
|
-
let t =
|
|
104
|
-
|
|
99
|
+
let c = s[a];
|
|
100
|
+
if (!p(c)) throw Error("Expected table row");
|
|
101
|
+
let l = c.getHeight();
|
|
102
|
+
if (l === void 0) {
|
|
103
|
+
let t = c.getChildren();
|
|
104
|
+
l = Math.min(...t.map((t) => K(t, e) ?? Infinity));
|
|
105
105
|
}
|
|
106
|
-
let f = Math.max(
|
|
107
|
-
|
|
106
|
+
let f = Math.max(l + t, P);
|
|
107
|
+
c.setHeight(f);
|
|
108
108
|
}, { tag: "skip-scroll-into-view" });
|
|
109
109
|
}, [M, e]), K = (e, t) => t.getElementByKey(e.getKey())?.clientHeight, q = (e, t) => {
|
|
110
110
|
for (let n = 0; n < t.length; n++) for (let r = 0; r < t[n].length; r++) if (t[n][r].cell === e) return r;
|
|
111
111
|
return -1;
|
|
112
|
-
}, J = b((
|
|
112
|
+
}, J = b((t) => {
|
|
113
113
|
if (!M) throw Error("TableCellResizer: Expected active cell.");
|
|
114
114
|
e.update(() => {
|
|
115
|
-
let e =
|
|
116
|
-
if (!
|
|
117
|
-
let
|
|
115
|
+
let e = r(M.elem);
|
|
116
|
+
if (!o(e)) throw Error("TableCellResizer: Table cell node not found.");
|
|
117
|
+
let n = d(e), [i] = m(n, null, null), a = q(e, i);
|
|
118
118
|
if (a === void 0) throw Error("TableCellResizer: Table column not found.");
|
|
119
|
-
let s =
|
|
119
|
+
let s = n.getColWidths();
|
|
120
120
|
if (!s) return;
|
|
121
121
|
let c = s[a];
|
|
122
122
|
if (c === void 0) return;
|
|
123
|
-
let
|
|
124
|
-
if (
|
|
125
|
-
let e =
|
|
123
|
+
let l = [...s];
|
|
124
|
+
if (l[a] = Math.max(c + t, F), n.setColWidths(l), a < n.getColumnCount() - 1) {
|
|
125
|
+
let e = n.getColWidths();
|
|
126
126
|
if (!e) return;
|
|
127
|
-
let
|
|
128
|
-
|
|
127
|
+
let r = [...e], i = a + 1, o = e[i];
|
|
128
|
+
r[i] = Math.max(o - t, F), n.setColWidths(r);
|
|
129
129
|
}
|
|
130
130
|
}, { tag: "skip-scroll-into-view" });
|
|
131
131
|
}, [M, e]), Y = b((e) => {
|
|
@@ -205,4 +205,4 @@ var R = () => {
|
|
|
205
205
|
//#endregion
|
|
206
206
|
export { M as n, R as t };
|
|
207
207
|
|
|
208
|
-
//# sourceMappingURL=TableCellResizerPlugin-
|
|
208
|
+
//# sourceMappingURL=TableCellResizerPlugin-Bb2blXnq.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableCellResizerPlugin-Bb2blXnq.js","names":["o","t","e","r","i","n","c"],"sources":["../node_modules/.pnpm/@lexical+react@0.46.0_react-dom@19.2.7_react@19.2.7__react@19.2.7_typescript@5.9.3_yjs@13.6.31/node_modules/@lexical/react/dist/useLexicalEditable.prod.mjs","../src/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.module.css","../src/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport{useLexicalComposerContext as r}from\"@lexical/react/LexicalComposerContext\";import{useLayoutEffect as t,useEffect as e,useMemo as i,useState as n,useRef as c}from\"react\";import{CAN_USE_DOM as o}from\"lexical\";const u=o?t:e;function a(r){return{initialValueFn:()=>r.isEditable(),subscribe:t=>r.registerEditableListener(t)}}function l(){return function(t){const[e]=r(),o=i(()=>t(e),[e,t]),[a,l]=n(()=>o.initialValueFn()),s=c(a);return u(()=>{const{initialValueFn:r,subscribe:t}=o,e=r();return s.current!==e&&(s.current=e,l(e)),t(r=>{s.current=r,l(r)})},[o,t]),a}(a)}export{l as useLexicalEditable};\n","/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n *\r\n */\n\n.table-cell-resizer__resizer {\n position: absolute;\n}\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\r\n/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n * Modified from original to fit project needs wim jurriaans.\r\n *\r\n *\r\n */\r\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\r\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable';\r\nimport {\r\n $computeTableMapSkipCellCheck,\r\n $getTableNodeFromLexicalNodeOrThrow,\r\n $getTableRowIndexFromTableCellNode,\r\n $isTableCellNode,\r\n $isTableRowNode,\r\n TableNode,\r\n getDOMCellFromTarget,\r\n getTableElement,\r\n TableCellNode,\r\n} from '@lexical/table';\r\nimport { $getNearestNodeOfType, calculateZoomLevel } from '@lexical/utils';\r\nimport { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';\r\nimport { createPortal } from 'react-dom';\r\n\r\nimport type { LexicalEditor } from 'lexical';\r\nimport type { TableDOMCell, TableMapType, TableRowNode } from '@lexical/table';\r\nimport type { JSX, MouseEventHandler, ReactPortal } from 'react';\r\n\r\nimport styles from './TableCellResizerPlugin.module.css';\r\n\r\nimport {\r\n getEditorContentWidth,\r\n getEditorParrentCellWidth,\r\n tableHasContent,\r\n} from 'components/RteEditor/Plugins/TablePlugin/helpers';\r\nimport { $createTableWrapperNode, TableWrapperNode } from 'components/RteEditor/nodes';\r\n\r\ntype MousePosition = {\r\n x: number;\r\n y: number;\r\n};\r\n\r\ntype MouseDraggingDirection = 'right' | 'bottom';\r\n\r\nconst MIN_ROW_HEIGHT = 33;\r\nconst MIN_COLUMN_WIDTH = 32;\r\nconst HALF = 2;\r\n\r\nfunction TableCellResizer({ editor }: { editor: LexicalEditor }): JSX.Element {\r\n const targetRef = useRef<HTMLElement | null>(null);\r\n const resizerRef = useRef<HTMLDivElement | null>(null);\r\n const tableRectRef = useRef<DOMRect | null>(null);\r\n\r\n const mouseStartPosRef = useRef<MousePosition | null>(null);\r\n const [mouseCurrentPos, updateMouseCurrentPos] = useState<MousePosition | null>(null);\r\n\r\n const [activeCell, updateActiveCell] = useState<TableDOMCell | null>(null);\r\n const [isMouseDown, updateIsMouseDown] = useState<boolean>(false);\r\n const [draggingDirection, updateDraggingDirection] = useState<MouseDraggingDirection | null>(null);\r\n\r\n const resetState = useCallback(() => {\r\n updateActiveCell(null);\r\n targetRef.current = null;\r\n updateDraggingDirection(null);\r\n mouseStartPosRef.current = null;\r\n tableRectRef.current = null;\r\n }, []);\r\n\r\n const isMouseDownOnEvent = (event: MouseEvent) => {\r\n return (event.buttons & 1) === 1;\r\n };\r\n\r\n useEffect(() => {\r\n return editor.registerNodeTransform(TableNode, (tableNode) => {\r\n // modification: set default column widths if not defined or table cells of imported tables has the width set\r\n if (!tableNode.getColWidths()) {\r\n const tableRows = tableNode.getChildren();\r\n const columnCount = tableNode.getColumnCount();\r\n const colWidths = new Array(columnCount).fill(undefined);\r\n\r\n const firstRow = tableRows[0] as TableRowNode;\r\n const cells = firstRow.getChildren();\r\n cells.forEach((cell, colIdx) => {\r\n const domCell = editor.getElementByKey(cell.getKey());\r\n if (domCell && domCell.style.width) {\r\n colWidths[colIdx] = parseInt(domCell.style.width, 10);\r\n domCell.style.width = '';\r\n } else if (tableHasContent(tableNode)) {\r\n const isNested = tableNode ? $getNearestNodeOfType(tableNode, TableCellNode) : null;\r\n\r\n const availableWidth = isNested\r\n ? getEditorParrentCellWidth(isNested, columnCount, editor)\r\n : getEditorContentWidth(editor);\r\n const newColWidth = availableWidth / columnCount;\r\n colWidths[colIdx] = Math.max(newColWidth, MIN_COLUMN_WIDTH);\r\n } else {\r\n colWidths[colIdx] = MIN_COLUMN_WIDTH;\r\n }\r\n });\r\n\r\n tableNode.setColWidths(colWidths);\r\n }\r\n\r\n // modification: wrap table node in a wrapper node if there is no wrapper node present\r\n if (tableNode && !(tableNode.getParent() instanceof TableWrapperNode)) {\r\n const wrapperNode = $createTableWrapperNode();\r\n tableNode.replace(wrapperNode);\r\n wrapperNode.append(tableNode);\r\n }\r\n\r\n return tableNode;\r\n });\r\n }, [editor]);\r\n\r\n useEffect(() => {\r\n const onMouseMove = (event: MouseEvent) => {\r\n const target = event.target;\r\n if (!isHTMLElement(target)) {\r\n return;\r\n }\r\n\r\n if (draggingDirection) {\r\n updateMouseCurrentPos({\r\n x: event.clientX,\r\n y: event.clientY,\r\n });\r\n return;\r\n }\r\n updateIsMouseDown(isMouseDownOnEvent(event));\r\n if (resizerRef.current && resizerRef.current.contains(target)) {\r\n return;\r\n }\r\n\r\n if (targetRef.current !== target) {\r\n targetRef.current = target;\r\n const cell = getDOMCellFromTarget(target);\r\n\r\n if (cell && activeCell !== cell) {\r\n editor.getEditorState().read(\r\n () => {\r\n const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);\r\n if (!tableCellNode) {\r\n throw new Error('TableCellResizer: Table cell node not found.');\r\n }\r\n\r\n const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);\r\n const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));\r\n\r\n if (!tableElement) {\r\n throw new Error('TableCellResizer: Table element not found.');\r\n }\r\n\r\n targetRef.current = target;\r\n tableRectRef.current = tableElement.getBoundingClientRect();\r\n updateActiveCell(cell);\r\n },\r\n { editor }\r\n );\r\n } else if (cell == null) {\r\n resetState();\r\n }\r\n }\r\n };\r\n\r\n const onMouseDown = () => {\r\n updateIsMouseDown(true);\r\n };\r\n\r\n const onMouseUp = () => {\r\n updateIsMouseDown(false);\r\n };\r\n\r\n const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {\r\n prevRootElement?.removeEventListener('mousemove', onMouseMove);\r\n prevRootElement?.removeEventListener('mousedown', onMouseDown);\r\n prevRootElement?.removeEventListener('mouseup', onMouseUp);\r\n rootElement?.addEventListener('mousemove', onMouseMove);\r\n rootElement?.addEventListener('mousedown', onMouseDown);\r\n rootElement?.addEventListener('mouseup', onMouseUp);\r\n });\r\n\r\n return () => {\r\n removeRootListener();\r\n };\r\n }, [activeCell, draggingDirection, editor, resetState]);\r\n\r\n const isHeightChanging = (direction: MouseDraggingDirection) => {\r\n if (direction === 'bottom') {\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const updateRowHeight = useCallback(\r\n (heightChange: number) => {\r\n if (!activeCell) {\r\n throw new Error('TableCellResizer: Expected active cell.');\r\n }\r\n\r\n editor.update(\r\n () => {\r\n const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);\r\n if (!$isTableCellNode(tableCellNode)) {\r\n throw new Error('TableCellResizer: Table cell node not found.');\r\n }\r\n\r\n const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);\r\n\r\n const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode) + tableCellNode.getRowSpan() - 1;\r\n\r\n const tableRows = tableNode.getChildren();\r\n\r\n if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {\r\n throw new Error('Expected table cell to be inside of table row.');\r\n }\r\n\r\n const tableRow = tableRows[tableRowIndex];\r\n\r\n if (!$isTableRowNode(tableRow)) {\r\n throw new Error('Expected table row');\r\n }\r\n\r\n let height = tableRow.getHeight();\r\n if (height === undefined) {\r\n const rowCells = tableRow.getChildren<TableCellNode>();\r\n height = Math.min(...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity));\r\n }\r\n\r\n const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);\r\n tableRow.setHeight(newHeight);\r\n },\r\n { tag: 'skip-scroll-into-view' }\r\n );\r\n },\r\n [activeCell, editor]\r\n );\r\n\r\n const getCellNodeHeight = (cell: TableCellNode, activeEditor: LexicalEditor): number | undefined => {\r\n const domCellNode = activeEditor.getElementByKey(cell.getKey());\r\n return domCellNode?.clientHeight;\r\n };\r\n\r\n const getCellColumnIndex = (tableCellNode: TableCellNode, tableMap: TableMapType) => {\r\n for (let row = 0; row < tableMap.length; row++) {\r\n for (let column = 0; column < tableMap[row].length; column++) {\r\n if (tableMap[row][column].cell === tableCellNode) {\r\n return column;\r\n }\r\n }\r\n }\r\n return -1;\r\n };\r\n\r\n const updateColumnWidth = useCallback(\r\n (widthChange: number) => {\r\n if (!activeCell) {\r\n throw new Error('TableCellResizer: Expected active cell.');\r\n }\r\n editor.update(\r\n () => {\r\n const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);\r\n if (!$isTableCellNode(tableCellNode)) {\r\n throw new Error('TableCellResizer: Table cell node not found.');\r\n }\r\n\r\n const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);\r\n const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);\r\n const columnIndex = getCellColumnIndex(tableCellNode, tableMap);\r\n if (columnIndex === undefined) {\r\n throw new Error('TableCellResizer: Table column not found.');\r\n }\r\n\r\n const colWidths = tableNode.getColWidths();\r\n if (!colWidths) {\r\n return;\r\n }\r\n const width = colWidths[columnIndex];\r\n if (width === undefined) {\r\n return;\r\n }\r\n const newColWidths = [...colWidths];\r\n const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);\r\n newColWidths[columnIndex] = newWidth;\r\n tableNode.setColWidths(newColWidths);\r\n\r\n // modification: when resizing a column, also resize the next column so the table doesn't overflow\r\n if (columnIndex < tableNode.getColumnCount() - 1) {\r\n const nextColWidths = tableNode.getColWidths();\r\n if (!nextColWidths) {\r\n return;\r\n }\r\n const newNextColWidths = [...nextColWidths];\r\n const newColumnIndex = columnIndex + 1;\r\n const newNextWidth = nextColWidths[newColumnIndex];\r\n const nextWidth = Math.max(newNextWidth - widthChange, MIN_COLUMN_WIDTH);\r\n newNextColWidths[newColumnIndex] = nextWidth;\r\n tableNode.setColWidths(newNextColWidths);\r\n }\r\n },\r\n { tag: 'skip-scroll-into-view' }\r\n );\r\n },\r\n [activeCell, editor]\r\n );\r\n\r\n const mouseUpHandler = useCallback(\r\n (direction: MouseDraggingDirection) => {\r\n const handler = (event: MouseEvent) => {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n if (!activeCell) {\r\n throw new Error('TableCellResizer: Expected active cell.');\r\n }\r\n\r\n if (mouseStartPosRef.current) {\r\n const { x, y } = mouseStartPosRef.current;\r\n\r\n if (activeCell === null) {\r\n return;\r\n }\r\n const zoom = calculateZoomLevel(event.target as Element);\r\n\r\n if (isHeightChanging(direction)) {\r\n const heightChange = (event.clientY - y) / zoom;\r\n updateRowHeight(heightChange);\r\n } else {\r\n const widthChange = (event.clientX - x) / zoom;\r\n updateColumnWidth(widthChange);\r\n }\r\n\r\n resetState();\r\n document.removeEventListener('mouseup', handler);\r\n }\r\n };\r\n return handler;\r\n },\r\n [activeCell, resetState, updateColumnWidth, updateRowHeight]\r\n );\r\n\r\n const toggleResize = useCallback(\r\n (direction: MouseDraggingDirection): MouseEventHandler<HTMLDivElement> =>\r\n (event) => {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n if (!activeCell) {\r\n throw new Error('TableCellResizer: Expected active cell.');\r\n }\r\n\r\n mouseStartPosRef.current = {\r\n x: event.clientX,\r\n y: event.clientY,\r\n };\r\n updateMouseCurrentPos(mouseStartPosRef.current);\r\n updateDraggingDirection(direction);\r\n\r\n document.addEventListener('mouseup', mouseUpHandler(direction));\r\n },\r\n [activeCell, mouseUpHandler]\r\n );\r\n\r\n const getResizers = useCallback(() => {\r\n if (activeCell) {\r\n const { height, width, top, left } = activeCell.elem.getBoundingClientRect();\r\n const zoom = calculateZoomLevel(activeCell.elem);\r\n const zoneWidth = 10; // Pixel width of the zone where you can drag the edge\r\n const styles = {\r\n bottom: {\r\n backgroundColor: 'none',\r\n cursor: 'ns-resize',\r\n height: `${zoneWidth}px`,\r\n left: `${window.pageXOffset + left}px`,\r\n top: `${window.pageYOffset + top + height - zoneWidth / HALF}px`,\r\n width: `${width}px`,\r\n zIndex: 5000,\r\n },\r\n right: {\r\n backgroundColor: 'none',\r\n cursor: 'ew-resize',\r\n height: `${height}px`,\r\n left: `${window.pageXOffset + left + width - zoneWidth / HALF}px`,\r\n top: `${window.pageYOffset + top}px`,\r\n width: `${zoneWidth}px`,\r\n zIndex: 5000,\r\n },\r\n };\r\n\r\n const tableRect = tableRectRef.current;\r\n\r\n if (draggingDirection && mouseCurrentPos && tableRect) {\r\n if (isHeightChanging(draggingDirection)) {\r\n styles[draggingDirection].left = `${window.pageXOffset + tableRect.left}px`;\r\n styles[draggingDirection].top = `${window.pageYOffset + mouseCurrentPos.y / zoom}px`;\r\n styles[draggingDirection].height = '3px';\r\n styles[draggingDirection].width = `${tableRect.width}px`;\r\n } else {\r\n styles[draggingDirection].top = `${window.pageYOffset + tableRect.top}px`;\r\n styles[draggingDirection].left = `${window.pageXOffset + mouseCurrentPos.x / zoom}px`;\r\n styles[draggingDirection].width = '3px';\r\n styles[draggingDirection].height = `${tableRect.height}px`;\r\n }\r\n\r\n styles[draggingDirection].backgroundColor = '#adf';\r\n }\r\n\r\n return styles;\r\n }\r\n\r\n return {\r\n bottom: null,\r\n left: null,\r\n right: null,\r\n top: null,\r\n };\r\n }, [activeCell, draggingDirection, mouseCurrentPos]);\r\n\r\n const resizerStyles = getResizers();\r\n\r\n return (\r\n <div ref={resizerRef}>\r\n {activeCell != null && !isMouseDown && (\r\n <>\r\n <div\r\n className={styles['table-cell-resizer__resizer']}\r\n style={resizerStyles.right || undefined}\r\n onMouseDown={toggleResize('right')}\r\n />\r\n <div\r\n className={styles['table-cell-resizer__resizer']}\r\n style={resizerStyles.bottom || undefined}\r\n onMouseDown={toggleResize('bottom')}\r\n />\r\n </>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nexport const TableCellResizerPlugin = (): null | ReactPortal => {\r\n const [editor] = useLexicalComposerContext();\r\n const isEditable = useLexicalEditable();\r\n\r\n return useMemo(\r\n () => (isEditable ? createPortal(<TableCellResizer editor={editor} />, document.body) : null),\r\n [editor, isEditable]\r\n );\r\n};\r\n"],"x_google_ignoreList":[0],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VarIndicator-D0cnlcIf.js","names":[],"sources":["../src/components/VarIndicator/VarIndicator.module.css","../src/components/VarIndicator/VarIndicator.tsx"],"sourcesContent":["/* \n TODO: if the right semantic names are available we put them in the tokens file.\n It is also an attempt (test) to give tokens semantic names for feature benefits\n*/\n\n:root {\n /* Semantic names */\n --color-active: var(--color-forest-700);\n --color-background-active: var(--color-forest-100);\n --color-background-active-hover: var(--color-forest-200);\n --color-background-draft: var(--color-navy-100);\n --color-background-draft-hover: var(--color-navy-200);\n --color-background-submitted: var(--color-orange-100);\n --color-background-submitted-hover: var(--color-orange-200);\n --color-border-active: var(--color-forest-700);\n --color-border-draft: var(--color-navy-600);\n --color-border-submitted: var(--color-orange-900);\n --color-draft: var(--color-navy-600);\n --color-draft-hover: var(--color-uva-white);\n --color-label: var(--color-uva-black);\n --color-submitted: var(--color-orange-900);\n --color-submitted-hover: var(--color-uva-white);\n /* Global vars */\n --border-radius-var-indicator: 0.25rem;\n}\n\n.var-indicator__container {\n align-items: center;\n appearance: none;\n border: 1px solid;\n border-radius: var(--border-radius-var-indicator);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: var(--font-size-default);\n font-weight: var(--semibold);\n gap: 0.375rem;\n height: 2rem;\n justify-content: center;\n line-height: inherit;\n margin: 0;\n padding: 0 0.75rem 0 0.5rem;\n white-space: nowrap;\n}\n\n.var-indicator__label {\n color: var(--color-label);\n}\n\n.var-indicator__step-container {\n align-items: center;\n display: inline-flex;\n height: 100%;\n justify-content: flex-start;\n}\n\n.var-indicator__step-container > svg {\n margin: 0 -0.5rem;\n}\n\n.var-indicator__container--compact {\n padding: 0;\n position: relative;\n width: 2rem;\n}\n\n.var-indicator__container--compact > svg {\n margin: 0;\n}\n\n.var-indicator__container--compact-flyover-wrapper {\n display: none;\n height: 2rem;\n position: absolute;\n right: -1px;\n top: -1px;\n width: auto;\n z-index: 1;\n}\n\n.var-indicator__container--compact:hover .var-indicator__container--compact-flyover-wrapper {\n display: flex;\n}\n\n.var-indicator__container--draft,\n.var-indicator__container--rejected,\n.var-indicator__container--draft .var-indicator__container--compact-flyover-wrapper,\n.var-indicator__container--rejected .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-draft);\n border-color: var(--color-border-draft);\n color: var(--color-draft);\n}\n\n.var-indicator__container--draft:hover,\n.var-indicator__container--rejected:hover,\n.var-indicator__container--draft:hover .var-indicator__container--compact-flyover-wrapper,\n.var-indicator__container--rejected:hover .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-draft-hover);\n}\n\n.var-indicator__container--submitted,\n.var-indicator__container--submitted .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-submitted);\n border-color: var(--color-border-submitted);\n color: var(--color-submitted);\n}\n\n.var-indicator__container--submitted:hover,\n.var-indicator__container--submitted:hover .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-submitted-hover);\n}\n\n.var-indicator__container--active,\n.var-indicator__container--active .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-active);\n border-color: var(--color-border-active);\n color: var(--color-active);\n}\n\n.var-indicator__container--active:hover,\n.var-indicator__container--active:hover .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-active-hover);\n}\n","import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './VarIndicator.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type StatusType = 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE';\n\nexport interface VarIndicatorProps {\n /** Label on the indicator */\n label: Record<StatusType, string>;\n /** Status type 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE' */\n variant?: StatusType;\n /** Maximum number of steps if variant is 'SUBMITTED' */\n maxSteps?: number;\n /** Current step if variant is 'SUBMITTED' */\n currentStep?: number;\n /** If set shows compact view and opens to the left on hover */\n isCompact?: boolean;\n onClick?: () => void;\n}\n\nconst ICON_NAMES = {\n DRAFT: 'CircleLarge',\n REJECTED: 'CircleLarge',\n SUBMITTED: 'CircleLargeDotted',\n ACTIVE: 'SignalActive',\n};\n\nexport const VarIndicator = ({\n label,\n variant = 'DRAFT',\n maxSteps,\n currentStep = 1,\n isCompact,\n onClick,\n}: VarIndicatorProps) => {\n const IndicatorContent = () => (\n <>\n <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n <span className={styles['var-indicator__label']}>{label[`${variant}`]}</span>\n {maxSteps &&\n maxSteps > 0 &&\n variant === 'SUBMITTED' &&\n Array.from({ length: maxSteps }, (_, idx) => idx + 1).map((step) => (\n <div key={step} className={styles['var-indicator__step-container']}>\n <Icon name={step <= currentStep ? 'CircleSmallFilled' : 'CircleSmall'} />\n </div>\n ))}\n </>\n );\n\n return (\n <button\n className={clsx(\n styles['var-indicator__container'],\n styles[`var-indicator__container--${variant.toLowerCase()}`],\n {\n [styles['var-indicator__container--compact']]: isCompact,\n }\n )}\n onClick={onClick}\n >\n {isCompact ? (\n <>\n <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n <div\n className={clsx(\n styles['var-indicator__container'],\n styles['var-indicator__container--compact-flyover-wrapper']\n )}\n >\n <IndicatorContent />\n </div>\n </>\n ) : (\n <IndicatorContent />\n )}\n </button>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;GCwBM,IAAa;CACjB,OAAO;CACP,UAAU;CACV,WAAW;CACX,QAAQ;AACV,GAEa,KAAgB,EAC3B,UACA,aAAU,SACV,aACA,iBAAc,GACd,cACA,iBACuB;CACvB,IAAM,UACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GAAM,MAAM,EAAW;GAA+B,MAAM;EAAK,CAAA;EACjE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAA0B,EAAM,GAAG;EAAiB,CAAA;EAC3E,KACC,IAAW,KACX,MAAY,eACZ,MAAM,KAAK,EAAE,QAAQ,EAAS,IAAI,GAAG,MAAQ,IAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"VarIndicator-D0cnlcIf.js","names":[],"sources":["../src/components/VarIndicator/VarIndicator.module.css","../src/components/VarIndicator/VarIndicator.tsx"],"sourcesContent":["/* \n TODO: if the right semantic names are available we put them in the tokens file.\n It is also an attempt (test) to give tokens semantic names for feature benefits\n*/\n\n:root {\n /* Semantic names */\n --color-active: var(--color-forest-700);\n --color-background-active: var(--color-forest-100);\n --color-background-active-hover: var(--color-forest-200);\n --color-background-draft: var(--color-navy-100);\n --color-background-draft-hover: var(--color-navy-200);\n --color-background-submitted: var(--color-orange-100);\n --color-background-submitted-hover: var(--color-orange-200);\n --color-border-active: var(--color-forest-700);\n --color-border-draft: var(--color-navy-600);\n --color-border-submitted: var(--color-orange-900);\n --color-draft: var(--color-navy-600);\n --color-draft-hover: var(--color-uva-white);\n --color-label: var(--color-uva-black);\n --color-submitted: var(--color-orange-900);\n --color-submitted-hover: var(--color-uva-white);\n /* Global vars */\n --border-radius-var-indicator: 0.25rem;\n}\n\n.var-indicator__container {\n align-items: center;\n appearance: none;\n border: 1px solid;\n border-radius: var(--border-radius-var-indicator);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: var(--font-size-default);\n font-weight: var(--semibold);\n gap: 0.375rem;\n height: 2rem;\n justify-content: center;\n line-height: inherit;\n margin: 0;\n padding: 0 0.75rem 0 0.5rem;\n white-space: nowrap;\n}\n\n.var-indicator__label {\n color: var(--color-label);\n}\n\n.var-indicator__step-container {\n align-items: center;\n display: inline-flex;\n height: 100%;\n justify-content: flex-start;\n}\n\n.var-indicator__step-container > svg {\n margin: 0 -0.5rem;\n}\n\n.var-indicator__container--compact {\n padding: 0;\n position: relative;\n width: 2rem;\n}\n\n.var-indicator__container--compact > svg {\n margin: 0;\n}\n\n.var-indicator__container--compact-flyover-wrapper {\n display: none;\n height: 2rem;\n position: absolute;\n right: -1px;\n top: -1px;\n width: auto;\n z-index: 1;\n}\n\n.var-indicator__container--compact:hover .var-indicator__container--compact-flyover-wrapper {\n display: flex;\n}\n\n.var-indicator__container--draft,\n.var-indicator__container--rejected,\n.var-indicator__container--draft .var-indicator__container--compact-flyover-wrapper,\n.var-indicator__container--rejected .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-draft);\n border-color: var(--color-border-draft);\n color: var(--color-draft);\n}\n\n.var-indicator__container--draft:hover,\n.var-indicator__container--rejected:hover,\n.var-indicator__container--draft:hover .var-indicator__container--compact-flyover-wrapper,\n.var-indicator__container--rejected:hover .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-draft-hover);\n}\n\n.var-indicator__container--submitted,\n.var-indicator__container--submitted .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-submitted);\n border-color: var(--color-border-submitted);\n color: var(--color-submitted);\n}\n\n.var-indicator__container--submitted:hover,\n.var-indicator__container--submitted:hover .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-submitted-hover);\n}\n\n.var-indicator__container--active,\n.var-indicator__container--active .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-active);\n border-color: var(--color-border-active);\n color: var(--color-active);\n}\n\n.var-indicator__container--active:hover,\n.var-indicator__container--active:hover .var-indicator__container--compact-flyover-wrapper {\n background-color: var(--color-background-active-hover);\n}\n","import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './VarIndicator.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type StatusType = 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE';\n\nexport interface VarIndicatorProps {\n /** Label on the indicator */\n label: Record<StatusType, string>;\n /** Status type 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE' */\n variant?: StatusType;\n /** Maximum number of steps if variant is 'SUBMITTED' */\n maxSteps?: number;\n /** Current step if variant is 'SUBMITTED' */\n currentStep?: number;\n /** If set shows compact view and opens to the left on hover */\n isCompact?: boolean;\n onClick?: () => void;\n}\n\nconst ICON_NAMES = {\n DRAFT: 'CircleLarge',\n REJECTED: 'CircleLarge',\n SUBMITTED: 'CircleLargeDotted',\n ACTIVE: 'SignalActive',\n};\n\nexport const VarIndicator = ({\n label,\n variant = 'DRAFT',\n maxSteps,\n currentStep = 1,\n isCompact,\n onClick,\n}: VarIndicatorProps) => {\n const IndicatorContent = () => (\n <>\n <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n <span className={styles['var-indicator__label']}>{label[`${variant}`]}</span>\n {maxSteps &&\n maxSteps > 0 &&\n variant === 'SUBMITTED' &&\n Array.from({ length: maxSteps }, (_, idx) => idx + 1).map((step) => (\n <div key={step} className={styles['var-indicator__step-container']}>\n <Icon name={step <= currentStep ? 'CircleSmallFilled' : 'CircleSmall'} />\n </div>\n ))}\n </>\n );\n\n return (\n <button\n className={clsx(\n styles['var-indicator__container'],\n styles[`var-indicator__container--${variant.toLowerCase()}`],\n {\n [styles['var-indicator__container--compact']]: isCompact,\n }\n )}\n onClick={onClick}\n >\n {isCompact ? (\n <>\n <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n <div\n className={clsx(\n styles['var-indicator__container'],\n styles['var-indicator__container--compact-flyover-wrapper']\n )}\n >\n <IndicatorContent />\n </div>\n </>\n ) : (\n <IndicatorContent />\n )}\n </button>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;GCwBM,IAAa;CACjB,OAAO;CACP,UAAU;CACV,WAAW;CACX,QAAQ;AACV,GAEa,KAAgB,EAC3B,UACA,aAAU,SACV,aACA,iBAAc,GACd,cACA,iBACuB;CACvB,IAAM,UACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GAAM,MAAM,EAAW;GAA+B,MAAM;EAAK,CAAA;EACjE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAA0B,EAAM,GAAG;EAAiB,CAAA;EAC3E,KACC,IAAW,KACX,MAAY,eACZ,MAAM,KAAK,EAAE,QAAQ,EAAS,IAAI,GAAG,MAAQ,IAAM,CAAC,CAAC,CAAC,KAAK,MACzD,kBAAC,OAAD;GAAgB,WAAW,EAAO;aAChC,kBAAC,GAAD,EAAM,MAAM,KAAQ,IAAc,sBAAsB,cAAgB,CAAA;EACrE,GAFK,CAEL,CACN;CACH,EAAA,CAAA;CAGJ,OACE,kBAAC,UAAD;EACE,WAAW,EACT,EAAO,6BACP,EAAO,6BAA6B,EAAQ,YAAY,MACxD,GACG,EAAO,uCAAuC,EACjD,CACF;EACS;YAER,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAM,MAAM,EAAW;GAA+B,MAAM;EAAK,CAAA,GACjE,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,6BACP,EAAO,oDACT;aAEA,kBAAC,GAAD,CAAmB,CAAA;EAChB,CAAA,CACL,EAAA,CAAA,IAEF,kBAAC,GAAD,CAAmB,CAAA;CAEf,CAAA;AAEZ"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { B as e, D as t, I as n, L as r, N as i, R as a, V as o, a as s, i as c, r as l, u, z as d } from "./test-
|
|
1
|
+
import { B as e, D as t, I as n, L as r, N as i, R as a, V as o, a as s, i as c, r as l, u, z as d } from "./test-Gtly6H2f.js";
|
|
2
2
|
function f(e) {
|
|
3
3
|
return [e, ...e.querySelectorAll("*")].reduce((e, t) => ("shadowRoot" in t && t.shadowRoot && e.push(t.shadowRoot, ...f(t.shadowRoot)), e), []);
|
|
4
4
|
}
|
|
@@ -6742,32 +6742,32 @@ var wn = Object.create, Tn = Object.defineProperty, En = Object.getOwnPropertyDe
|
|
|
6742
6742
|
} }), er = Y({ "node_modules/.pnpm/get-proto@1.0.1/node_modules/get-proto/Object.getPrototypeOf.js"(e, t) {
|
|
6743
6743
|
t.exports = Mn().getPrototypeOf || null;
|
|
6744
6744
|
} }), tr = Y({ "node_modules/.pnpm/function-bind@1.1.2/node_modules/function-bind/implementation.js"(e, t) {
|
|
6745
|
-
var n =
|
|
6745
|
+
var n = Object.prototype.toString, r = Math.max, i = "[object Function]", a = function(e, t) {
|
|
6746
6746
|
for (var n = [], r = 0; r < e.length; r += 1) n[r] = e[r];
|
|
6747
6747
|
for (var i = 0; i < t.length; i += 1) n[i + e.length] = t[i];
|
|
6748
6748
|
return n;
|
|
6749
|
-
},
|
|
6749
|
+
}, o = function(e, t) {
|
|
6750
6750
|
for (var n = [], r = t || 0, i = 0; r < e.length; r += 1, i += 1) n[i] = e[r];
|
|
6751
6751
|
return n;
|
|
6752
|
-
},
|
|
6752
|
+
}, s = function(e, t) {
|
|
6753
6753
|
for (var n = "", r = 0; r < e.length; r += 1) n += e[r], r + 1 < e.length && (n += t);
|
|
6754
6754
|
return n;
|
|
6755
6755
|
};
|
|
6756
6756
|
t.exports = function(e) {
|
|
6757
6757
|
var t = this;
|
|
6758
|
-
if (typeof t != "function" ||
|
|
6759
|
-
for (var
|
|
6760
|
-
if (this instanceof
|
|
6761
|
-
var n = t.apply(this,
|
|
6758
|
+
if (typeof t != "function" || n.apply(t) !== i) throw TypeError("Function.prototype.bind called on incompatible " + t);
|
|
6759
|
+
for (var c = o(arguments, 1), l, u = function() {
|
|
6760
|
+
if (this instanceof l) {
|
|
6761
|
+
var n = t.apply(this, a(c, arguments));
|
|
6762
6762
|
return Object(n) === n ? n : this;
|
|
6763
6763
|
}
|
|
6764
|
-
return t.apply(e,
|
|
6765
|
-
},
|
|
6766
|
-
if (
|
|
6767
|
-
var
|
|
6768
|
-
|
|
6764
|
+
return t.apply(e, a(c, arguments));
|
|
6765
|
+
}, d = r(0, t.length - c.length), f = [], p = 0; p < d; p++) f[p] = "$" + p;
|
|
6766
|
+
if (l = Function("binder", "return function (" + s(f, ",") + "){ return binder.apply(this,arguments); }")(u), t.prototype) {
|
|
6767
|
+
var m = function() {};
|
|
6768
|
+
m.prototype = t.prototype, l.prototype = new m(), m.prototype = null;
|
|
6769
6769
|
}
|
|
6770
|
-
return
|
|
6770
|
+
return l;
|
|
6771
6771
|
};
|
|
6772
6772
|
} }), nr = Y({ "node_modules/.pnpm/function-bind@1.1.2/node_modules/function-bind/index.js"(e, t) {
|
|
6773
6773
|
var n = tr();
|
|
@@ -8440,4 +8440,4 @@ async function xs(e, t) {
|
|
|
8440
8440
|
//#endregion
|
|
8441
8441
|
export { p as _, Uo as a, Me as c, Qt as d, Xt as f, St as g, Ct as h, Wo as i, q as l, Fe as m, $o as n, Ja as o, Ie as p, xs as r, rn as s, fs as t, en as u };
|
|
8442
8442
|
|
|
8443
|
-
//# sourceMappingURL=chunk-5WKL7XVT-
|
|
8443
|
+
//# sourceMappingURL=chunk-5WKL7XVT-CvOIS3NE.js.map
|