@uva-glass/component-library 3.55.5 → 3.55.7
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/Accordion-DvblEUVu.js.map +1 -1
- package/dist/AccordionCard-BXy-plB7.js.map +1 -1
- package/dist/ActionList-O9w1hqNg.js.map +1 -1
- package/dist/AddCatalogueLinkForm-rph4K9P0.js.map +1 -1
- package/dist/CheckboxButtonBar-5UMIFMKH.js.map +1 -1
- package/dist/ClipboardButton-geHjMl2J.js.map +1 -1
- package/dist/ControlsButton-B1XRpMUM.js.map +1 -1
- package/dist/CopyableText-DkyhZ6wk.js.map +1 -1
- package/dist/Drawer-e7UFHVg9.js.map +1 -1
- package/dist/EmptyStateDataDisplay-D0QiI8nE.js.map +1 -1
- package/dist/ExpandableInfoPanel-CnBVVNlJ.js.map +1 -1
- package/dist/FeedbackBar-ByKp32HE.js.map +1 -1
- package/dist/FieldHint-fxnEOsVZ.js.map +1 -1
- package/dist/Input-Bn-arMaC.js.map +1 -1
- package/dist/InputField-BWAy19w9.js.map +1 -1
- package/dist/{Lexical.prod-sbwgNRjw.js → Lexical.prod-CqPLSi0R.js} +1194 -1096
- package/dist/Lexical.prod-CqPLSi0R.js.map +1 -0
- package/dist/LexicalClipboard.prod-BVw_sFpo.js +651 -0
- package/dist/LexicalClipboard.prod-BVw_sFpo.js.map +1 -0
- package/dist/LexicalComposerContext.prod-Ca-YN_fj.js.map +1 -1
- package/dist/{LexicalExtension.prod-jTSDl1mh.js → LexicalExtension.prod-CUQTgbur.js} +306 -289
- package/dist/LexicalExtension.prod-CUQTgbur.js.map +1 -0
- package/dist/{LexicalLink.prod-BKLNLyu8.js → LexicalLink.prod-DMhcqD9x.js} +209 -208
- package/dist/LexicalLink.prod-DMhcqD9x.js.map +1 -0
- package/dist/{LexicalList.prod-DEtc4lSr.js → LexicalList.prod-eYlcb5Ao.js} +208 -168
- package/dist/LexicalList.prod-eYlcb5Ao.js.map +1 -0
- package/dist/{LexicalTable.prod-CpIPDW6z.js → LexicalTable.prod-DlOxUQou.js} +787 -781
- package/dist/LexicalTable.prod-DlOxUQou.js.map +1 -0
- package/dist/LexicalUtils.prod-BqcriFWV.js +343 -0
- package/dist/LexicalUtils.prod-BqcriFWV.js.map +1 -0
- package/dist/{LinkContextMenu-CTkNPiIW.js → LinkContextMenu-ePn1iZ_z.js} +2 -2
- package/dist/{LinkContextMenu-CTkNPiIW.js.map → LinkContextMenu-ePn1iZ_z.js.map} +1 -1
- package/dist/MenuLink-Cm1yZO_5.js.map +1 -1
- package/dist/ModalDialog-N50NGnd4.js.map +1 -1
- package/dist/MultiSelectBox-Cuh_o-A1.js.map +1 -1
- package/dist/MultiSelectItem-BF5xRjz5.js.map +1 -1
- package/dist/Notification-CIhsHuF0.js.map +1 -1
- package/dist/OverlayStepBar-CjaoYdsh.js.map +1 -1
- package/dist/PageOverlay-S4xsqJha.js.map +1 -1
- package/dist/{PasteHandlerPlugin-YpQruA-w.js → PasteHandlerPlugin-BNp8ST0q.js} +5 -5
- package/dist/{PasteHandlerPlugin-YpQruA-w.js.map → PasteHandlerPlugin-BNp8ST0q.js.map} +1 -1
- package/dist/Periods-BYETtB6R.js.map +1 -1
- package/dist/ProgrammeCard-76gG7ksx.js.map +1 -1
- package/dist/RadioGroup-JeTjVp5B.js.map +1 -1
- package/dist/Slider-BlLyrET9.js.map +1 -1
- package/dist/SortableProvider-8HYiBXJS.js.map +1 -1
- package/dist/Spinner-BpElTDIu.js.map +1 -1
- package/dist/StatusPill-DM7n3I4W.js.map +1 -1
- package/dist/TableCellContextMenu-D0IMQr3E.js.map +1 -1
- package/dist/{TableCellResizerPlugin-Ceof6StD.js → TableCellResizerPlugin-Bc5y-Qbx.js} +37 -37
- package/dist/{TableCellResizerPlugin-Ceof6StD.js.map → TableCellResizerPlugin-Bc5y-Qbx.js.map} +1 -1
- package/dist/TextArea-CuASC9bX.js.map +1 -1
- package/dist/ToggleSwitch-C7z7JVtx.js.map +1 -1
- package/dist/Tooltip-D27p9kh4.js.map +1 -1
- package/dist/VarIndicator-C-GueOZD.js.map +1 -1
- package/dist/assets/{src/css/fonts.css → fonts.css} +4 -4
- package/dist/{chunk-DeC0fbbY.js → chunk-3e0lkp8x.js} +1 -1
- package/dist/{chunk-SZQXB3JV-KiB8lSa9.js → chunk-SZQXB3JV-D6GR5B4F.js} +2 -2
- package/dist/chunk-SZQXB3JV-D6GR5B4F.js.map +1 -0
- package/dist/{client-CHQ7u_QI.js → client-b7M3CmlC.js} +10 -10
- package/dist/{client-CHQ7u_QI.js.map → client-b7M3CmlC.js.map} +1 -1
- package/dist/clsx-BD2qMUU1.js.map +1 -1
- package/dist/components/Accordion/Accordion.stories.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.stories.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.stories.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/ButtonGroup/ButtonGroup.stories.js.map +1 -1
- package/dist/components/Buttons/Button.stories.js +1 -1
- package/dist/components/Buttons/Button.stories.js.map +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.stories.js.map +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.js.map +1 -1
- package/dist/components/Buttons/MenuButton.stories.js +1 -1
- package/dist/components/Buttons/MenuButton.stories.js.map +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.stories.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.stories.js.map +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/Chip/Chip.stories.js.map +1 -1
- package/dist/components/ControlsButton/ControlsButton.stories.js +1 -1
- package/dist/components/ControlsButton/ControlsButton.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/ExpandableInfoPanel/ExpandableInfoPanel.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/FeedbackBox/FeedbackBox.stories.js.map +1 -1
- package/dist/components/FieldHint/FieldHint.stories.js.map +1 -1
- package/dist/components/Fieldset/Fieldset.stories.js.map +1 -1
- package/dist/components/FormField/FormField.stories.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/FormInput.stories.js.map +1 -1
- package/dist/components/FormInput/index.js +1 -1
- package/dist/components/GridRow/GridRow.stories.js.map +1 -1
- package/dist/components/HorizontalList/HorizontalList.stories.js.map +1 -1
- package/dist/components/Icon/Icon.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/Input/Input.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.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.stories.js.map +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/OverlayStepBar/OverlayStepBar.stories.js.map +1 -1
- package/dist/components/PageOverlay/PageOverlay.stories.js +2 -2
- 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/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/RadioTabSelector.stories.js.map +1 -1
- 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/BlockFormatPlugin/BlockFormatPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/CourseCataloguePlugin/CourseCataloguePlugin.js +25 -25
- 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/ListPlugin/ListPlugin.js.map +1 -1
- 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/TablePlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js +23 -23
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/index.js +1 -1
- 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 +3 -3
- package/dist/components/RteEditor/Providers/LanguageProvider.js.map +1 -1
- 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 +6 -6
- package/dist/components/RteEditor/helpers.js.map +1 -1
- package/dist/components/RteEditor/hooks/useFlyout.js.map +1 -1
- package/dist/components/RteEditor/hooks/useTranslation.js.map +1 -1
- package/dist/components/RteEditor/index.js +1 -1
- package/dist/components/RteEditor/nodes/CourseCatalogueNode/CourseCatalogueNode.js +12 -12
- package/dist/components/RteEditor/nodes/CourseCatalogueNode/CourseCatalogueNode.js.map +1 -1
- package/dist/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js +19 -19
- package/dist/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js.map +1 -1
- package/dist/components/SearchField/SearchField.js.map +1 -1
- package/dist/components/SearchField/SearcheField.stories.js.map +1 -1
- package/dist/components/SearchField/components/ResultsOption.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/SelectListbox.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/SelectContainer.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectOption.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectOptionBox.js.map +1 -1
- package/dist/components/Slider/Slider.stories.js.map +1 -1
- package/dist/components/Sortable/Sortable.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/Sortable/components/SortableHandle.js.map +1 -1
- package/dist/components/Sortable/components/SortableItem.js.map +1 -1
- package/dist/components/Sortable/sortableReducer.js.map +1 -1
- package/dist/components/Spinner/Spinner.stories.js.map +1 -1
- package/dist/components/StatusBadge/StatusBadge.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.stories.js.map +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/ToggleSwitch/ToggleSwitch.stories.js.map +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.stories.js.map +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/useDebounce.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-DAwjkky5.js → components-BzxAULjf.js} +549 -549
- package/dist/components-BzxAULjf.js.map +1 -0
- package/dist/{dist-BIkFjHck.js → dist-V_v3kC0L.js} +3 -3
- package/dist/dist-V_v3kC0L.js.map +1 -0
- package/dist/{esm-ipAmzhQq.js → esm-BoujHjK5.js} +3 -3
- package/dist/{esm-ipAmzhQq.js.map → esm-BoujHjK5.js.map} +1 -1
- package/dist/{helpers-MNJmfDe_.js → helpers-B1VK8xTF.js} +2 -2
- package/dist/{helpers-MNJmfDe_.js.map → helpers-B1VK8xTF.js.map} +1 -1
- package/dist/index.js +1 -1
- package/dist/{lib-6BbFZdI7.js → lib-BvOQt8El.js} +2 -2
- package/dist/{lib-6BbFZdI7.js.map → lib-BvOQt8El.js.map} +1 -1
- package/dist/{react-18-Dwpebadr.js → react-18-DxAWL8_m.js} +3 -3
- package/dist/{react-18-Dwpebadr.js.map → react-18-DxAWL8_m.js.map} +1 -1
- package/dist/{react.esm-R7eBXTUI.js → react.esm-CweFe1CK.js} +5 -5
- package/dist/react.esm-CweFe1CK.js.map +1 -0
- package/dist/setupTests.js +4 -4
- package/dist/setupTests.js.map +1 -1
- package/dist/storybook__react.d.js +5 -5
- package/dist/storybook__react.d.js.map +1 -1
- package/dist/{test-Cr_l59hN.js → test-Pa9Lwbsq.js} +2 -2
- package/dist/test-Pa9Lwbsq.js.map +1 -0
- package/dist/{test-utils-BSs0eZfL.js → test-utils-Cmn06m_x.js} +2 -2
- package/dist/{test-utils-BSs0eZfL.js.map → test-utils-Cmn06m_x.js.map} +1 -1
- package/package.json +21 -20
- package/dist/Lexical.prod-sbwgNRjw.js.map +0 -1
- package/dist/LexicalClipboard.prod-DdImsyd1.js +0 -248
- package/dist/LexicalClipboard.prod-DdImsyd1.js.map +0 -1
- package/dist/LexicalExtension.prod-jTSDl1mh.js.map +0 -1
- package/dist/LexicalLink.prod-BKLNLyu8.js.map +0 -1
- package/dist/LexicalList.prod-DEtc4lSr.js.map +0 -1
- package/dist/LexicalTable.prod-CpIPDW6z.js.map +0 -1
- package/dist/LexicalUtils.prod-DjjGkphN.js +0 -360
- package/dist/LexicalUtils.prod-DjjGkphN.js.map +0 -1
- package/dist/chunk-SZQXB3JV-KiB8lSa9.js.map +0 -1
- package/dist/components-DAwjkky5.js.map +0 -1
- package/dist/dist-BIkFjHck.js.map +0 -1
- package/dist/react.esm-R7eBXTUI.js.map +0 -1
- package/dist/test-Cr_l59hN.js.map +0 -1
- /package/dist/assets/favicon/{src/assets/favicon/android-chrome-192x192.png → android-chrome-192x192.png} +0 -0
- /package/dist/assets/favicon/{src/assets/favicon/android-chrome-512x512.png → android-chrome-512x512.png} +0 -0
- /package/dist/assets/favicon/{src/assets/favicon/apple-touch-icon.png → apple-touch-icon.png} +0 -0
- /package/dist/assets/favicon/{src/assets/favicon/favicon-16x16.png → favicon-16x16.png} +0 -0
- /package/dist/assets/favicon/{src/assets/favicon/favicon-32x32.png → favicon-32x32.png} +0 -0
- /package/dist/assets/favicon/{src/assets/favicon/favicon.ico → favicon.ico} +0 -0
- /package/dist/assets/favicon/{src/assets/favicon/favicon.svg → favicon.svg} +0 -0
- /package/dist/assets/favicon/{src/assets/favicon/site.webmanifest → site.webmanifest} +0 -0
- /package/dist/assets/fonts/{src/assets/fonts/SourceSans3-Regular.otf.woff → SourceSans3-Regular.otf.woff} +0 -0
- /package/dist/assets/fonts/{src/assets/fonts/SourceSans3-Regular.otf.woff2 → SourceSans3-Regular.otf.woff2} +0 -0
- /package/dist/assets/fonts/{src/assets/fonts/SourceSans3-Semibold.otf.woff → SourceSans3-Semibold.otf.woff} +0 -0
- /package/dist/assets/fonts/{src/assets/fonts/SourceSans3-Semibold.otf.woff2 → SourceSans3-Semibold.otf.woff2} +0 -0
- /package/dist/assets/{src/css/globals.css → globals.css} +0 -0
- /package/dist/assets/{src/css/variables.css → variables.css} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableProvider-8HYiBXJS.js","names":[],"sources":["../src/components/Sortable/components/SortableContainer.tsx","../src/components/Sortable/SortableProvider.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent } from 'react';\n\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport type OnSort = (indices: number[]) => void;\n\ninterface SortableContainerProps {\n scrollable?: boolean;\n hideNumbers?: boolean;\n onSort?: OnSort;\n}\n\nexport function SortableContainer({ scrollable, hideNumbers, onSort }: SortableContainerProps) {\n const { clone, draggingTarget, drop, sortableItems, setDraggingTarget, reset, indices } = useSortable();\n const containerRef = useRef<HTMLUListElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const indicesRef = useRef<number[]>(indices);\n\n function getTargetIndex(event: DragEvent<HTMLLIElement>) {\n const sortableContainer = containerRef.current;\n\n if (!sortableContainer?.hasChildNodes()) return;\n\n const listItemNode = event.currentTarget;\n const childNodes = Array.from(sortableContainer.childNodes);\n const targetIndex = childNodes.findIndex((node) => node.isEqualNode(listItemNode));\n\n return targetIndex;\n }\n\n function handleDrop(event: DragEvent<HTMLLIElement>) {\n const targetIndex = getTargetIndex(event);\n\n if (targetIndex === undefined) return;\n\n if (clone && wrapperRef.current) wrapperRef.current.removeChild(clone);\n\n drop(targetIndex);\n }\n\n function handleDragOver(event: DragEvent<HTMLLIElement>) {\n // Prevent default to allow drop\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n\n if (clone) {\n const { clientX, clientY } = event;\n const { x, y, width, height } = event.currentTarget.getBoundingClientRect();\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n const grabPosition = height / 2 - (clientY - y);\n\n // lock drag image movement to x-axis and mouse pointer\n clone.setAttribute(\n 'style',\n `\n left: ${clientX - (clientX - x)}px;\n top: ${y - grabPosition}px;\n height: ${height}px;\n width: ${width}px;\n visibility: visible;\n `\n );\n }\n\n const targetIndex = getTargetIndex(event);\n\n if (targetIndex === undefined || targetIndex === draggingTarget) return;\n\n setDraggingTarget(targetIndex);\n }\n\n function handleContainerDragLeave(event: DragEvent<HTMLUListElement>) {\n const { relatedTarget } = event;\n\n const within = relatedTarget !== null && containerRef.current?.contains(relatedTarget as Node);\n\n if (!within) {\n reset();\n\n if (clone) {\n clone.setAttribute('style', 'visibility: hidden;');\n }\n }\n }\n\n useEffect(() => {\n if (!clone || !wrapperRef.current) return;\n\n wrapperRef.current.appendChild(clone);\n\n return function () {\n clone.remove();\n };\n }, [clone]);\n\n useEffect(() => {\n if (!onSort) return;\n\n if (indices.valueOf() !== indicesRef.current.valueOf()) {\n onSort(indices);\n\n indicesRef.current = indices;\n }\n }, [indices, indicesRef, onSort]);\n\n return (\n <div\n className={clsx(styles['sortable__wrapper'], { [styles['sortable__wrapper--scrollable']]: scrollable })}\n ref={wrapperRef}\n >\n <ul\n className={clsx(styles['sortable__container'], {\n [styles['sortable__container--drag-over']]: clone !== undefined,\n })}\n onDragLeave={handleContainerDragLeave}\n ref={containerRef}\n role=\"presentation\"\n >\n {sortableItems.map((child, index) => (\n <li\n className={clsx(styles['sortable__drop-target'], {\n [styles['sortable__drop-target--no-number']]: hideNumbers,\n })}\n draggable={false}\n key={index}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n role=\"presentation\"\n >\n {cloneElement(child, { index })}\n </li>\n ))}\n </ul>\n </div>\n );\n}\n","import { createContext, useContext, useReducer, useRef } from 'react';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport type { SortableStateType } from './sortableReducer';\nimport type { SortableItem, SortableItemProps } from './components/SortableItem';\n\nimport { sortableReducer, initialState } from './sortableReducer';\nimport { SortableContainer } from './components/SortableContainer';\nimport * as actions from './actions';\n\ntype SortableContextType = {\n clearDraggingSource: () => void;\n clearDraggingTarget: () => void;\n dragEnd: () => void;\n dragStart: (index: number) => void;\n drop: (index: number) => void;\n moveToPosition: (index: number) => void;\n reset: () => void;\n setClone: (node: Element) => void;\n setDraggingSource: (index: number) => void;\n setDraggingTarget: (index: number) => void;\n};\n\nconst SortableContext = createContext<(SortableContextType & SortableStateType) | undefined>(undefined);\n\ntype SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];\n\ninterface Props<T = unknown> {\n renderItems: SortableItems;\n dataItems: T[];\n scrollable?: boolean;\n hideNumbers?: boolean;\n onSort?: (items: T[]) => void;\n children?: ReactNode;\n}\n\nfunction isReactElementWithIndex(value: string | ReactElement): value is ReactElement<{ index: number }> {\n return typeof value !== 'string';\n}\n\nconst init = (renderItems: SortableItems): SortableStateType => {\n const reactChildren = renderItems.filter(isReactElementWithIndex);\n\n return {\n ...initialState,\n indices: reactChildren.map(({ props }) => props.index),\n maxIndex: reactChildren.length - 1,\n sortableItems: reactChildren,\n };\n};\n\nexport function SortableProvider<T>({ renderItems, dataItems, scrollable, hideNumbers, onSort }: Props<T>) {\n const persistentItems = useRef(dataItems);\n\n const [state, dispatch] = useReducer(sortableReducer, renderItems, init);\n\n function setDraggingSource(index: number) {\n dispatch(actions.setDraggingSource(index));\n }\n\n function setDraggingTarget(index: number) {\n dispatch(actions.setDraggingTarget(index));\n }\n\n function moveToPosition(index: number) {\n dispatch(actions.moveToPosition(index));\n }\n\n function clearDraggingTarget() {\n dispatch(actions.clearDraggingTarget());\n }\n\n function clearDraggingSource() {\n dispatch(actions.clearDraggingSource());\n }\n\n function drop(index: number) {\n dispatch(actions.drop(index));\n }\n\n function dragStart(index: number) {\n dispatch(actions.dragStart(index));\n }\n\n function dragEnd() {\n dispatch(actions.dragEnd());\n }\n\n function reset() {\n dispatch(actions.reset());\n }\n\n function setClone(node: Element) {\n dispatch(actions.setClone(node));\n }\n\n function onHandleSort(sortedIndices: number[]) {\n const sortedData = sortedIndices.map((index) => persistentItems.current[index]);\n onSort && onSort(sortedData);\n }\n\n return (\n <SortableContext.Provider\n value={{\n ...state,\n clearDraggingSource,\n clearDraggingTarget,\n dragEnd,\n dragStart,\n drop,\n moveToPosition,\n reset,\n setClone,\n setDraggingSource,\n setDraggingTarget,\n }}\n >\n <SortableContainer scrollable={scrollable} hideNumbers={hideNumbers} onSort={onHandleSort} />\n </SortableContext.Provider>\n );\n}\n\nexport function useSortable() {\n const context = useContext(SortableContext);\n\n if (context === undefined) {\n throw new Error('useSortable must be used within a SortableProvider');\n }\n\n return context;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SortableProvider-8HYiBXJS.js","names":[],"sources":["../src/components/Sortable/components/SortableContainer.tsx","../src/components/Sortable/SortableProvider.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent } from 'react';\n\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport type OnSort = (indices: number[]) => void;\n\ninterface SortableContainerProps {\n scrollable?: boolean;\n hideNumbers?: boolean;\n onSort?: OnSort;\n}\n\nexport function SortableContainer({ scrollable, hideNumbers, onSort }: SortableContainerProps) {\n const { clone, draggingTarget, drop, sortableItems, setDraggingTarget, reset, indices } = useSortable();\n const containerRef = useRef<HTMLUListElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const indicesRef = useRef<number[]>(indices);\n\n function getTargetIndex(event: DragEvent<HTMLLIElement>) {\n const sortableContainer = containerRef.current;\n\n if (!sortableContainer?.hasChildNodes()) return;\n\n const listItemNode = event.currentTarget;\n const childNodes = Array.from(sortableContainer.childNodes);\n const targetIndex = childNodes.findIndex((node) => node.isEqualNode(listItemNode));\n\n return targetIndex;\n }\n\n function handleDrop(event: DragEvent<HTMLLIElement>) {\n const targetIndex = getTargetIndex(event);\n\n if (targetIndex === undefined) return;\n\n if (clone && wrapperRef.current) wrapperRef.current.removeChild(clone);\n\n drop(targetIndex);\n }\n\n function handleDragOver(event: DragEvent<HTMLLIElement>) {\n // Prevent default to allow drop\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n\n if (clone) {\n const { clientX, clientY } = event;\n const { x, y, width, height } = event.currentTarget.getBoundingClientRect();\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n const grabPosition = height / 2 - (clientY - y);\n\n // lock drag image movement to x-axis and mouse pointer\n clone.setAttribute(\n 'style',\n `\n left: ${clientX - (clientX - x)}px;\n top: ${y - grabPosition}px;\n height: ${height}px;\n width: ${width}px;\n visibility: visible;\n `\n );\n }\n\n const targetIndex = getTargetIndex(event);\n\n if (targetIndex === undefined || targetIndex === draggingTarget) return;\n\n setDraggingTarget(targetIndex);\n }\n\n function handleContainerDragLeave(event: DragEvent<HTMLUListElement>) {\n const { relatedTarget } = event;\n\n const within = relatedTarget !== null && containerRef.current?.contains(relatedTarget as Node);\n\n if (!within) {\n reset();\n\n if (clone) {\n clone.setAttribute('style', 'visibility: hidden;');\n }\n }\n }\n\n useEffect(() => {\n if (!clone || !wrapperRef.current) return;\n\n wrapperRef.current.appendChild(clone);\n\n return function () {\n clone.remove();\n };\n }, [clone]);\n\n useEffect(() => {\n if (!onSort) return;\n\n if (indices.valueOf() !== indicesRef.current.valueOf()) {\n onSort(indices);\n\n indicesRef.current = indices;\n }\n }, [indices, indicesRef, onSort]);\n\n return (\n <div\n className={clsx(styles['sortable__wrapper'], { [styles['sortable__wrapper--scrollable']]: scrollable })}\n ref={wrapperRef}\n >\n <ul\n className={clsx(styles['sortable__container'], {\n [styles['sortable__container--drag-over']]: clone !== undefined,\n })}\n onDragLeave={handleContainerDragLeave}\n ref={containerRef}\n role=\"presentation\"\n >\n {sortableItems.map((child, index) => (\n <li\n className={clsx(styles['sortable__drop-target'], {\n [styles['sortable__drop-target--no-number']]: hideNumbers,\n })}\n draggable={false}\n key={index}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n role=\"presentation\"\n >\n {cloneElement(child, { index })}\n </li>\n ))}\n </ul>\n </div>\n );\n}\n","import { createContext, useContext, useReducer, useRef } from 'react';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport type { SortableStateType } from './sortableReducer';\nimport type { SortableItem, SortableItemProps } from './components/SortableItem';\n\nimport { sortableReducer, initialState } from './sortableReducer';\nimport { SortableContainer } from './components/SortableContainer';\nimport * as actions from './actions';\n\ntype SortableContextType = {\n clearDraggingSource: () => void;\n clearDraggingTarget: () => void;\n dragEnd: () => void;\n dragStart: (index: number) => void;\n drop: (index: number) => void;\n moveToPosition: (index: number) => void;\n reset: () => void;\n setClone: (node: Element) => void;\n setDraggingSource: (index: number) => void;\n setDraggingTarget: (index: number) => void;\n};\n\nconst SortableContext = createContext<(SortableContextType & SortableStateType) | undefined>(undefined);\n\ntype SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];\n\ninterface Props<T = unknown> {\n renderItems: SortableItems;\n dataItems: T[];\n scrollable?: boolean;\n hideNumbers?: boolean;\n onSort?: (items: T[]) => void;\n children?: ReactNode;\n}\n\nfunction isReactElementWithIndex(value: string | ReactElement): value is ReactElement<{ index: number }> {\n return typeof value !== 'string';\n}\n\nconst init = (renderItems: SortableItems): SortableStateType => {\n const reactChildren = renderItems.filter(isReactElementWithIndex);\n\n return {\n ...initialState,\n indices: reactChildren.map(({ props }) => props.index),\n maxIndex: reactChildren.length - 1,\n sortableItems: reactChildren,\n };\n};\n\nexport function SortableProvider<T>({ renderItems, dataItems, scrollable, hideNumbers, onSort }: Props<T>) {\n const persistentItems = useRef(dataItems);\n\n const [state, dispatch] = useReducer(sortableReducer, renderItems, init);\n\n function setDraggingSource(index: number) {\n dispatch(actions.setDraggingSource(index));\n }\n\n function setDraggingTarget(index: number) {\n dispatch(actions.setDraggingTarget(index));\n }\n\n function moveToPosition(index: number) {\n dispatch(actions.moveToPosition(index));\n }\n\n function clearDraggingTarget() {\n dispatch(actions.clearDraggingTarget());\n }\n\n function clearDraggingSource() {\n dispatch(actions.clearDraggingSource());\n }\n\n function drop(index: number) {\n dispatch(actions.drop(index));\n }\n\n function dragStart(index: number) {\n dispatch(actions.dragStart(index));\n }\n\n function dragEnd() {\n dispatch(actions.dragEnd());\n }\n\n function reset() {\n dispatch(actions.reset());\n }\n\n function setClone(node: Element) {\n dispatch(actions.setClone(node));\n }\n\n function onHandleSort(sortedIndices: number[]) {\n const sortedData = sortedIndices.map((index) => persistentItems.current[index]);\n onSort && onSort(sortedData);\n }\n\n return (\n <SortableContext.Provider\n value={{\n ...state,\n clearDraggingSource,\n clearDraggingTarget,\n dragEnd,\n dragStart,\n drop,\n moveToPosition,\n reset,\n setClone,\n setDraggingSource,\n setDraggingTarget,\n }}\n >\n <SortableContainer scrollable={scrollable} hideNumbers={hideNumbers} onSort={onHandleSort} />\n </SortableContext.Provider>\n );\n}\n\nexport function useSortable() {\n const context = useContext(SortableContext);\n\n if (context === undefined) {\n throw new Error('useSortable must be used within a SortableProvider');\n }\n\n return context;\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner-BpElTDIu.js","names":[],"sources":["../src/components/Spinner/Spinner.module.css","../src/components/Spinner/Spinner.tsx"],"sourcesContent":["@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.spinner-container {\n align-items: center;\n display: flex;\n justify-content: center;\n padding: 2rem;\n}\n\n.spinner {\n height: 2rem;\n width: 2rem;\n}\n\n.spinner::after {\n border: 0.25rem solid hsl(0deg 0% 0% / 10%);\n border-radius: 50%;\n content: \" \";\n display: block;\n height: 100%;\n transform-origin: 50% 50%;\n width: 100%;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .spinner::after {\n animation: spin 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;\n border-left-color: var(--color-uva-black);\n }\n}\n","import { useEffect, useState } from 'react';\n\nimport styles from './Spinner.module.css';\n\nconst DEFAULT_DELAY_IN_MS = 250;\n\nexport interface SpinnerProps {\n /** The `aria-valuetext` of the spinner. */\n ariaValueText: string;\n /** Delay in milliseconds after which the spinner becomes visible. The default is `250`. */\n showAfterMs?: number;\n}\n\n/** Represents a component to display a spinner. */\nexport const Spinner = ({ ariaValueText, showAfterMs = DEFAULT_DELAY_IN_MS }: SpinnerProps) => {\n const [visible, setVisible] = useState(() => (showAfterMs === 0 ? true : false));\n\n useEffect(() => {\n if (showAfterMs === 0) {\n return;\n }\n const t = window.setTimeout(() => {\n setVisible(true);\n }, showAfterMs);\n\n return () => {\n window.clearTimeout(t);\n };\n });\n\n if (!visible) {\n return null;\n }\n\n return (\n <div className={styles['spinner-container']}>\n <div className={styles['spinner']} role=\"progressbar\" aria-label=\"Spinner\" aria-valuetext={ariaValueText}></div>\n </div>\n );\n};\n"],"mappings":";;;;;;GCIM,IAAsB,KAUf,KAAW,EAAE,kBAAe,iBAAc,QAAwC;CAC7F,IAAM,CAAC,GAAS,KAAc,QAAgB,MAAgB,EAAkB;
|
|
1
|
+
{"version":3,"file":"Spinner-BpElTDIu.js","names":[],"sources":["../src/components/Spinner/Spinner.module.css","../src/components/Spinner/Spinner.tsx"],"sourcesContent":["@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.spinner-container {\n align-items: center;\n display: flex;\n justify-content: center;\n padding: 2rem;\n}\n\n.spinner {\n height: 2rem;\n width: 2rem;\n}\n\n.spinner::after {\n border: 0.25rem solid hsl(0deg 0% 0% / 10%);\n border-radius: 50%;\n content: \" \";\n display: block;\n height: 100%;\n transform-origin: 50% 50%;\n width: 100%;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .spinner::after {\n animation: spin 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;\n border-left-color: var(--color-uva-black);\n }\n}\n","import { useEffect, useState } from 'react';\n\nimport styles from './Spinner.module.css';\n\nconst DEFAULT_DELAY_IN_MS = 250;\n\nexport interface SpinnerProps {\n /** The `aria-valuetext` of the spinner. */\n ariaValueText: string;\n /** Delay in milliseconds after which the spinner becomes visible. The default is `250`. */\n showAfterMs?: number;\n}\n\n/** Represents a component to display a spinner. */\nexport const Spinner = ({ ariaValueText, showAfterMs = DEFAULT_DELAY_IN_MS }: SpinnerProps) => {\n const [visible, setVisible] = useState(() => (showAfterMs === 0 ? true : false));\n\n useEffect(() => {\n if (showAfterMs === 0) {\n return;\n }\n const t = window.setTimeout(() => {\n setVisible(true);\n }, showAfterMs);\n\n return () => {\n window.clearTimeout(t);\n };\n });\n\n if (!visible) {\n return null;\n }\n\n return (\n <div className={styles['spinner-container']}>\n <div className={styles['spinner']} role=\"progressbar\" aria-label=\"Spinner\" aria-valuetext={ariaValueText}></div>\n </div>\n );\n};\n"],"mappings":";;;;;;GCIM,IAAsB,KAUf,KAAW,EAAE,kBAAe,iBAAc,QAAwC;CAC7F,IAAM,CAAC,GAAS,KAAc,QAAgB,MAAgB,EAAkB;CAmBhF,OAjBA,QAAgB;EACd,IAAI,MAAgB,GAClB;EAEF,IAAM,IAAI,OAAO,iBAAiB;GAChC,EAAW,GAAK;KACf,EAAY;EAEf,aAAa;GACX,OAAO,aAAa,EAAE;;GAExB,EAEG,IAKH,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAY,MAAK;GAAc,cAAW;GAAU,kBAAgB;GAAqB,CAAA;EAC5G,CAAA,GANC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusPill-DM7n3I4W.js","names":[],"sources":["../src/components/StatusPill/StatusPill.module.css","../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":[".status-pill {\n align-items: center;\n border-radius: 1.5rem;\n display: flex;\n gap: 0.25rem;\n padding: 0.25rem 0.5rem;\n width: fit-content;\n}\n\n.status-pill__possible {\n background-color: var(--color-forest-100);\n color: var(--color-forest-900);\n}\n\n.status-pill__impossible {\n background-color: var(--color-red-100);\n color: var(--color-red-800);\n}\n\n.status-pill__new {\n background-color: var(--color-navy-100);\n color: var(--color-navy-600);\n font-size: var(--font-size-text-non-essential);\n}\n\n.status-pill__dark {\n background-color: var(--color-uva-black);\n color: var(--color-uva-white);\n font-size: var(--font-size-text-non-essential);\n font-weight: var(--semibold);\n}\n\n.status-pill--bar {\n border-radius: 0;\n justify-content: center;\n padding: 0.5rem;\n width: 100%;\n}\n\n.status-pill--compact {\n height: 1.125rem;\n padding: 0.125rem 0.5rem 0 0.5rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n /** The status to convey. */\n status: 'possible' | 'impossible' | 'new' | 'dark';\n /** The variant of the pill. */\n variant?: 'default' | 'bar' | 'compact';\n /** A description of the status. */\n label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n possible: 'CheckCircleFillMini',\n impossible: 'CrossCircleFillMini',\n};\n\n/** Represents a component for a status pill. */\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n return (\n <span\n className={clsx(\n styles['status-pill'],\n styles[`status-pill__${status}`],\n variant !== 'default' && styles[`status-pill--${variant}`]\n )}\n >\n {(status === 'possible' || status === 'impossible') && (\n <Icon name={iconNameMap[status]!} title={status} size={16} />\n )}\n {label}\n </span>\n );\n}\n"],"mappings":";;;;;;;;;;;;GCiBM,IAA6E;CACjF,UAAU;CACV,YAAY;CACb;AAGD,SAAgB,EAAW,EAAE,WAAQ,aAAU,WAAW,YAA0B;
|
|
1
|
+
{"version":3,"file":"StatusPill-DM7n3I4W.js","names":[],"sources":["../src/components/StatusPill/StatusPill.module.css","../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":[".status-pill {\n align-items: center;\n border-radius: 1.5rem;\n display: flex;\n gap: 0.25rem;\n padding: 0.25rem 0.5rem;\n width: fit-content;\n}\n\n.status-pill__possible {\n background-color: var(--color-forest-100);\n color: var(--color-forest-900);\n}\n\n.status-pill__impossible {\n background-color: var(--color-red-100);\n color: var(--color-red-800);\n}\n\n.status-pill__new {\n background-color: var(--color-navy-100);\n color: var(--color-navy-600);\n font-size: var(--font-size-text-non-essential);\n}\n\n.status-pill__dark {\n background-color: var(--color-uva-black);\n color: var(--color-uva-white);\n font-size: var(--font-size-text-non-essential);\n font-weight: var(--semibold);\n}\n\n.status-pill--bar {\n border-radius: 0;\n justify-content: center;\n padding: 0.5rem;\n width: 100%;\n}\n\n.status-pill--compact {\n height: 1.125rem;\n padding: 0.125rem 0.5rem 0 0.5rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n /** The status to convey. */\n status: 'possible' | 'impossible' | 'new' | 'dark';\n /** The variant of the pill. */\n variant?: 'default' | 'bar' | 'compact';\n /** A description of the status. */\n label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n possible: 'CheckCircleFillMini',\n impossible: 'CrossCircleFillMini',\n};\n\n/** Represents a component for a status pill. */\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n return (\n <span\n className={clsx(\n styles['status-pill'],\n styles[`status-pill__${status}`],\n variant !== 'default' && styles[`status-pill--${variant}`]\n )}\n >\n {(status === 'possible' || status === 'impossible') && (\n <Icon name={iconNameMap[status]!} title={status} size={16} />\n )}\n {label}\n </span>\n );\n}\n"],"mappings":";;;;;;;;;;;;GCiBM,IAA6E;CACjF,UAAU;CACV,YAAY;CACb;AAGD,SAAgB,EAAW,EAAE,WAAQ,aAAU,WAAW,YAA0B;CAClF,OACE,kBAAC,QAAD;EACE,WAAW,EACT,EAAO,gBACP,EAAO,gBAAgB,MACvB,MAAY,aAAa,EAAO,gBAAgB,KACjD;YALH,EAOI,MAAW,cAAc,MAAW,iBACpC,kBAAC,GAAD;GAAM,MAAM,EAAY;GAAU,OAAO;GAAQ,MAAM;GAAM,CAAA,EAE9D,EACI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCellContextMenu-D0IMQr3E.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":"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"}
|
|
1
|
+
{"version":3,"file":"TableCellContextMenu-D0IMQr3E.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":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { t as e } from "./LexicalComposerContext.prod-Ca-YN_fj.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { At as t, w as n } from "./Lexical.prod-CqPLSi0R.js";
|
|
3
|
+
import { i as r, n as i } from "./LexicalUtils.prod-BqcriFWV.js";
|
|
4
|
+
import { b as a, d as o, f as s, g as c, i as l, r as u, s as d, w as f, y as p } from "./LexicalTable.prod-DlOxUQou.js";
|
|
5
5
|
import { $createTableWrapperNode as m, TableWrapperNode as h } from "./components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js";
|
|
6
6
|
import { getEditorContentWidth as g, getEditorParrentCellWidth as _, tableHasContent as v } from "./components/RteEditor/Plugins/TablePlugin/helpers.js";
|
|
7
7
|
import { useCallback as y, useEffect as b, useLayoutEffect as x, useMemo as S, useRef as C, useState as w } from "react";
|
|
@@ -33,15 +33,15 @@ function I({ editor: e }) {
|
|
|
33
33
|
let x = C(null), S = C(null), O = C(null), k = C(null), [A, j] = w(null), [I, L] = w(null), [R, z] = w(!1), [B, V] = w(null), H = y(() => {
|
|
34
34
|
L(null), x.current = null, V(null), k.current = null, O.current = null;
|
|
35
35
|
}, []), U = (e) => (e.buttons & 1) == 1;
|
|
36
|
-
b(() => e.registerNodeTransform(
|
|
36
|
+
b(() => e.registerNodeTransform(f, (t) => {
|
|
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 (v(t)) {
|
|
43
|
-
let n = t ? i(t,
|
|
44
|
-
a[o] = Math.max(
|
|
43
|
+
let n = t ? i(t, l) : null, s = (n ? _(n, r, e) : g(e)) / r;
|
|
44
|
+
a[o] = Math.max(s, P);
|
|
45
45
|
} else a[o] = P;
|
|
46
46
|
}), t.setColWidths(a);
|
|
47
47
|
}
|
|
@@ -63,22 +63,22 @@ function I({ editor: e }) {
|
|
|
63
63
|
}
|
|
64
64
|
if (z(U(r)), !(S.current && S.current.contains(i)) && x.current !== i) {
|
|
65
65
|
x.current = i;
|
|
66
|
-
let t =
|
|
66
|
+
let t = a(i);
|
|
67
67
|
t && I !== t ? e.getEditorState().read(() => {
|
|
68
68
|
let r = n(t.elem);
|
|
69
69
|
if (!r) throw Error("TableCellResizer: Table cell node not found.");
|
|
70
|
-
let a = p(r),
|
|
71
|
-
if (!
|
|
72
|
-
x.current = i, O.current =
|
|
70
|
+
let a = p(r), o = d(a, e.getElementByKey(a.getKey()));
|
|
71
|
+
if (!o) throw Error("TableCellResizer: Table element not found.");
|
|
72
|
+
x.current = i, O.current = o.getBoundingClientRect(), L(t);
|
|
73
73
|
}, { editor: e }) : t ?? H();
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}, i = () => {
|
|
77
77
|
z(!0);
|
|
78
|
-
},
|
|
78
|
+
}, o = () => {
|
|
79
79
|
z(!1);
|
|
80
80
|
}, s = e.registerRootListener((e, t) => {
|
|
81
|
-
t?.removeEventListener("mousemove", r), t?.removeEventListener("mousedown", i), t?.removeEventListener("mouseup",
|
|
81
|
+
t?.removeEventListener("mousemove", r), t?.removeEventListener("mousedown", i), t?.removeEventListener("mouseup", o), e?.addEventListener("mousemove", r), e?.addEventListener("mousedown", i), e?.addEventListener("mouseup", o);
|
|
82
82
|
});
|
|
83
83
|
return () => {
|
|
84
84
|
s();
|
|
@@ -93,18 +93,18 @@ function I({ editor: e }) {
|
|
|
93
93
|
if (!I) throw Error("TableCellResizer: Expected active cell.");
|
|
94
94
|
e.update(() => {
|
|
95
95
|
let r = n(I.elem);
|
|
96
|
-
if (!
|
|
97
|
-
let i = p(r), a =
|
|
98
|
-
if (a >=
|
|
99
|
-
let
|
|
100
|
-
if (!
|
|
101
|
-
let
|
|
102
|
-
if (
|
|
103
|
-
let t =
|
|
104
|
-
|
|
96
|
+
if (!s(r)) throw Error("TableCellResizer: Table cell node not found.");
|
|
97
|
+
let i = p(r), a = o(r) + r.getRowSpan() - 1, c = i.getChildren();
|
|
98
|
+
if (a >= c.length || a < 0) throw Error("Expected table cell to be inside of table row.");
|
|
99
|
+
let l = c[a];
|
|
100
|
+
if (!u(l)) throw Error("Expected table row");
|
|
101
|
+
let d = l.getHeight();
|
|
102
|
+
if (d === void 0) {
|
|
103
|
+
let t = l.getChildren();
|
|
104
|
+
d = Math.min(...t.map((t) => K(t, e) ?? Infinity));
|
|
105
105
|
}
|
|
106
|
-
let
|
|
107
|
-
|
|
106
|
+
let f = Math.max(d + t, N);
|
|
107
|
+
l.setHeight(f);
|
|
108
108
|
}, { tag: "skip-scroll-into-view" });
|
|
109
109
|
}, [I, 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;
|
|
@@ -113,19 +113,19 @@ function I({ editor: e }) {
|
|
|
113
113
|
if (!I) throw Error("TableCellResizer: Expected active cell.");
|
|
114
114
|
e.update(() => {
|
|
115
115
|
let e = n(I.elem);
|
|
116
|
-
if (!
|
|
117
|
-
let r = p(e), [i] =
|
|
118
|
-
if (
|
|
119
|
-
let
|
|
120
|
-
if (!
|
|
121
|
-
let
|
|
122
|
-
if (
|
|
123
|
-
let
|
|
124
|
-
if (
|
|
116
|
+
if (!s(e)) throw Error("TableCellResizer: Table cell node not found.");
|
|
117
|
+
let r = p(e), [i] = c(r, null, null), a = q(e, i);
|
|
118
|
+
if (a === void 0) throw Error("TableCellResizer: Table column not found.");
|
|
119
|
+
let o = r.getColWidths();
|
|
120
|
+
if (!o) return;
|
|
121
|
+
let l = o[a];
|
|
122
|
+
if (l === void 0) return;
|
|
123
|
+
let u = [...o];
|
|
124
|
+
if (u[a] = Math.max(l + t, P), r.setColWidths(u), a < r.getColumnCount() - 1) {
|
|
125
125
|
let e = r.getColWidths();
|
|
126
126
|
if (!e) return;
|
|
127
|
-
let n = [...e], i =
|
|
128
|
-
n[i] = Math.max(
|
|
127
|
+
let n = [...e], i = a + 1, o = e[i];
|
|
128
|
+
n[i] = Math.max(o - t, P), r.setColWidths(n);
|
|
129
129
|
}
|
|
130
130
|
}, { tag: "skip-scroll-into-view" });
|
|
131
131
|
}, [I, e]), Y = y((e) => {
|
|
@@ -205,4 +205,4 @@ var L = () => {
|
|
|
205
205
|
//#endregion
|
|
206
206
|
export { j as n, L as t };
|
|
207
207
|
|
|
208
|
-
//# sourceMappingURL=TableCellResizerPlugin-
|
|
208
|
+
//# sourceMappingURL=TableCellResizerPlugin-Bc5y-Qbx.js.map
|
package/dist/{TableCellResizerPlugin-Ceof6StD.js.map → TableCellResizerPlugin-Bc5y-Qbx.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCellResizerPlugin-Ceof6StD.js","names":["n","t","e","i","r","o"],"sources":["../node_modules/@lexical/react/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 e}from\"@lexical/react/LexicalComposerContext\";import{useLayoutEffect as n,useEffect as t,useMemo as i,useState as r,useRef as o}from\"react\";const c=\"undefined\"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?n:t;function u(e){return{initialValueFn:()=>e.isEditable(),subscribe:n=>e.registerEditableListener(n)}}function a(){return function(n){const[t]=e(),u=i(()=>n(t),[t,n]),[a,l]=r(()=>u.initialValueFn()),d=o(a);return c(()=>{const{initialValueFn:e,subscribe:n}=u,t=e();return d.current!==t&&(d.current=t,l(t)),n(e=>{d.current=e,l(e)})},[u,n]),a}(u)}export{a 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
|
+
{"version":3,"file":"TableCellResizerPlugin-Bc5y-Qbx.js","names":["n","t","e","i","r","o"],"sources":["../node_modules/@lexical/react/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 e}from\"@lexical/react/LexicalComposerContext\";import{useLayoutEffect as n,useEffect as t,useMemo as i,useState as r,useRef as o}from\"react\";const c=\"undefined\"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?n:t;function u(e){return{initialValueFn:()=>e.isEditable(),subscribe:n=>e.registerEditableListener(n)}}function a(){return function(n){const[t]=e(),u=i(()=>n(t),[t,n]),[a,l]=r(()=>u.initialValueFn()),d=o(a);return c(()=>{const{initialValueFn:e,subscribe:n}=u,t=e();return d.current!==t&&(d.current=t,l(t)),n(e=>{d.current=e,l(e)})},[u,n]),a}(u)}export{a 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":"TextArea-CuASC9bX.js","names":[],"sources":["../src/components/TextArea/TextArea.module.css","../src/components/TextArea/TextArea.tsx"],"sourcesContent":[".text-area__wrapper {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.text-area__header {\n align-items: flex-end;\n display: flex;\n justify-content: space-between;\n}\n\n.text-area__label-wrapper {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.text-area__label {\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--semibold);\n}\n\n.text-area__label.required::after {\n color: var(--color-red-600);\n content: \"\\2605\";\n font-size: 0.5rem;\n margin-left: 0.25rem;\n vertical-align: top;\n}\n\n.text-area__sub-label {\n color: var(--color-grey-700);\n font-size: var(--font-size-text-non-essential);\n}\n\n.text-area__word-count {\n color: var(--color-grey-600);\n font-size: var(--font-size-text-non-essential);\n}\n\n.text-area__word-count--alert {\n color: var(--color-red-600);\n font-weight: bold;\n}\n\n.text-area {\n border-radius: 0.5rem;\n font-family: inherit;\n font-size: inherit;\n min-height: 5.25rem;\n overflow: hidden;\n padding: 0.5rem;\n resize: none;\n white-space: pre-wrap;\n width: 100%;\n word-wrap: break-word;\n}\n\n.text-area--oneLine {\n max-height: 2.5rem;\n min-height: 2.5rem;\n}\n\n.text-area.not-valid {\n border-color: var(--color-red-600);\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n /** Returns entered values as trimmed string */\n onChange: (value: string) => void;\n /** The label for the text area */\n label?: string;\n /** Optional sub label for the text area */\n subLabel?: string;\n /** The max amount of allowed charecters in the text area */\n maxCharacters?: number;\n /** The max number of visible lines in the text area */\n heightAsTextField?: boolean;\n /** The default value for the text area */\n defaultValue?: string;\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show not valid; otherwise, `false`. */\n notValid?: boolean;\n}\n\nexport function TextArea({\n onChange,\n label,\n subLabel,\n maxCharacters = 0,\n heightAsTextField = false,\n defaultValue = '',\n required = false,\n notValid = false,\n}: TextAreaProps) {\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const [characterCount, setCharacterCount] = useState(defaultValue.length);\n\n const handleInput = () => {\n if (textAreaRef.current) {\n textAreaRef.current.style.height = 'auto';\n textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n setCharacterCount(textAreaRef.current.value.length);\n onChange(textAreaRef.current.value.trim());\n }\n };\n\n const autoResize = () => {\n const el = textAreaRef.current;\n if (!el) return;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n };\n\n useEffect(() => {\n if (!heightAsTextField) {\n autoResize();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['text-area__wrapper']}>\n {(label || maxCharacters > 0) && (\n <div className={styles['text-area__header']}>\n <span className={styles['text-area__label-wrapper']}>\n {label && (\n <span className={clsx(styles['text-area__label'], { [styles['required']]: required })}>{label}</span>\n )}\n {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n </span>\n {maxCharacters > 0 && (\n <div className={styles['text-area__word-count']}>\n <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n {characterCount}\n </span>\n / {maxCharacters}\n </div>\n )}\n </div>\n )}\n\n <textarea\n ref={textAreaRef}\n className={clsx(styles['text-area'], {\n [styles['not-valid']]: notValid,\n [styles['text-area--oneLine']]: heightAsTextField,\n })}\n maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n onInput={handleInput}\n defaultValue={defaultValue}\n />\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;ACwBA,SAAgB,EAAS,EACvB,aACA,UACA,aACA,mBAAgB,GAChB,uBAAoB,IACpB,kBAAe,IACf,cAAW,IACX,cAAW,MACK;CAChB,IAAM,IAAc,EAA4B,KAAK,EAC/C,CAAC,GAAgB,KAAqB,EAAS,EAAa,OAAO,EAEnE,UAAoB;
|
|
1
|
+
{"version":3,"file":"TextArea-CuASC9bX.js","names":[],"sources":["../src/components/TextArea/TextArea.module.css","../src/components/TextArea/TextArea.tsx"],"sourcesContent":[".text-area__wrapper {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.text-area__header {\n align-items: flex-end;\n display: flex;\n justify-content: space-between;\n}\n\n.text-area__label-wrapper {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.text-area__label {\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--semibold);\n}\n\n.text-area__label.required::after {\n color: var(--color-red-600);\n content: \"\\2605\";\n font-size: 0.5rem;\n margin-left: 0.25rem;\n vertical-align: top;\n}\n\n.text-area__sub-label {\n color: var(--color-grey-700);\n font-size: var(--font-size-text-non-essential);\n}\n\n.text-area__word-count {\n color: var(--color-grey-600);\n font-size: var(--font-size-text-non-essential);\n}\n\n.text-area__word-count--alert {\n color: var(--color-red-600);\n font-weight: bold;\n}\n\n.text-area {\n border-radius: 0.5rem;\n font-family: inherit;\n font-size: inherit;\n min-height: 5.25rem;\n overflow: hidden;\n padding: 0.5rem;\n resize: none;\n white-space: pre-wrap;\n width: 100%;\n word-wrap: break-word;\n}\n\n.text-area--oneLine {\n max-height: 2.5rem;\n min-height: 2.5rem;\n}\n\n.text-area.not-valid {\n border-color: var(--color-red-600);\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n /** Returns entered values as trimmed string */\n onChange: (value: string) => void;\n /** The label for the text area */\n label?: string;\n /** Optional sub label for the text area */\n subLabel?: string;\n /** The max amount of allowed charecters in the text area */\n maxCharacters?: number;\n /** The max number of visible lines in the text area */\n heightAsTextField?: boolean;\n /** The default value for the text area */\n defaultValue?: string;\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show not valid; otherwise, `false`. */\n notValid?: boolean;\n}\n\nexport function TextArea({\n onChange,\n label,\n subLabel,\n maxCharacters = 0,\n heightAsTextField = false,\n defaultValue = '',\n required = false,\n notValid = false,\n}: TextAreaProps) {\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const [characterCount, setCharacterCount] = useState(defaultValue.length);\n\n const handleInput = () => {\n if (textAreaRef.current) {\n textAreaRef.current.style.height = 'auto';\n textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n setCharacterCount(textAreaRef.current.value.length);\n onChange(textAreaRef.current.value.trim());\n }\n };\n\n const autoResize = () => {\n const el = textAreaRef.current;\n if (!el) return;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n };\n\n useEffect(() => {\n if (!heightAsTextField) {\n autoResize();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['text-area__wrapper']}>\n {(label || maxCharacters > 0) && (\n <div className={styles['text-area__header']}>\n <span className={styles['text-area__label-wrapper']}>\n {label && (\n <span className={clsx(styles['text-area__label'], { [styles['required']]: required })}>{label}</span>\n )}\n {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n </span>\n {maxCharacters > 0 && (\n <div className={styles['text-area__word-count']}>\n <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n {characterCount}\n </span>\n / {maxCharacters}\n </div>\n )}\n </div>\n )}\n\n <textarea\n ref={textAreaRef}\n className={clsx(styles['text-area'], {\n [styles['not-valid']]: notValid,\n [styles['text-area--oneLine']]: heightAsTextField,\n })}\n maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n onInput={handleInput}\n defaultValue={defaultValue}\n />\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;ACwBA,SAAgB,EAAS,EACvB,aACA,UACA,aACA,mBAAgB,GAChB,uBAAoB,IACpB,kBAAe,IACf,cAAW,IACX,cAAW,MACK;CAChB,IAAM,IAAc,EAA4B,KAAK,EAC/C,CAAC,GAAgB,KAAqB,EAAS,EAAa,OAAO,EAEnE,UAAoB;EACxB,AAAI,EAAY,YACd,EAAY,QAAQ,MAAM,SAAS,QACnC,EAAY,QAAQ,MAAM,SAAS,GAAG,EAAY,QAAQ,aAAa,KAEvE,EAAkB,EAAY,QAAQ,MAAM,OAAO,EACnD,EAAS,EAAY,QAAQ,MAAM,MAAM,CAAC;IAIxC,UAAmB;EACvB,IAAM,IAAK,EAAY;EAClB,MACL,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAG,EAAG,aAAa;;CAUvC,OAPA,QAAgB;EACd,AAAK,KACH,GAAY;IAGb,EAAE,CAAC,EAGJ,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,EACI,KAAS,IAAgB,MACzB,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAK,EAAO,qBAAqB,GAAG,EAAO,WAAc,GAAU,CAAC;eAAG;KAAa,CAAA,EAEtG,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA0B;KAAgB,CAAA,CAC1E;OACN,IAAgB,KACf,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,QAAD;MAAM,WAAW,EAAK,GAAG,EAAO,kCAAkC,MAAmB,GAAe,CAAC;gBAClG;MACI,CAAA;;KACO;KACV;MAEJ;MAGR,kBAAC,YAAD;GACE,KAAK;GACL,WAAW,EAAK,EAAO,cAAc;KAClC,EAAO,eAAe;KACtB,EAAO,wBAAwB;IACjC,CAAC;GACF,WAAW,IAAgB,IAAI,IAAgB,KAAA;GAC/C,SAAS;GACK;GACd,CAAA,CACE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleSwitch-C7z7JVtx.js","names":[],"sources":["../src/components/ToggleSwitch/ToggleSwitch.module.css","../src/components/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":[".toggle-switch {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: 1ch;\n user-select: none;\n}\n\n.toggle-switch__visible {\n align-items: center;\n background-color: var(--color-uva-white);\n border: 1px solid var(--color-uva-black);\n border-radius: 0.75rem;\n box-shadow:\n 0 1px 1px hsla(0deg 0% 0% / 6%),\n 0 1px 2px hsl(0deg 0% 0% / 10%);\n display: flex;\n height: 1.5rem;\n outline: 0.125rem dotted transparent;\n outline-offset: 0.125rem;\n padding: 0.25rem;\n transition: background-color 150ms;\n width: 3.125rem;\n}\n\n:focus-visible + .toggle-switch__visible {\n outline-color: var(--color-navy-600);\n}\n\n:checked + .toggle-switch__visible {\n background-color: var(--color-forest-600);\n}\n\n.toggle-switch__visible::before {\n background-color: var(--color-grey-300);\n border: 1px solid var(--color-uva-black);\n border-radius: 0.75rem;\n content: \"\";\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n transform: translateX(-0.1rem);\n transition:\n background-color 150ms,\n transform 150ms,\n width 150ms;\n}\n\n:checked + .toggle-switch__visible::before {\n background-color: var(--color-uva-white);\n transform: translateX(1.6rem);\n}\n\n.toggle-switch--disabled .toggle-switch__visible::before {\n background-color: hsl(0deg 0% 0% / 10%);\n border-color: hsl(0deg 0% 0% / 10%);\n}\n\n:checked:active + .toggle-switch__visible::before {\n transform: translateX(1.25rem);\n}\n\n.toggle-switch--disabled,\n.toggle-switch--loading {\n pointer-events: none;\n}\n\n.toggle-switch--disabled .toggle-switch__visible {\n background-color: var(--color-grey-300);\n border-color: hsl(0deg 0% 0% / 10%);\n box-shadow: none;\n}\n\n.toggle-switch--visually-hidden {\n border: 0;\n clip: rect(0, 0, 0, 0);\n clip-path: inset(50%);\n height: 1px;\n margin: 0 -1px -1px 0;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.toggle-switch--disabled-label {\n color: var(--color-grey-700);\n}\n\n.toggle-switch--loading-cursor {\n cursor: wait;\n}\n\n.toggle-switch--extra-left-gap {\n margin-left: 0.5rem;\n}\n","import classNames from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ToggleSwitch.module.css';\n\nexport interface ToggleSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'className'> {\n /** The label for the toggle switch. */\n label: string;\n /** Boolean value if label should be visible. */\n labelVisible?: boolean;\n /** Selection for label placement compared to toggle switch. */\n labelPosition?: 'before' | 'after';\n /** Boolean value to be used if the toggle mutates. If true the toggle is disabled in a loading state. */\n loading?: boolean;\n /** Boolean value if extra gap is needed on left of component. */\n extraLeftGap?: boolean;\n}\n\nfunction ConditionalWrapper({\n condition,\n wrapper,\n children,\n}: {\n condition: boolean;\n wrapper: (children: ReactNode) => ReactNode;\n children: ReactNode;\n}) {\n return condition ? wrapper(children) : children;\n}\n\n/** Represents a component for a toggle switch. */\nexport function ToggleSwitch({\n label,\n labelPosition = 'after',\n labelVisible = true,\n loading = false,\n extraLeftGap,\n ...restProps\n}: ToggleSwitchProps) {\n const labelComponent = (\n <span\n className={classNames(\n { [styles['toggle-switch--visually-hidden']]: !labelVisible },\n { [styles['toggle-switch--disabled-label']]: restProps.disabled }\n )}\n >\n {label}\n </span>\n );\n\n return (\n <ConditionalWrapper\n condition={loading}\n wrapper={(children) => <div className={styles['toggle-switch--loading-cursor']}>{children}</div>}\n >\n <label\n className={classNames(\n styles['toggle-switch'],\n { [styles['toggle-switch--disabled']]: restProps.disabled },\n { [styles['toggle-switch--loading']]: loading },\n { [styles['toggle-switch--extra-left-gap']]: extraLeftGap }\n )}\n >\n {labelPosition === 'before' && labelComponent}\n <input className={styles['toggle-switch--visually-hidden']} {...restProps} type=\"checkbox\" />\n <span className={styles['toggle-switch__visible']} title={!labelVisible ? label : ''} />\n {labelPosition === 'after' && labelComponent}\n </label>\n </ConditionalWrapper>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;ACmBA,SAAS,EAAmB,EAC1B,cACA,YACA,eAKC;
|
|
1
|
+
{"version":3,"file":"ToggleSwitch-C7z7JVtx.js","names":[],"sources":["../src/components/ToggleSwitch/ToggleSwitch.module.css","../src/components/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":[".toggle-switch {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: 1ch;\n user-select: none;\n}\n\n.toggle-switch__visible {\n align-items: center;\n background-color: var(--color-uva-white);\n border: 1px solid var(--color-uva-black);\n border-radius: 0.75rem;\n box-shadow:\n 0 1px 1px hsla(0deg 0% 0% / 6%),\n 0 1px 2px hsl(0deg 0% 0% / 10%);\n display: flex;\n height: 1.5rem;\n outline: 0.125rem dotted transparent;\n outline-offset: 0.125rem;\n padding: 0.25rem;\n transition: background-color 150ms;\n width: 3.125rem;\n}\n\n:focus-visible + .toggle-switch__visible {\n outline-color: var(--color-navy-600);\n}\n\n:checked + .toggle-switch__visible {\n background-color: var(--color-forest-600);\n}\n\n.toggle-switch__visible::before {\n background-color: var(--color-grey-300);\n border: 1px solid var(--color-uva-black);\n border-radius: 0.75rem;\n content: \"\";\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n transform: translateX(-0.1rem);\n transition:\n background-color 150ms,\n transform 150ms,\n width 150ms;\n}\n\n:checked + .toggle-switch__visible::before {\n background-color: var(--color-uva-white);\n transform: translateX(1.6rem);\n}\n\n.toggle-switch--disabled .toggle-switch__visible::before {\n background-color: hsl(0deg 0% 0% / 10%);\n border-color: hsl(0deg 0% 0% / 10%);\n}\n\n:checked:active + .toggle-switch__visible::before {\n transform: translateX(1.25rem);\n}\n\n.toggle-switch--disabled,\n.toggle-switch--loading {\n pointer-events: none;\n}\n\n.toggle-switch--disabled .toggle-switch__visible {\n background-color: var(--color-grey-300);\n border-color: hsl(0deg 0% 0% / 10%);\n box-shadow: none;\n}\n\n.toggle-switch--visually-hidden {\n border: 0;\n clip: rect(0, 0, 0, 0);\n clip-path: inset(50%);\n height: 1px;\n margin: 0 -1px -1px 0;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.toggle-switch--disabled-label {\n color: var(--color-grey-700);\n}\n\n.toggle-switch--loading-cursor {\n cursor: wait;\n}\n\n.toggle-switch--extra-left-gap {\n margin-left: 0.5rem;\n}\n","import classNames from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ToggleSwitch.module.css';\n\nexport interface ToggleSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'className'> {\n /** The label for the toggle switch. */\n label: string;\n /** Boolean value if label should be visible. */\n labelVisible?: boolean;\n /** Selection for label placement compared to toggle switch. */\n labelPosition?: 'before' | 'after';\n /** Boolean value to be used if the toggle mutates. If true the toggle is disabled in a loading state. */\n loading?: boolean;\n /** Boolean value if extra gap is needed on left of component. */\n extraLeftGap?: boolean;\n}\n\nfunction ConditionalWrapper({\n condition,\n wrapper,\n children,\n}: {\n condition: boolean;\n wrapper: (children: ReactNode) => ReactNode;\n children: ReactNode;\n}) {\n return condition ? wrapper(children) : children;\n}\n\n/** Represents a component for a toggle switch. */\nexport function ToggleSwitch({\n label,\n labelPosition = 'after',\n labelVisible = true,\n loading = false,\n extraLeftGap,\n ...restProps\n}: ToggleSwitchProps) {\n const labelComponent = (\n <span\n className={classNames(\n { [styles['toggle-switch--visually-hidden']]: !labelVisible },\n { [styles['toggle-switch--disabled-label']]: restProps.disabled }\n )}\n >\n {label}\n </span>\n );\n\n return (\n <ConditionalWrapper\n condition={loading}\n wrapper={(children) => <div className={styles['toggle-switch--loading-cursor']}>{children}</div>}\n >\n <label\n className={classNames(\n styles['toggle-switch'],\n { [styles['toggle-switch--disabled']]: restProps.disabled },\n { [styles['toggle-switch--loading']]: loading },\n { [styles['toggle-switch--extra-left-gap']]: extraLeftGap }\n )}\n >\n {labelPosition === 'before' && labelComponent}\n <input className={styles['toggle-switch--visually-hidden']} {...restProps} type=\"checkbox\" />\n <span className={styles['toggle-switch__visible']} title={!labelVisible ? label : ''} />\n {labelPosition === 'after' && labelComponent}\n </label>\n </ConditionalWrapper>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;ACmBA,SAAS,EAAmB,EAC1B,cACA,YACA,eAKC;CACD,OAAO,IAAY,EAAQ,EAAS,GAAG;;AAIzC,SAAgB,EAAa,EAC3B,UACA,mBAAgB,SAChB,kBAAe,IACf,aAAU,IACV,iBACA,GAAG,KACiB;CACpB,IAAM,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,GAAG,EAAO,oCAAoC,CAAC,GAAc,EAC7D,GAAG,EAAO,mCAAmC,EAAU,UAAU,CAClE;YAEA;EACI,CAAA;CAGT,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU,MAAa,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAmC;GAAe,CAAA;YAEhG,kBAAC,SAAD;GACE,WAAW,EACT,EAAO,kBACP,GAAG,EAAO,6BAA6B,EAAU,UAAU,EAC3D,GAAG,EAAO,4BAA4B,GAAS,EAC/C,GAAG,EAAO,mCAAmC,GAAc,CAC5D;aANH;IAQG,MAAkB,YAAY;IAC/B,kBAAC,SAAD;KAAO,WAAW,EAAO;KAAmC,GAAI;KAAW,MAAK;KAAa,CAAA;IAC7F,kBAAC,QAAD;KAAM,WAAW,EAAO;KAA2B,OAAQ,IAAuB,KAAR;KAAc,CAAA;IACvF,MAAkB,WAAW;IACxB;;EACW,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip-D27p9kh4.js","names":[],"sources":["../src/components/Tooltip/Tooltip.module.css","../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[".tooltip-container {\n align-items: flex-end;\n cursor: help;\n display: flex;\n position: relative;\n}\n\n.tooltip_small,\n.tooltip_medium,\n.tooltip_large {\n background-color: var(--color-grey-700);\n border-radius: 0.5rem;\n color: var(--color-uva-white);\n font-weight: 400;\n padding: 0.5rem;\n position: fixed;\n text-align: center;\n transform: translate(-50%, -50%);\n white-space: normal;\n z-index: 10;\n}\n\n.tooltip_small {\n height: 4rem;\n width: 14.5rem;\n}\n\n.tooltip_medium {\n height: 5.5rem;\n width: 20rem;\n}\n\n.tooltip_large {\n height: 5.5rem;\n width: 24.5rem;\n}\n\n.tooltip_small::before,\n.tooltip_medium::before,\n.tooltip_large::before {\n border: 0.5rem solid transparent;\n border-top-color: var(--color-grey-700);\n content: \"\";\n height: 0;\n position: absolute;\n width: 0;\n}\n\n.tooltip_small::before {\n right: 1rem;\n top: 4rem;\n}\n\n.tooltip_medium::before {\n right: 3rem;\n top: 5.5rem;\n}\n\n.tooltip_large::before {\n right: 4rem;\n top: 5.5rem;\n}\n\n.tooltip_under-trigger {\n background-color: var(--color-grey-700);\n border-radius: 0.5rem;\n color: var(--color-uva-white);\n font-weight: 400;\n max-width: calc(100vw - 2rem);\n padding: 0.25rem 1rem;\n position: fixed;\n right: 1rem;\n top: 3.5rem;\n}\n\n.tooltip_under-trigger::before {\n border-bottom: 0.5rem solid var(--color-grey-700);\n border-left: 0.5rem solid transparent;\n border-right: 0.5rem solid transparent;\n content: \"\";\n height: 0;\n position: absolute;\n right: 3.5rem;\n top: -0.5rem;\n width: 0;\n}\n\n@media (min-width: 50rem) {\n .tooltip_under-trigger {\n right: 0.5rem;\n }\n}\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n /** The element which triggers the tooltip on hover. */\n element: ReactNode;\n /** The id of the tooltip element. */\n id: string;\n /** The contents of the tooltip. */\n text: string;\n /** The size of the tooltip. */\n size?: 'small' | 'medium' | 'large';\n /** <span style=\"color: red\">**Obsolete**</span>. Used by Lens only, and should be refactored */\n openUnderTrigger?: boolean;\n}\n\n/** Represents a component for a custom tooltip. */\nexport function Tooltip({ element, id, text, size = 'medium', openUnderTrigger = false }: TooltipProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const tooltipRef = useRef<HTMLSpanElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const [position, setPosition] = useState({ top: 0, left: 0 });\n\n /* eslint-disable @typescript-eslint/no-magic-numbers */\n const topOffset = (size === 'small' && 20) || (size === 'large' && 35) || 27;\n const leftOffset = (size === 'small' && 25) || (size === 'large' && 70) || 47;\n /* eslint-enable @typescript-eslint/no-magic-numbers */\n\n const calculatePosition = useCallback(() => {\n if (containerRef.current && tooltipRef.current) {\n const triggerRect = containerRef.current.getBoundingClientRect();\n const tooltipRect = tooltipRef.current.getBoundingClientRect();\n const scrollY = window.scrollY;\n const scrollX = window.scrollX;\n let top = triggerRect.top + scrollY + topOffset - tooltipRect.height;\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n const left = triggerRect.left + scrollX + leftOffset + (triggerRect.width - tooltipRect.width) / 2;\n\n // Adjust top position to account for page scrolling\n top -= scrollY;\n\n // Position tooltip below if it would be above the viewport\n if (top < 0) {\n top = triggerRect.bottom + scrollY;\n }\n\n setPosition({ top, left });\n }\n }, [leftOffset, topOffset]);\n\n const onKeyUp = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n function show() {\n setIsOpen(true);\n }\n\n function hide() {\n setIsOpen(false);\n }\n\n function toggle() {\n if (isOpen) setIsOpen(false);\n else setIsOpen(true);\n }\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const tooltipContainerRef = containerRef.current;\n\n tooltipContainerRef.addEventListener('keyup', onKeyUp, true);\n\n return () => {\n tooltipContainerRef.removeEventListener('keyup', onKeyUp, true);\n };\n }, [onKeyUp]);\n\n useEffect(() => {\n calculatePosition();\n window.addEventListener('resize', calculatePosition);\n return () => {\n window.removeEventListener('resize', calculatePosition);\n };\n }, [calculatePosition]);\n\n useEffect(() => {\n // Recalculate position when isOpen changes\n if (isOpen && !openUnderTrigger) {\n calculatePosition();\n }\n }, [isOpen, openUnderTrigger, calculatePosition]);\n\n return (\n <div\n className={styles['tooltip-container']}\n onBlur={hide}\n onFocus={show}\n onMouseEnter={show}\n onMouseLeave={hide}\n onMouseUp={toggle}\n ref={containerRef}\n role=\"button\"\n tabIndex={-1}\n >\n <div aria-describedby={isOpen ? id : undefined}>{element}</div>\n {isOpen && (\n <span\n ref={tooltipRef}\n className={openUnderTrigger ? styles['tooltip_under-trigger'] : styles[`tooltip_${size}`]}\n id={id}\n role=\"tooltip\"\n style={openUnderTrigger ? {} : { top: position.top, left: position.left }}\n >\n {text}\n </span>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;ACoBA,SAAgB,EAAQ,EAAE,YAAS,OAAI,SAAM,UAAO,UAAU,sBAAmB,MAAuB;CACtG,IAAM,IAAe,EAAuB,KAAK,EAC3C,IAAa,EAAwB,KAAK,EAC1C,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAU,KAAe,EAAS;EAAE,KAAK;EAAG,MAAM;EAAG,CAAC,EAGvD,IAAa,MAAS,WAAW,MAAQ,MAAS,WAAW,MAAO,IACpE,IAAc,MAAS,WAAW,MAAQ,MAAS,WAAW,MAAO,IAGrE,IAAoB,QAAkB;
|
|
1
|
+
{"version":3,"file":"Tooltip-D27p9kh4.js","names":[],"sources":["../src/components/Tooltip/Tooltip.module.css","../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[".tooltip-container {\n align-items: flex-end;\n cursor: help;\n display: flex;\n position: relative;\n}\n\n.tooltip_small,\n.tooltip_medium,\n.tooltip_large {\n background-color: var(--color-grey-700);\n border-radius: 0.5rem;\n color: var(--color-uva-white);\n font-weight: 400;\n padding: 0.5rem;\n position: fixed;\n text-align: center;\n transform: translate(-50%, -50%);\n white-space: normal;\n z-index: 10;\n}\n\n.tooltip_small {\n height: 4rem;\n width: 14.5rem;\n}\n\n.tooltip_medium {\n height: 5.5rem;\n width: 20rem;\n}\n\n.tooltip_large {\n height: 5.5rem;\n width: 24.5rem;\n}\n\n.tooltip_small::before,\n.tooltip_medium::before,\n.tooltip_large::before {\n border: 0.5rem solid transparent;\n border-top-color: var(--color-grey-700);\n content: \"\";\n height: 0;\n position: absolute;\n width: 0;\n}\n\n.tooltip_small::before {\n right: 1rem;\n top: 4rem;\n}\n\n.tooltip_medium::before {\n right: 3rem;\n top: 5.5rem;\n}\n\n.tooltip_large::before {\n right: 4rem;\n top: 5.5rem;\n}\n\n.tooltip_under-trigger {\n background-color: var(--color-grey-700);\n border-radius: 0.5rem;\n color: var(--color-uva-white);\n font-weight: 400;\n max-width: calc(100vw - 2rem);\n padding: 0.25rem 1rem;\n position: fixed;\n right: 1rem;\n top: 3.5rem;\n}\n\n.tooltip_under-trigger::before {\n border-bottom: 0.5rem solid var(--color-grey-700);\n border-left: 0.5rem solid transparent;\n border-right: 0.5rem solid transparent;\n content: \"\";\n height: 0;\n position: absolute;\n right: 3.5rem;\n top: -0.5rem;\n width: 0;\n}\n\n@media (min-width: 50rem) {\n .tooltip_under-trigger {\n right: 0.5rem;\n }\n}\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n /** The element which triggers the tooltip on hover. */\n element: ReactNode;\n /** The id of the tooltip element. */\n id: string;\n /** The contents of the tooltip. */\n text: string;\n /** The size of the tooltip. */\n size?: 'small' | 'medium' | 'large';\n /** <span style=\"color: red\">**Obsolete**</span>. Used by Lens only, and should be refactored */\n openUnderTrigger?: boolean;\n}\n\n/** Represents a component for a custom tooltip. */\nexport function Tooltip({ element, id, text, size = 'medium', openUnderTrigger = false }: TooltipProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const tooltipRef = useRef<HTMLSpanElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const [position, setPosition] = useState({ top: 0, left: 0 });\n\n /* eslint-disable @typescript-eslint/no-magic-numbers */\n const topOffset = (size === 'small' && 20) || (size === 'large' && 35) || 27;\n const leftOffset = (size === 'small' && 25) || (size === 'large' && 70) || 47;\n /* eslint-enable @typescript-eslint/no-magic-numbers */\n\n const calculatePosition = useCallback(() => {\n if (containerRef.current && tooltipRef.current) {\n const triggerRect = containerRef.current.getBoundingClientRect();\n const tooltipRect = tooltipRef.current.getBoundingClientRect();\n const scrollY = window.scrollY;\n const scrollX = window.scrollX;\n let top = triggerRect.top + scrollY + topOffset - tooltipRect.height;\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n const left = triggerRect.left + scrollX + leftOffset + (triggerRect.width - tooltipRect.width) / 2;\n\n // Adjust top position to account for page scrolling\n top -= scrollY;\n\n // Position tooltip below if it would be above the viewport\n if (top < 0) {\n top = triggerRect.bottom + scrollY;\n }\n\n setPosition({ top, left });\n }\n }, [leftOffset, topOffset]);\n\n const onKeyUp = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n function show() {\n setIsOpen(true);\n }\n\n function hide() {\n setIsOpen(false);\n }\n\n function toggle() {\n if (isOpen) setIsOpen(false);\n else setIsOpen(true);\n }\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const tooltipContainerRef = containerRef.current;\n\n tooltipContainerRef.addEventListener('keyup', onKeyUp, true);\n\n return () => {\n tooltipContainerRef.removeEventListener('keyup', onKeyUp, true);\n };\n }, [onKeyUp]);\n\n useEffect(() => {\n calculatePosition();\n window.addEventListener('resize', calculatePosition);\n return () => {\n window.removeEventListener('resize', calculatePosition);\n };\n }, [calculatePosition]);\n\n useEffect(() => {\n // Recalculate position when isOpen changes\n if (isOpen && !openUnderTrigger) {\n calculatePosition();\n }\n }, [isOpen, openUnderTrigger, calculatePosition]);\n\n return (\n <div\n className={styles['tooltip-container']}\n onBlur={hide}\n onFocus={show}\n onMouseEnter={show}\n onMouseLeave={hide}\n onMouseUp={toggle}\n ref={containerRef}\n role=\"button\"\n tabIndex={-1}\n >\n <div aria-describedby={isOpen ? id : undefined}>{element}</div>\n {isOpen && (\n <span\n ref={tooltipRef}\n className={openUnderTrigger ? styles['tooltip_under-trigger'] : styles[`tooltip_${size}`]}\n id={id}\n role=\"tooltip\"\n style={openUnderTrigger ? {} : { top: position.top, left: position.left }}\n >\n {text}\n </span>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;ACoBA,SAAgB,EAAQ,EAAE,YAAS,OAAI,SAAM,UAAO,UAAU,sBAAmB,MAAuB;CACtG,IAAM,IAAe,EAAuB,KAAK,EAC3C,IAAa,EAAwB,KAAK,EAC1C,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAU,KAAe,EAAS;EAAE,KAAK;EAAG,MAAM;EAAG,CAAC,EAGvD,IAAa,MAAS,WAAW,MAAQ,MAAS,WAAW,MAAO,IACpE,IAAc,MAAS,WAAW,MAAQ,MAAS,WAAW,MAAO,IAGrE,IAAoB,QAAkB;EAC1C,IAAI,EAAa,WAAW,EAAW,SAAS;GAC9C,IAAM,IAAc,EAAa,QAAQ,uBAAuB,EAC1D,IAAc,EAAW,QAAQ,uBAAuB,EACxD,IAAU,OAAO,SACjB,IAAU,OAAO,SACnB,IAAM,EAAY,MAAM,IAAU,IAAY,EAAY,QAExD,IAAO,EAAY,OAAO,IAAU,KAAc,EAAY,QAAQ,EAAY,SAAS;GAUjG,AAPA,KAAO,GAGH,IAAM,MACR,IAAM,EAAY,SAAS,IAG7B,EAAY;IAAE;IAAK;IAAM,CAAC;;IAE3B,CAAC,GAAY,EAAU,CAAC,EAErB,IAAU,GACb,MAAyB;EACxB,AAAI,EAAM,QAAQ,YAChB,EAAU,GAAM;IAGpB,CAAC,EAAU,CACZ;CAED,SAAS,IAAO;EACd,EAAU,GAAK;;CAGjB,SAAS,IAAO;EACd,EAAU,GAAM;;CAGlB,SAAS,IAAS;EAChB,AAAY,EAAR,GACgB;;CA8BtB,OA3BA,QAAgB;EACd,IAAI,CAAC,EAAa,SAAS;EAE3B,IAAM,IAAsB,EAAa;EAIzC,OAFA,EAAoB,iBAAiB,SAAS,GAAS,GAAK,QAE/C;GACX,EAAoB,oBAAoB,SAAS,GAAS,GAAK;;IAEhE,CAAC,EAAQ,CAAC,EAEb,SACE,GAAmB,EACnB,OAAO,iBAAiB,UAAU,EAAkB,QACvC;EACX,OAAO,oBAAoB,UAAU,EAAkB;KAExD,CAAC,EAAkB,CAAC,EAEvB,QAAgB;EAEd,AAAI,KAAU,CAAC,KACb,GAAmB;IAEpB;EAAC;EAAQ;EAAkB;EAAkB,CAAC,EAG/C,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,QAAQ;EACR,SAAS;EACT,cAAc;EACd,cAAc;EACd,WAAW;EACX,KAAK;EACL,MAAK;EACL,UAAU;YATZ,CAWE,kBAAC,OAAD;GAAK,oBAAkB,IAAS,IAAK,KAAA;aAAY;GAAc,CAAA,EAC9D,KACC,kBAAC,QAAD;GACE,KAAK;GACL,WAAW,IAAmB,EAAO,2BAA2B,EAAO,WAAW;GAC9E;GACJ,MAAK;GACL,OAAO,IAAmB,EAAE,GAAG;IAAE,KAAK,EAAS;IAAK,MAAM,EAAS;IAAM;aAExE;GACI,CAAA,CAEL"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VarIndicator-C-GueOZD.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;CACT,EAEY,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;GAAM,CAAA;EAClE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAA0B,EAAM,GAAG;GAAkB,CAAA;EAC5E,KACC,IAAW,KACX,MAAY,eACZ,MAAM,KAAK,EAAE,QAAQ,GAAU,GAAG,GAAG,MAAQ,IAAM,EAAE,CAAC,KAAK,MACzD,kBAAC,OAAD;GAAgB,WAAW,EAAO;aAChC,kBAAC,GAAD,EAAM,MAAM,KAAQ,IAAc,sBAAsB,eAAiB,CAAA;GACrE,EAFI,EAEJ,CACN;EACH,EAAA,CAAA;
|
|
1
|
+
{"version":3,"file":"VarIndicator-C-GueOZD.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;CACT,EAEY,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;GAAM,CAAA;EAClE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAA0B,EAAM,GAAG;GAAkB,CAAA;EAC5E,KACC,IAAW,KACX,MAAY,eACZ,MAAM,KAAK,EAAE,QAAQ,GAAU,GAAG,GAAG,MAAQ,IAAM,EAAE,CAAC,KAAK,MACzD,kBAAC,OAAD;GAAgB,WAAW,EAAO;aAChC,kBAAC,GAAD,EAAM,MAAM,KAAQ,IAAc,sBAAsB,eAAiB,CAAA;GACrE,EAFI,EAEJ,CACN;EACH,EAAA,CAAA;CAGL,OACE,kBAAC,UAAD;EACE,WAAW,EACT,EAAO,6BACP,EAAO,6BAA6B,EAAQ,aAAa,KACzD,GACG,EAAO,uCAAuC,GAChD,CACF;EACQ;YAER,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAM,MAAM,EAAW;GAA+B,MAAM;GAAM,CAAA,EAClE,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,6BACP,EAAO,qDACR;aAED,kBAAC,GAAD,EAAoB,CAAA;GAChB,CAAA,CACL,EAAA,CAAA,GAEH,kBAAC,GAAD,EAAoB,CAAA;EAEf,CAAA"}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
src:
|
|
5
5
|
local("SourceSans3-Regular"),
|
|
6
6
|
local("Source Sans 3"),
|
|
7
|
-
url("
|
|
8
|
-
url("
|
|
7
|
+
url("../assets/fonts/SourceSans3-Regular.otf.woff2") format("woff2"),
|
|
8
|
+
url("../assets/fonts/SourceSans3-Regular.otf.woff") format("woff");
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
@font-face {
|
|
@@ -16,6 +16,6 @@
|
|
|
16
16
|
local("SourceSans3-Semibold"),
|
|
17
17
|
local("Source Sans 3 Semibold"),
|
|
18
18
|
local("Source Sans 3"),
|
|
19
|
-
url("
|
|
20
|
-
url("
|
|
19
|
+
url("../assets/fonts/SourceSans3-Semibold.otf.woff2") format("woff2"),
|
|
20
|
+
url("../assets/fonts/SourceSans3-Semibold.otf.woff") format("woff");
|
|
21
21
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region \0rolldown/runtime.js
|
|
2
|
-
var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), s = (e, n) => {
|
|
2
|
+
var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, n) => {
|
|
3
3
|
let r = {};
|
|
4
4
|
for (var i in e) t(r, i, {
|
|
5
5
|
get: e[i],
|
|
@@ -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-Pa9Lwbsq.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
|
}
|
|
@@ -8445,4 +8445,4 @@ async function xs(e, t) {
|
|
|
8445
8445
|
//#endregion
|
|
8446
8446
|
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 };
|
|
8447
8447
|
|
|
8448
|
-
//# sourceMappingURL=chunk-SZQXB3JV-
|
|
8448
|
+
//# sourceMappingURL=chunk-SZQXB3JV-D6GR5B4F.js.map
|