@uva-glass/component-library 3.43.0 → 3.44.0
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/RteEditor.module-CovRFt0S.js +34 -0
- package/dist/RteEditor.module-CovRFt0S.js.map +1 -0
- package/dist/SelectListbox.module-CAKDuwcy.js +28 -0
- package/dist/SelectListbox.module-CAKDuwcy.js.map +1 -0
- package/dist/{TablePlugin-CAoOq8iA.js → TablePlugin-DaKDRL4G.js} +2 -2
- package/dist/{TablePlugin-CAoOq8iA.js.map → TablePlugin-DaKDRL4G.js.map} +1 -1
- package/dist/assets/CheckboxButtonBar.css +1 -1
- package/dist/assets/RteEditor.css +1 -1
- package/dist/assets/SelectListbox.css +1 -1
- package/dist/components/Buttons/Button.stories.js +1 -1
- package/dist/components/Buttons/LinkButton.stories.js +1 -1
- package/dist/components/Buttons/MenuButton.stories.js +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts +4 -2
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +95 -64
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.d.ts +4 -3
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +61 -26
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +2 -2
- package/dist/components/Chip/Chip.stories.js +1 -1
- package/dist/components/ControlsButton/ControlsButton.d.ts +1 -1
- package/dist/components/ControlsButton/ControlsButton.js +27 -27
- package/dist/components/ControlsButton/ControlsButton.js.map +1 -1
- package/dist/components/ControlsButton/ControlsButton.stories.d.ts +1 -0
- package/dist/components/ControlsButton/ControlsButton.stories.js +70 -25
- package/dist/components/ControlsButton/ControlsButton.stories.js.map +1 -1
- package/dist/components/Drawer/Drawer.stories.js +1 -1
- package/dist/components/FormInput/FormInput.js +1 -1
- package/dist/components/FormInput/FormInput.stories.js +1 -1
- package/dist/components/IconButton/IconButton.stories.js +1 -1
- package/dist/components/InputField/InputField.stories.js +2 -2
- package/dist/components/ModalDialog/ModalDialog.stories.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +2 -2
- 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/Notification/Notification.stories.js +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.stories.js +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +1 -1
- package/dist/components/RadioGroup/RadioGroup.stories.js +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.js +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.js +1 -1
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js +1 -1
- package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +2 -2
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +2 -2
- package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js +2 -2
- package/dist/components/RteEditor/Plugins/TablePlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +2 -2
- package/dist/components/RteEditor/Plugins/index.js +1 -1
- package/dist/components/RteEditor/RteEditor.js +2 -2
- package/dist/components/RteEditor/RteEditor.stories.js +64 -25
- package/dist/components/RteEditor/RteEditor.stories.js.map +1 -1
- package/dist/components/RteEditor/UvaTheme/UvaTheme.d.ts +2 -0
- package/dist/components/RteEditor/UvaTheme/UvaTheme.js +4 -2
- package/dist/components/RteEditor/UvaTheme/UvaTheme.js.map +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js +6 -6
- package/dist/components/SelectListbox/SelectListBox.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectListbox.d.ts +1 -1
- package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectButton.d.ts +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectContainer.js +1 -1
- package/dist/components/SelectListbox/components/SelectOption.js +1 -1
- package/dist/components/SelectListbox/components/SelectOptionBox.js +1 -1
- package/dist/components/Sortable/Sortable.stories.js +1 -1
- package/dist/components/TextArea/TextArea.stories.js +1 -1
- package/dist/components/TextArea/TextArea.test.js +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.js +1 -1
- package/dist/components/VarIndicator/VarIndicator.stories.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/{index-BVrrnUn0.js → index-BfMTX2kB.js} +6 -3
- package/dist/index-BfMTX2kB.js.map +1 -0
- package/dist/{index-BamlKH-k.js → index-DvUwfXNb.js} +3 -2
- package/dist/{index-BamlKH-k.js.map → index-DvUwfXNb.js.map} +1 -1
- package/dist/index.js +1 -1
- package/dist/storybook__react.d.js +3 -3
- package/package.json +14 -14
- package/dist/RteEditor.module-dE9wQTC9.js +0 -42
- package/dist/RteEditor.module-dE9wQTC9.js.map +0 -1
- package/dist/SelectListbox.module-yzXaWwsm.js +0 -26
- package/dist/SelectListbox.module-yzXaWwsm.js.map +0 -1
- package/dist/index-BVrrnUn0.js.map +0 -1
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import './assets/RteEditor.css';const t = "_editor__container_1hmqh_1", _ = "_editor__header_1hmqh_7", e = "_editor_1hmqh_1", o = "_editor__field_1hmqh_36", i = "_editor__toolbar_1hmqh_40", r = "_editor__placeholder_1hmqh_170", d = {
|
|
2
|
+
editor__container: t,
|
|
3
|
+
editor__header: _,
|
|
4
|
+
"editor__header-word-count": "_editor__header-word-count_1hmqh_15",
|
|
5
|
+
"editor__header-word-count--alert": "_editor__header-word-count--alert_1hmqh_24",
|
|
6
|
+
editor: e,
|
|
7
|
+
editor__field: o,
|
|
8
|
+
editor__toolbar: i,
|
|
9
|
+
"editor__toolbar-button-group": "_editor__toolbar-button-group_1hmqh_49",
|
|
10
|
+
"editor__toolbar-button": "_editor__toolbar-button_1hmqh_49",
|
|
11
|
+
"editor__toolbar-button--active": "_editor__toolbar-button--active_1hmqh_80",
|
|
12
|
+
"editor__toolbar-button--bold": "_editor__toolbar-button--bold_1hmqh_100",
|
|
13
|
+
"editor__toolbar-button--italic": "_editor__toolbar-button--italic_1hmqh_104",
|
|
14
|
+
"editor__toolbar-button-flyoutwrapper": "_editor__toolbar-button-flyoutwrapper_1hmqh_123",
|
|
15
|
+
"editor__field-wrapper": "_editor__field-wrapper_1hmqh_127",
|
|
16
|
+
editor__placeholder: r,
|
|
17
|
+
"guide-text-ltr": "_guide-text-ltr_1hmqh_180",
|
|
18
|
+
"guide-text-rtl": "_guide-text-rtl_1hmqh_184",
|
|
19
|
+
"guide-text-paragraph": "_guide-text-paragraph_1hmqh_188",
|
|
20
|
+
"guide-text__text--bold": "_guide-text__text--bold_1hmqh_193",
|
|
21
|
+
"guide-text__text--italic": "_guide-text__text--italic_1hmqh_197",
|
|
22
|
+
"guide-text__list--ul": "_guide-text__list--ul_1hmqh_201",
|
|
23
|
+
"guide-text__list--ol": "_guide-text__list--ol_1hmqh_202",
|
|
24
|
+
"guide-text__list--listitem": "_guide-text__list--listitem_1hmqh_214",
|
|
25
|
+
"guide-text__list--nested-listitem": "_guide-text__list--nested-listitem_1hmqh_223",
|
|
26
|
+
"guide-text__list--ul2": "_guide-text__list--ul2_1hmqh_233",
|
|
27
|
+
"guide-text__list--ul3": "_guide-text__list--ul3_1hmqh_237",
|
|
28
|
+
"guide-text__list--ul4": "_guide-text__list--ul4_1hmqh_241",
|
|
29
|
+
"guide-text__list--ul5": "_guide-text__list--ul5_1hmqh_245"
|
|
30
|
+
};
|
|
31
|
+
export {
|
|
32
|
+
d as s
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=RteEditor.module-CovRFt0S.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RteEditor.module-CovRFt0S.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import './assets/SelectListbox.css';const t = {
|
|
2
|
+
"select-listbox-container": "_select-listbox-container_xfwty_1",
|
|
3
|
+
"select-listbox__wrapper": "_select-listbox__wrapper_xfwty_5",
|
|
4
|
+
"select-listbox-trigger": "_select-listbox-trigger_xfwty_15",
|
|
5
|
+
"select-listbox-trigger--default": "_select-listbox-trigger--default_xfwty_30",
|
|
6
|
+
"select-listbox-trigger--small": "_select-listbox-trigger--small_xfwty_34",
|
|
7
|
+
"select-listbox-trigger--medium": "_select-listbox-trigger--medium_xfwty_38",
|
|
8
|
+
"select-listbox-trigger-label": "_select-listbox-trigger-label_xfwty_43",
|
|
9
|
+
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_xfwty_52",
|
|
10
|
+
"select-listbox-trigger--bold": "_select-listbox-trigger--bold_xfwty_56",
|
|
11
|
+
"select-listbox-trigger--pill": "_select-listbox-trigger--pill_xfwty_60",
|
|
12
|
+
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_xfwty_65",
|
|
13
|
+
"select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_xfwty_70",
|
|
14
|
+
"select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_xfwty_75",
|
|
15
|
+
"select-listbox-trigger--roundedLeft": "_select-listbox-trigger--roundedLeft_xfwty_79",
|
|
16
|
+
"select-listbox-trigger--roundedRight": "_select-listbox-trigger--roundedRight_xfwty_83",
|
|
17
|
+
"select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_xfwty_97",
|
|
18
|
+
"select-listbox-trigger-icon": "_select-listbox-trigger-icon_xfwty_109",
|
|
19
|
+
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_xfwty_114",
|
|
20
|
+
"select-listbox": "_select-listbox_xfwty_1",
|
|
21
|
+
"select-listbox-option": "_select-listbox-option_xfwty_128",
|
|
22
|
+
"select-listbox-option--active": "_select-listbox-option--active_xfwty_141",
|
|
23
|
+
"select-listbox-divider": "_select-listbox-divider_xfwty_151"
|
|
24
|
+
};
|
|
25
|
+
export {
|
|
26
|
+
t as s
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=SelectListbox.module-CAKDuwcy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectListbox.module-CAKDuwcy.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -32,7 +32,7 @@ import "./components/RteEditor/hooks/components/Flyout.js";
|
|
|
32
32
|
import { PREVENT_OPEN_DELAY as ue, deleteTable as fe, deleteColumn as pe, insertColumn as be, deleteRow as _e, insertRow as he, createTable as ke, getEditorParrentCellWidth as ve, getEditorContentWidth as we, DEFAULT_EDITOR_WIDTH as Fe, DEFAULT_COL_WIDTH as Ce } from "./components/RteEditor/Plugins/TablePlugin/helpers.js";
|
|
33
33
|
import { $createTableWrapperNode as ye } from "./components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js";
|
|
34
34
|
import { useFlyout as Ne } from "./components/RteEditor/hooks/useFlyout.js";
|
|
35
|
-
import { s as q } from "./RteEditor.module-
|
|
35
|
+
import { s as q } from "./RteEditor.module-CovRFt0S.js";
|
|
36
36
|
import "react-dom";
|
|
37
37
|
import "./index-yEhaxKq-.js";
|
|
38
38
|
import "./components/SelectListbox/SelectListbox.js";
|
|
@@ -303,4 +303,4 @@ export {
|
|
|
303
303
|
ge as a,
|
|
304
304
|
Se as b
|
|
305
305
|
};
|
|
306
|
-
//# sourceMappingURL=TablePlugin-
|
|
306
|
+
//# sourceMappingURL=TablePlugin-DaKDRL4G.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TablePlugin-CAoOq8iA.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx","../src/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.tsx","../src/components/RteEditor/Plugins/TablePlugin/AddTableFrom.tsx","../src/components/RteEditor/Plugins/TablePlugin/TablePlugin.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n label: string;\n clearTrigger?: string;\n onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n return (\n <header className={styles['multi-select__header']}>\n <Label htmlFor=\"multi-select-list\">{label}</Label>\n {clearTrigger && (\n <Button variant={'blank'} onClick={onClear}>\n {clearTrigger}\n </Button>\n )}\n </header>\n );\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\n\nexport interface MultiSelectProps {\n /** `true` if the container should scroll on overflow; otherwise, `false` to resize the container to its contents. The default is `true`. */\n scrollable?: boolean;\n /** `true` to disable the border around the container; otherwise, `false`. The default is `false`. */\n noBorder?: boolean;\n /** The header contents. */\n header?: ReactNode;\n}\n\n/** Represents a component to list a number of checkboxes. */\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n <>\n {header}\n <div\n className={clsx(styles['multi-select'], {\n [styles['multi-select--no-border']]: noBorder,\n })}\n >\n <ul\n className={clsx(styles['multi-select__list'], {\n [styles['multi-select__list--scrollable']]: scrollable,\n })}\n id=\"multi-select-list\"\n >\n {children}\n </ul>\n </div>\n </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n","import { useState, forwardRef, useImperativeHandle, useRef, useId } from 'react';\n\nimport type { ChangeEvent, JSX } from 'react';\nimport type { LinkType } from 'components/RteEditor/Plugins/LinkPlugin';\n\nimport styles from './AddLinkForm.module.css';\n\nimport { ensureHttps, validateUrlWithProtocol } from 'components/RteEditor/Plugins/LinkPlugin/helpers';\nimport { Button, FeedbackBox, FormField, Icon, InputField, Label } from 'components';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ninterface AddLinkFormProps {\n onCloseHandler: () => void;\n onSaveHandler: (url: string, linktext: string) => void;\n isLink: LinkType;\n}\n\nexport interface addLinkFormMethods {\n clearForm: () => void;\n focusFirstField: () => void;\n setDefaults: (url: string, linktext: string) => void;\n}\n\nexport const AddLinkForm = forwardRef(\n (\n { onCloseHandler, onSaveHandler, isLink = { active: false, url: '', linktext: '' } }: AddLinkFormProps,\n ref\n ): JSX.Element => {\n const t = useTranslation();\n const [url, setUrl] = useState<string>(isLink.url || '');\n const [linkText, setLinkText] = useState<string>(isLink.linktext || '');\n const [showLinktextField, setShowLinktextField] = useState<boolean>(false);\n const [urlError, setUrlError] = useState<string | null>(null);\n const [linkTextError, setLinkTextError] = useState<string | null>(null);\n const firstField = useRef<HTMLInputElement>(null);\n const linkId = `link_${useId()}`;\n const textId = `text_${useId()}`;\n\n const handleOpenUrl = () => {\n window.open(ensureHttps(url), '_blank');\n };\n\n const handleUrl = (event: ChangeEvent<HTMLInputElement>) => {\n setUrl(event.target.value);\n };\n\n const handleLinkText = (event: ChangeEvent<HTMLInputElement>) => {\n setLinkText(event.target.value);\n };\n\n const validateUrl = (url: string): boolean => {\n if (validateUrlWithProtocol(url) === false || url.trim() === '') {\n setUrlError(t.errortext.urlNotValid);\n return false;\n }\n setUrlError(null);\n return true;\n };\n\n const validateLinkText = (linkText: string): boolean => {\n if (linkText.trim() === '') {\n setLinkTextError(t.errortext.linkTextNotValid);\n return false;\n }\n setLinkTextError(null);\n return true;\n };\n\n const handleSave = () => {\n if (!validateUrl(url) || (showLinktextField && !validateLinkText(linkText))) {\n return;\n }\n\n onSaveHandler(url, linkText);\n resetForm();\n };\n\n const handleClose = () => {\n onCloseHandler();\n resetForm();\n };\n\n const resetForm = () => {\n setUrl('');\n setShowLinktextField(false);\n setUrlError(null);\n setLinkTextError(null);\n };\n\n const setDefaults = (url: string, linktext: string) => {\n setUrl(url);\n if (!linktext && !url) {\n setShowLinktextField(true);\n }\n };\n\n const focusFirstField = () => {\n if (firstField.current) {\n firstField.current.focus();\n }\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: resetForm,\n focusFirstField,\n setDefaults,\n }));\n\n return (\n <div className={styles['linkform']}>\n <FormField className={styles['linkform__input-field']}>\n <Label htmlFor={linkId}>{t.links.linkLabel}</Label>\n <div className={styles['linkform__input-url-wrapper']}>\n <InputField\n id={linkId}\n placeholder={t.links.linkPlaceholder}\n value={url}\n onChange={(event) => handleUrl(event)}\n onFocus={() => setUrlError(null)}\n ref={firstField}\n aria-label={t.aria.labels.linkField}\n />\n {url && (\n <button type=\"button\" onClick={handleOpenUrl} className={styles['linkform__open-url-button']}>\n <Icon name=\"ArrowTopRightOnSquare\" size={20} />\n </button>\n )}\n </div>\n {urlError && <FeedbackBox level=\"error\" feedback={urlError} />}\n </FormField>\n {showLinktextField && (\n <FormField className={styles['linkform__input-field']}>\n <Label htmlFor={textId}>{t.links.linkText}</Label>\n <InputField\n id={textId}\n value={linkText}\n onChange={(event) => handleLinkText(event)}\n onFocus={() => setLinkTextError(null)}\n aria-label={t.aria.labels.linkTextfield}\n />\n {linkTextError && <FeedbackBox level=\"error\" feedback={linkTextError} />}\n </FormField>\n )}\n <div className={styles['linkform__footer']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\n {t.common.cancel}\n </Button>\n <Button variant={'primary'} onClick={handleSave} aria-label={t.aria.labels.linkOkButton} type=\"button\">\n {t.links.addLink}\n </Button>\n </div>\n </div>\n );\n }\n);\n","import { useState, forwardRef, useImperativeHandle, useRef, useId, useEffect } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './AddTableFrom.module.css';\n\nimport { Button, FormField, InputField, Label } from 'components';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\ninterface AddTableFormProps {\n onCloseHandler: () => void;\n onSaveHandler: (nrfOfRows: number, nrOfColumns: number) => void;\n}\n\nexport interface addTableForm {\n clearForm: () => void;\n focusFirstField: () => void;\n}\n\nexport const AddTableForm = forwardRef(({ onCloseHandler, onSaveHandler }: AddTableFormProps, ref) => {\n const t = useTranslation();\n const [rowCount, setRowCount] = useState<number>();\n const [columnCount, setColumnCount] = useState<number>();\n const firstField = useRef<HTMLInputElement>(null);\n const rowId = `row_${useId()}`;\n const columnId = `column_${useId()}`;\n\n const handleDimentionChange = (event: ChangeEvent<HTMLInputElement>, type: string) => {\n const value = event.target.value;\n type === 'row' ? setRowCount(parseInt(value)) : setColumnCount(parseInt(value));\n };\n\n const handleSave = () => {\n if (rowCount !== undefined && columnCount !== undefined) {\n onSaveHandler(rowCount, columnCount);\n resetForm();\n }\n };\n\n const handleClose = () => {\n onCloseHandler();\n resetForm();\n };\n\n const resetForm = () => {\n setRowCount(undefined);\n setColumnCount(undefined);\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: resetForm,\n focusFirstField: () => firstField.current?.focus(),\n }));\n\n useEffect(() => {\n const handleResizeScroll = () => {\n handleClose();\n };\n\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['tableform']}>\n <FormField className={styles['tableform__input-field']}>\n <Label htmlFor={rowId}>{t.table.nrofRows}</Label>\n <InputField\n id={rowId}\n placeholder={t.table.nrofRowsPlaceholder}\n value={rowCount ? rowCount : ''}\n onChange={(event) => handleDimentionChange(event, 'row')}\n aria-label={t.aria.labels.tableRowfield}\n ref={firstField}\n />\n </FormField>\n <FormField className={styles['tableform__input-field']}>\n <Label htmlFor={columnId}>{t.table.nrofColumns}</Label>\n <InputField\n id={columnId}\n placeholder={t.table.nrofColumnsPlaceholder}\n value={columnCount ? columnCount : ''}\n onChange={(event) => handleDimentionChange(event, 'column')}\n aria-label={t.aria.labels.tableColumnfield}\n />\n </FormField>\n <div className={styles['tableform__footer']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel}>\n {t.common.cancel}\n </Button>\n <Button\n variant={'primary'}\n onClick={handleSave}\n disabled={!rowCount || !columnCount}\n aria-label={t.aria.labels.tableOkButton}\n >\n {t.common.add}\n </Button>\n </div>\n </div>\n );\n});\n","import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $getTableCellNodeFromLexicalNode, $isTableCellNode, TableCellNode } from '@lexical/table';\nimport {\n $getSelection,\n $isRangeSelection,\n $getRoot,\n KEY_DOWN_COMMAND,\n COMMAND_PRIORITY_EDITOR,\n $isNodeSelection,\n} from 'lexical';\nimport { $getNearestNodeOfType } from '@lexical/utils';\nimport { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';\n\nimport type { TableNode } from '@lexical/table';\nimport type { JSX } from 'react';\nimport type { TextNode } from 'lexical';\nimport type { addTableForm } from './AddTableFrom';\nimport type { Actions } from './TableCellContextMenu';\n\nimport { AddTableForm } from './AddTableFrom';\nimport {\n createTable,\n DEFAULT_COL_WIDTH,\n DEFAULT_EDITOR_WIDTH,\n deleteColumn,\n deleteRow,\n deleteTable,\n getEditorContentWidth,\n getEditorParrentCellWidth,\n insertColumn,\n insertRow,\n PREVENT_OPEN_DELAY,\n} from './helpers';\n\nimport { $createTableWrapperNode } from 'components/RteEditor/nodes';\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ninterface TablePluginProps {\n isActive: boolean;\n}\nexport interface TableMutation {\n mutateTable: (type: Actions) => void;\n}\n\nexport const TablePlugin = forwardRef(({ isActive }: TablePluginProps, ref): JSX.Element => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n const addTableForm = useRef<addTableForm>(undefined);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const preventOpen = useRef(false);\n const isVisibleRef = useRef(isVisible);\n\n const openFlyout = () => {\n const rect = buttonRef.current?.getBoundingClientRect();\n if (!preventOpen.current && rect) {\n showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n }\n };\n\n const closeFlyout = () => {\n hideFlyout();\n };\n\n const insertTable = (nrOfRows: number, nrOfColumns: number) => {\n editor.update(() => {\n const selection = $getSelection();\n const tableNode = createTable(nrOfRows, nrOfColumns);\n\n const anchorNode =\n ($isRangeSelection(selection) && selection.anchor.getNode()) ||\n ($isNodeSelection(selection) && selection.getNodes()[0]) ||\n null;\n\n const willBeNested = anchorNode ? $getNearestNodeOfType(anchorNode, TableCellNode) : null;\n\n const availibleWidth = willBeNested\n ? getEditorParrentCellWidth(willBeNested, nrOfColumns, editor)\n : getEditorContentWidth(editor) || DEFAULT_EDITOR_WIDTH;\n\n const perCol = Math.max(DEFAULT_COL_WIDTH, Math.floor(availibleWidth / Math.max(1, nrOfColumns)));\n\n const colWidths = Array.from({ length: nrOfColumns }, () => perCol);\n\n (tableNode as TableNode).setColWidths(colWidths);\n\n const tableWrapper = $createTableWrapperNode();\n tableWrapper.append(tableNode);\n if ($isRangeSelection(selection)) {\n selection.insertNodes([tableWrapper]);\n } else {\n $getRoot().append(tableWrapper);\n }\n const firstDescendant = tableWrapper.getFirstDescendant();\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n });\n\n closeFlyout();\n };\n\n const mutateTable = (action: Actions) => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode();\n const currentNode = $getTableCellNodeFromLexicalNode(anchorNode);\n\n if ($isTableCellNode(currentNode)) {\n switch (action) {\n case 'insertRowAbove':\n case 'insertRowBelow':\n insertRow(currentNode, action);\n break;\n case 'deleteRow':\n deleteRow(currentNode);\n break;\n case 'insertColumnLeft':\n case 'insertColumnRight':\n insertColumn(currentNode, action);\n break;\n case 'deleteColumn':\n deleteColumn(currentNode);\n break;\n case 'deleteTable':\n deleteTable(currentNode);\n break;\n }\n }\n }\n });\n };\n\n const flyoutOptions = {\n children: (\n <AddTableForm\n onCloseHandler={closeFlyout}\n onSaveHandler={(rows, columns) => insertTable(rows, columns)}\n ref={addTableForm}\n />\n ),\n };\n\n useEffect(() => {\n if (!isVisible) {\n addTableForm.current?.clearForm();\n setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n } else {\n preventOpen.current = true;\n addTableForm.current?.focusFirstField();\n }\n }, [addTableForm, isVisible]);\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit9') {\n event.preventDefault();\n openFlyout();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n return () => {\n removeKeyboardShortcut();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n isVisibleRef.current = isVisible;\n }, [isVisible]);\n\n useEffect(() => {\n const removeKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isVisibleRef.current) {\n event.preventDefault();\n event.stopPropagation();\n closeFlyout();\n }\n };\n\n document.addEventListener('keydown', removeKeydown, { capture: true });\n\n return () => {\n document.removeEventListener('keydown', removeKeydown);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useImperativeHandle(ref, () => ({\n mutateTable,\n }));\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n <button\n onClick={openFlyout}\n title={t.table.tableTooltip}\n className={clsx(styles['editor__toolbar-button'], isActive && styles[`editor__toolbar-button--active`])}\n aria-label={t.aria.labels.table}\n aria-keyshortcuts={t.aria.keyshortcuts.table}\n ref={buttonRef}\n type=\"button\"\n >\n <Icon name=\"Table\" size={24} />\n </button>\n {flyout}\n </div>\n </div>\n );\n});\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem","AddLinkForm","forwardRef","onCloseHandler","onSaveHandler","isLink","ref","t","useTranslation","url","setUrl","useState","linkText","setLinkText","showLinktextField","setShowLinktextField","urlError","setUrlError","linkTextError","setLinkTextError","firstField","useRef","linkId","useId","textId","handleOpenUrl","ensureHttps","handleUrl","event","handleLinkText","validateUrl","validateUrlWithProtocol","validateLinkText","handleSave","resetForm","handleClose","setDefaults","linktext","focusFirstField","useImperativeHandle","FormField","InputField","Icon","FeedbackBox","AddTableForm","rowCount","setRowCount","columnCount","setColumnCount","rowId","columnId","handleDimentionChange","type","value","useEffect","handleResizeScroll","setScrollableContainers","removeScrollableContainers","TablePlugin","isActive","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addTableForm","buttonRef","preventOpen","isVisibleRef","openFlyout","rect","flyoutOptions","closeFlyout","insertTable","nrOfRows","nrOfColumns","selection","$getSelection","tableNode","createTable","anchorNode","$isRangeSelection","$isNodeSelection","willBeNested","$getNearestNodeOfType","TableCellNode","availibleWidth","getEditorParrentCellWidth","getEditorContentWidth","DEFAULT_EDITOR_WIDTH","perCol","DEFAULT_COL_WIDTH","colWidths","tableWrapper","$createTableWrapperNode","$getRoot","firstDescendant","mutateTable","action","currentNode","$getTableCellNodeFromLexicalNode","$isTableCellNode","insertRow","deleteRow","insertColumn","deleteColumn","deleteTable","rows","columns","PREVENT_OPEN_DELAY","removeKeyboardShortcut","KEY_DOWN_COMMAND","COMMAND_PRIORITY_EDITOR","removeKeydown"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TablePlugin-DaKDRL4G.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx","../src/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.tsx","../src/components/RteEditor/Plugins/TablePlugin/AddTableFrom.tsx","../src/components/RteEditor/Plugins/TablePlugin/TablePlugin.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n label: string;\n clearTrigger?: string;\n onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n return (\n <header className={styles['multi-select__header']}>\n <Label htmlFor=\"multi-select-list\">{label}</Label>\n {clearTrigger && (\n <Button variant={'blank'} onClick={onClear}>\n {clearTrigger}\n </Button>\n )}\n </header>\n );\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\n\nexport interface MultiSelectProps {\n /** `true` if the container should scroll on overflow; otherwise, `false` to resize the container to its contents. The default is `true`. */\n scrollable?: boolean;\n /** `true` to disable the border around the container; otherwise, `false`. The default is `false`. */\n noBorder?: boolean;\n /** The header contents. */\n header?: ReactNode;\n}\n\n/** Represents a component to list a number of checkboxes. */\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n <>\n {header}\n <div\n className={clsx(styles['multi-select'], {\n [styles['multi-select--no-border']]: noBorder,\n })}\n >\n <ul\n className={clsx(styles['multi-select__list'], {\n [styles['multi-select__list--scrollable']]: scrollable,\n })}\n id=\"multi-select-list\"\n >\n {children}\n </ul>\n </div>\n </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n","import { useState, forwardRef, useImperativeHandle, useRef, useId } from 'react';\n\nimport type { ChangeEvent, JSX } from 'react';\nimport type { LinkType } from 'components/RteEditor/Plugins/LinkPlugin';\n\nimport styles from './AddLinkForm.module.css';\n\nimport { ensureHttps, validateUrlWithProtocol } from 'components/RteEditor/Plugins/LinkPlugin/helpers';\nimport { Button, FeedbackBox, FormField, Icon, InputField, Label } from 'components';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ninterface AddLinkFormProps {\n onCloseHandler: () => void;\n onSaveHandler: (url: string, linktext: string) => void;\n isLink: LinkType;\n}\n\nexport interface addLinkFormMethods {\n clearForm: () => void;\n focusFirstField: () => void;\n setDefaults: (url: string, linktext: string) => void;\n}\n\nexport const AddLinkForm = forwardRef(\n (\n { onCloseHandler, onSaveHandler, isLink = { active: false, url: '', linktext: '' } }: AddLinkFormProps,\n ref\n ): JSX.Element => {\n const t = useTranslation();\n const [url, setUrl] = useState<string>(isLink.url || '');\n const [linkText, setLinkText] = useState<string>(isLink.linktext || '');\n const [showLinktextField, setShowLinktextField] = useState<boolean>(false);\n const [urlError, setUrlError] = useState<string | null>(null);\n const [linkTextError, setLinkTextError] = useState<string | null>(null);\n const firstField = useRef<HTMLInputElement>(null);\n const linkId = `link_${useId()}`;\n const textId = `text_${useId()}`;\n\n const handleOpenUrl = () => {\n window.open(ensureHttps(url), '_blank');\n };\n\n const handleUrl = (event: ChangeEvent<HTMLInputElement>) => {\n setUrl(event.target.value);\n };\n\n const handleLinkText = (event: ChangeEvent<HTMLInputElement>) => {\n setLinkText(event.target.value);\n };\n\n const validateUrl = (url: string): boolean => {\n if (validateUrlWithProtocol(url) === false || url.trim() === '') {\n setUrlError(t.errortext.urlNotValid);\n return false;\n }\n setUrlError(null);\n return true;\n };\n\n const validateLinkText = (linkText: string): boolean => {\n if (linkText.trim() === '') {\n setLinkTextError(t.errortext.linkTextNotValid);\n return false;\n }\n setLinkTextError(null);\n return true;\n };\n\n const handleSave = () => {\n if (!validateUrl(url) || (showLinktextField && !validateLinkText(linkText))) {\n return;\n }\n\n onSaveHandler(url, linkText);\n resetForm();\n };\n\n const handleClose = () => {\n onCloseHandler();\n resetForm();\n };\n\n const resetForm = () => {\n setUrl('');\n setShowLinktextField(false);\n setUrlError(null);\n setLinkTextError(null);\n };\n\n const setDefaults = (url: string, linktext: string) => {\n setUrl(url);\n if (!linktext && !url) {\n setShowLinktextField(true);\n }\n };\n\n const focusFirstField = () => {\n if (firstField.current) {\n firstField.current.focus();\n }\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: resetForm,\n focusFirstField,\n setDefaults,\n }));\n\n return (\n <div className={styles['linkform']}>\n <FormField className={styles['linkform__input-field']}>\n <Label htmlFor={linkId}>{t.links.linkLabel}</Label>\n <div className={styles['linkform__input-url-wrapper']}>\n <InputField\n id={linkId}\n placeholder={t.links.linkPlaceholder}\n value={url}\n onChange={(event) => handleUrl(event)}\n onFocus={() => setUrlError(null)}\n ref={firstField}\n aria-label={t.aria.labels.linkField}\n />\n {url && (\n <button type=\"button\" onClick={handleOpenUrl} className={styles['linkform__open-url-button']}>\n <Icon name=\"ArrowTopRightOnSquare\" size={20} />\n </button>\n )}\n </div>\n {urlError && <FeedbackBox level=\"error\" feedback={urlError} />}\n </FormField>\n {showLinktextField && (\n <FormField className={styles['linkform__input-field']}>\n <Label htmlFor={textId}>{t.links.linkText}</Label>\n <InputField\n id={textId}\n value={linkText}\n onChange={(event) => handleLinkText(event)}\n onFocus={() => setLinkTextError(null)}\n aria-label={t.aria.labels.linkTextfield}\n />\n {linkTextError && <FeedbackBox level=\"error\" feedback={linkTextError} />}\n </FormField>\n )}\n <div className={styles['linkform__footer']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\n {t.common.cancel}\n </Button>\n <Button variant={'primary'} onClick={handleSave} aria-label={t.aria.labels.linkOkButton} type=\"button\">\n {t.links.addLink}\n </Button>\n </div>\n </div>\n );\n }\n);\n","import { useState, forwardRef, useImperativeHandle, useRef, useId, useEffect } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './AddTableFrom.module.css';\n\nimport { Button, FormField, InputField, Label } from 'components';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\ninterface AddTableFormProps {\n onCloseHandler: () => void;\n onSaveHandler: (nrfOfRows: number, nrOfColumns: number) => void;\n}\n\nexport interface addTableForm {\n clearForm: () => void;\n focusFirstField: () => void;\n}\n\nexport const AddTableForm = forwardRef(({ onCloseHandler, onSaveHandler }: AddTableFormProps, ref) => {\n const t = useTranslation();\n const [rowCount, setRowCount] = useState<number>();\n const [columnCount, setColumnCount] = useState<number>();\n const firstField = useRef<HTMLInputElement>(null);\n const rowId = `row_${useId()}`;\n const columnId = `column_${useId()}`;\n\n const handleDimentionChange = (event: ChangeEvent<HTMLInputElement>, type: string) => {\n const value = event.target.value;\n type === 'row' ? setRowCount(parseInt(value)) : setColumnCount(parseInt(value));\n };\n\n const handleSave = () => {\n if (rowCount !== undefined && columnCount !== undefined) {\n onSaveHandler(rowCount, columnCount);\n resetForm();\n }\n };\n\n const handleClose = () => {\n onCloseHandler();\n resetForm();\n };\n\n const resetForm = () => {\n setRowCount(undefined);\n setColumnCount(undefined);\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: resetForm,\n focusFirstField: () => firstField.current?.focus(),\n }));\n\n useEffect(() => {\n const handleResizeScroll = () => {\n handleClose();\n };\n\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['tableform']}>\n <FormField className={styles['tableform__input-field']}>\n <Label htmlFor={rowId}>{t.table.nrofRows}</Label>\n <InputField\n id={rowId}\n placeholder={t.table.nrofRowsPlaceholder}\n value={rowCount ? rowCount : ''}\n onChange={(event) => handleDimentionChange(event, 'row')}\n aria-label={t.aria.labels.tableRowfield}\n ref={firstField}\n />\n </FormField>\n <FormField className={styles['tableform__input-field']}>\n <Label htmlFor={columnId}>{t.table.nrofColumns}</Label>\n <InputField\n id={columnId}\n placeholder={t.table.nrofColumnsPlaceholder}\n value={columnCount ? columnCount : ''}\n onChange={(event) => handleDimentionChange(event, 'column')}\n aria-label={t.aria.labels.tableColumnfield}\n />\n </FormField>\n <div className={styles['tableform__footer']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel}>\n {t.common.cancel}\n </Button>\n <Button\n variant={'primary'}\n onClick={handleSave}\n disabled={!rowCount || !columnCount}\n aria-label={t.aria.labels.tableOkButton}\n >\n {t.common.add}\n </Button>\n </div>\n </div>\n );\n});\n","import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $getTableCellNodeFromLexicalNode, $isTableCellNode, TableCellNode } from '@lexical/table';\nimport {\n $getSelection,\n $isRangeSelection,\n $getRoot,\n KEY_DOWN_COMMAND,\n COMMAND_PRIORITY_EDITOR,\n $isNodeSelection,\n} from 'lexical';\nimport { $getNearestNodeOfType } from '@lexical/utils';\nimport { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';\n\nimport type { TableNode } from '@lexical/table';\nimport type { JSX } from 'react';\nimport type { TextNode } from 'lexical';\nimport type { addTableForm } from './AddTableFrom';\nimport type { Actions } from './TableCellContextMenu';\n\nimport { AddTableForm } from './AddTableFrom';\nimport {\n createTable,\n DEFAULT_COL_WIDTH,\n DEFAULT_EDITOR_WIDTH,\n deleteColumn,\n deleteRow,\n deleteTable,\n getEditorContentWidth,\n getEditorParrentCellWidth,\n insertColumn,\n insertRow,\n PREVENT_OPEN_DELAY,\n} from './helpers';\n\nimport { $createTableWrapperNode } from 'components/RteEditor/nodes';\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ninterface TablePluginProps {\n isActive: boolean;\n}\nexport interface TableMutation {\n mutateTable: (type: Actions) => void;\n}\n\nexport const TablePlugin = forwardRef(({ isActive }: TablePluginProps, ref): JSX.Element => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n const addTableForm = useRef<addTableForm>(undefined);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const preventOpen = useRef(false);\n const isVisibleRef = useRef(isVisible);\n\n const openFlyout = () => {\n const rect = buttonRef.current?.getBoundingClientRect();\n if (!preventOpen.current && rect) {\n showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n }\n };\n\n const closeFlyout = () => {\n hideFlyout();\n };\n\n const insertTable = (nrOfRows: number, nrOfColumns: number) => {\n editor.update(() => {\n const selection = $getSelection();\n const tableNode = createTable(nrOfRows, nrOfColumns);\n\n const anchorNode =\n ($isRangeSelection(selection) && selection.anchor.getNode()) ||\n ($isNodeSelection(selection) && selection.getNodes()[0]) ||\n null;\n\n const willBeNested = anchorNode ? $getNearestNodeOfType(anchorNode, TableCellNode) : null;\n\n const availibleWidth = willBeNested\n ? getEditorParrentCellWidth(willBeNested, nrOfColumns, editor)\n : getEditorContentWidth(editor) || DEFAULT_EDITOR_WIDTH;\n\n const perCol = Math.max(DEFAULT_COL_WIDTH, Math.floor(availibleWidth / Math.max(1, nrOfColumns)));\n\n const colWidths = Array.from({ length: nrOfColumns }, () => perCol);\n\n (tableNode as TableNode).setColWidths(colWidths);\n\n const tableWrapper = $createTableWrapperNode();\n tableWrapper.append(tableNode);\n if ($isRangeSelection(selection)) {\n selection.insertNodes([tableWrapper]);\n } else {\n $getRoot().append(tableWrapper);\n }\n const firstDescendant = tableWrapper.getFirstDescendant();\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n });\n\n closeFlyout();\n };\n\n const mutateTable = (action: Actions) => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode();\n const currentNode = $getTableCellNodeFromLexicalNode(anchorNode);\n\n if ($isTableCellNode(currentNode)) {\n switch (action) {\n case 'insertRowAbove':\n case 'insertRowBelow':\n insertRow(currentNode, action);\n break;\n case 'deleteRow':\n deleteRow(currentNode);\n break;\n case 'insertColumnLeft':\n case 'insertColumnRight':\n insertColumn(currentNode, action);\n break;\n case 'deleteColumn':\n deleteColumn(currentNode);\n break;\n case 'deleteTable':\n deleteTable(currentNode);\n break;\n }\n }\n }\n });\n };\n\n const flyoutOptions = {\n children: (\n <AddTableForm\n onCloseHandler={closeFlyout}\n onSaveHandler={(rows, columns) => insertTable(rows, columns)}\n ref={addTableForm}\n />\n ),\n };\n\n useEffect(() => {\n if (!isVisible) {\n addTableForm.current?.clearForm();\n setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n } else {\n preventOpen.current = true;\n addTableForm.current?.focusFirstField();\n }\n }, [addTableForm, isVisible]);\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit9') {\n event.preventDefault();\n openFlyout();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n return () => {\n removeKeyboardShortcut();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n isVisibleRef.current = isVisible;\n }, [isVisible]);\n\n useEffect(() => {\n const removeKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isVisibleRef.current) {\n event.preventDefault();\n event.stopPropagation();\n closeFlyout();\n }\n };\n\n document.addEventListener('keydown', removeKeydown, { capture: true });\n\n return () => {\n document.removeEventListener('keydown', removeKeydown);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useImperativeHandle(ref, () => ({\n mutateTable,\n }));\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n <button\n onClick={openFlyout}\n title={t.table.tableTooltip}\n className={clsx(styles['editor__toolbar-button'], isActive && styles[`editor__toolbar-button--active`])}\n aria-label={t.aria.labels.table}\n aria-keyshortcuts={t.aria.keyshortcuts.table}\n ref={buttonRef}\n type=\"button\"\n >\n <Icon name=\"Table\" size={24} />\n </button>\n {flyout}\n </div>\n </div>\n );\n});\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem","AddLinkForm","forwardRef","onCloseHandler","onSaveHandler","isLink","ref","t","useTranslation","url","setUrl","useState","linkText","setLinkText","showLinktextField","setShowLinktextField","urlError","setUrlError","linkTextError","setLinkTextError","firstField","useRef","linkId","useId","textId","handleOpenUrl","ensureHttps","handleUrl","event","handleLinkText","validateUrl","validateUrlWithProtocol","validateLinkText","handleSave","resetForm","handleClose","setDefaults","linktext","focusFirstField","useImperativeHandle","FormField","InputField","Icon","FeedbackBox","AddTableForm","rowCount","setRowCount","columnCount","setColumnCount","rowId","columnId","handleDimentionChange","type","value","useEffect","handleResizeScroll","setScrollableContainers","removeScrollableContainers","TablePlugin","isActive","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addTableForm","buttonRef","preventOpen","isVisibleRef","openFlyout","rect","flyoutOptions","closeFlyout","insertTable","nrOfRows","nrOfColumns","selection","$getSelection","tableNode","createTable","anchorNode","$isRangeSelection","$isNodeSelection","willBeNested","$getNearestNodeOfType","TableCellNode","availibleWidth","getEditorParrentCellWidth","getEditorContentWidth","DEFAULT_EDITOR_WIDTH","perCol","DEFAULT_COL_WIDTH","colWidths","tableWrapper","$createTableWrapperNode","$getRoot","firstDescendant","mutateTable","action","currentNode","$getTableCellNodeFromLexicalNode","$isTableCellNode","insertRow","deleteRow","insertColumn","deleteColumn","deleteTable","rows","columns","PREVENT_OPEN_DELAY","removeKeyboardShortcut","KEY_DOWN_COMMAND","COMMAND_PRIORITY_EDITOR","removeKeydown"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._checkbox-button-
|
|
1
|
+
._checkbox-button-bar__container_u8hmc_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_u8hmc_6{align-items:baseline;flex-direction:row;gap:1rem}._checkbox-button-bar__container--label-top_u8hmc_12{align-items:flex-start;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container_u8hmc_18{display:flex;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container--segmented_u8hmc_24{flex-direction:row}._checkbox-button-bar__row_u8hmc_18{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem}._checkbox-button-bar__row--not-validated_u8hmc_39{border-color:var(--new-color-red-600)}._checkbox-button-bar__footer_u8hmc_43{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._editor__container_1hmqh_1{background-color:var(--new-color-uva-white);display:flex;flex-direction:column}._editor__header_1hmqh_7{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem;min-height:1.5rem}._editor__header-word-count_1hmqh_15{align-self:flex-end;font-size:.875rem;margin-left:.5rem;text-align:right;white-space:nowrap;width:4.5rem}._editor__header-word-count--alert_1hmqh_24{color:var(--new-color-red-600);font-weight:700}._editor_1hmqh_1{border:1px solid var(--new-color-grey-600);border-radius:4px;margin-bottom:.5rem;padding:.25rem}._editor_1hmqh_1:has(._editor__field_1hmqh_36:focus-visible){outline:1px solid var(--new-color-navy-600)}._editor__toolbar_1hmqh_40{align-items:center;display:flex;gap:.25rem;justify-content:flex-start;margin-bottom:.25rem;padding:.25rem}._editor__toolbar-button-group_1hmqh_49{align-items:center;display:flex;gap:.125rem;justify-content:center}._editor__toolbar-button_1hmqh_49{align-items:center;background-color:var(--new-color-uva-white);border:none;border-radius:.25rem;cursor:pointer;display:flex;font-size:1.1rem;height:2rem;justify-content:center;width:2rem}._editor__toolbar-button_1hmqh_49:hover{background-color:var(--new-color-grey-400);border:1px solid var(--new-color-grey-700)}._editor__toolbar-button_1hmqh_49:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem;z-index:1}._editor__toolbar-button--active_1hmqh_80,._editor__toolbar-button_1hmqh_49:active{background-color:var(--new-color-uva-black);border-color:var(--new-color-uva-black);color:var(--new-color-uva-white)}._editor__toolbar-button_1hmqh_49:disabled{border-color:var(--new-color-grey-300);color:var(--new-color-grey-400);cursor:not-allowed}._editor__toolbar-button_1hmqh_49:hover:disabled{background-color:var(--new-color-grey-300);border-color:var(--new-color-grey-300);color:var(--new-color-grey-500);cursor:not-allowed}._editor__toolbar-button--bold_1hmqh_100{font-weight:700}._editor__toolbar-button--italic_1hmqh_104{font-style:italic}._editor__toolbar-button_1hmqh_49:active:hover{color:var(--new-color-uva-white)}._editor__toolbar-button--active_1hmqh_80:hover{color:var(--new-color-uva-black)}._editor__toolbar-button--active_1hmqh_80:disabled{background-color:var(--new-color-grey-300);border-color:var(--new-color-grey-300);color:var(--new-color-grey-500);cursor:not-allowed}._editor__toolbar-button-flyoutwrapper_1hmqh_123,._editor__field-wrapper_1hmqh_127{position:relative}._editor__field-wrapper_1hmqh_127:before{border-top:1px solid var(--new-color-grey-600);content:"";display:block;height:0;margin-left:-.25rem;margin-top:-.3rem;width:calc(100% + .5rem)}._editor__field_1hmqh_36{background-color:var(--new-color-uva-white);margin-top:.5rem;min-height:8rem;overflow-x:hidden;padding:0 .5rem .5rem;position:relative}._editor__field_1hmqh_36::-webkit-scrollbar{cursor:default;width:12px}._editor__field_1hmqh_36::-webkit-scrollbar-track{background:var(--new-color-uva-white)}._editor__field_1hmqh_36::-webkit-scrollbar-thumb{background-color:var(--new-color-grey-500);border:3px solid var(--new-color-uva-white);border-radius:20px;cursor:default}._editor__field_1hmqh_36:focus-visible{outline:none}._editor__placeholder_1hmqh_170{color:var(--new-color-grey-500);left:.45rem;pointer-events:none;position:absolute;top:.55rem}._guide-text-ltr_1hmqh_180{text-align:left}._guide-text-rtl_1hmqh_184{text-align:right}._guide-text-paragraph_1hmqh_188{margin:0;position:relative}._guide-text__text--bold_1hmqh_193{font-weight:700}._guide-text__text--italic_1hmqh_197{font-style:italic}._guide-text__list--ul_1hmqh_201,._guide-text__list--ol_1hmqh_202{list-style-position:inside;margin:0 0 0 -.25rem;padding:.25rem}._guide-text__list--ol_1hmqh_202{list-style-position:outside;list-style-type:decimal;margin:0 0 0 .25rem}._guide-text__list--ul_1hmqh_201 ._guide-text__list--listitem_1hmqh_214{margin:0}._guide-text__list--ol_1hmqh_202 ._guide-text__list--listitem_1hmqh_214{margin-left:.35rem;padding-left:.55rem}._guide-text__list--ol_1hmqh_202 ._guide-text__list--nested-listitem_1hmqh_223,._guide-text__list--ul_1hmqh_201 ._guide-text__list--nested-listitem_1hmqh_223{list-style-type:none;margin-left:1.5rem}._guide-text__list--ol_1hmqh_202 ._guide-text__list--nested-listitem_1hmqh_223{margin-left:1rem}._guide-text__list--ul2_1hmqh_233 ._guide-text__list--listitem_1hmqh_214{list-style-type:circle}._guide-text__list--ul3_1hmqh_237 ._guide-text__list--listitem_1hmqh_214{list-style-type:square}._guide-text__list--ul4_1hmqh_241 ._guide-text__list--listitem_1hmqh_214{list-style-type:disc}._guide-text__list--ul5_1hmqh_245 ._guide-text__list--listitem_1hmqh_214{list-style-type:circle}ul ._guide-text__list--nested-listitem_1hmqh_223 ol{list-style-position:outside;list-style-type:decimal;margin-left:0;padding:.25rem .25rem .25rem .55rem}ul ._guide-text__list--nested-listitem_1hmqh_223 ol ._guide-text__list--listitem_1hmqh_214{list-style-type:decimal;margin-left:.35rem;padding-left:.55rem}ol ._guide-text__list--nested-listitem_1hmqh_223 ul ._guide-text__list--listitem_1hmqh_214{list-style-type:disc;margin-left:.35rem;padding-left:.55rem}ul ._guide-text__list--nested-listitem_1hmqh_223{list-style-type:none!important}ol ._guide-text__list--nested-listitem_1hmqh_223 ul{margin-left:-1.5rem;padding-left:.55rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._select-listbox-
|
|
1
|
+
._select-listbox-container_xfwty_1{position:relative}._select-listbox__wrapper_xfwty_5{border-radius:.25rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_xfwty_15{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.25rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_xfwty_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_xfwty_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_xfwty_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_xfwty_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_xfwty_52{right:0}._select-listbox-trigger--bold_xfwty_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_xfwty_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_xfwty_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_xfwty_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_xfwty_75{border-color:var(--new-color-uva-black)}._select-listbox-trigger--roundedLeft_xfwty_79{border-radius:.25rem 0 0 .25rem}._select-listbox-trigger--roundedRight_xfwty_83{border-radius:0 .25rem .25rem 0}._select-listbox-trigger_xfwty_15:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._select-listbox-trigger_xfwty_15:focus-visible,._select-listbox-trigger_xfwty_15:hover{background-color:var(--new-color-grey-300)}._select-listbox-trigger--noborder_xfwty_97{border:none}._select-listbox-trigger--pillLeft_xfwty_65+._select-listbox__wrapper_xfwty_5{left:1rem}._select-listbox-trigger--pillRight_xfwty_70+._select-listbox__wrapper--align-right_xfwty_52{right:1rem}._select-listbox-trigger-icon_xfwty_109{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_xfwty_114{transform:rotate(180deg)}._select-listbox_xfwty_1{background-color:var(--new-color-uva-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_xfwty_128{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_xfwty_141,._select-listbox-option_xfwty_128:hover{background-color:var(--new-color-grey-300);box-shadow:0 0 0 1px var(--new-color-uva-white)}._select-listbox-option_xfwty_128[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_xfwty_151{background-color:var(--new-color-grey-400);height:1px;margin:1px -.25rem}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as t, jsxs as a, Fragment as s } from "react/jsx-runtime";
|
|
2
|
-
import { l } from "../../index-
|
|
2
|
+
import { l } from "../../index-DvUwfXNb.js";
|
|
3
3
|
import { Button as n } from "./Button.js";
|
|
4
4
|
const c = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
|
|
5
5
|
title: "Atoms/Buttons/Button",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
|
|
2
|
-
import { l as s } from "../../index-
|
|
2
|
+
import { l as s } from "../../index-DvUwfXNb.js";
|
|
3
3
|
import { BrowserRouter as c } from "react-router";
|
|
4
4
|
import { LinkButton as e } from "./LinkButton.js";
|
|
5
5
|
const d = `
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as e, jsxs as l, Fragment as s } from "react/jsx-runtime";
|
|
2
|
-
import { l as c } from "../../index-
|
|
2
|
+
import { l as c } from "../../index-DvUwfXNb.js";
|
|
3
3
|
import { MenuButton as n } from "./MenuButton.js";
|
|
4
4
|
const d = `
|
|
5
5
|
// Has all LabelHTMLAttributes props available except "className" and "style"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as g, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { l as e } from "../../index-
|
|
2
|
+
import { l as e } from "../../index-DvUwfXNb.js";
|
|
3
3
|
import { Checkbox as n } from "./Checkbox.js";
|
|
4
4
|
import { FormField as t } from "../FormField/FormField.js";
|
|
5
5
|
import { Label as i } from "../Label/Label.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
type CheckboxProps = {
|
|
3
|
-
label: string;
|
|
3
|
+
label: string | ReactNode;
|
|
4
4
|
value: string;
|
|
5
5
|
prefix?: string;
|
|
6
6
|
tooltip?: ReactNode;
|
|
@@ -26,7 +26,9 @@ export interface CheckboxButtonBarProps {
|
|
|
26
26
|
footerText?: string;
|
|
27
27
|
/** disables all checkboxes in the bar */
|
|
28
28
|
disableGroup?: boolean;
|
|
29
|
+
/** `true` to sepearte each button in their own bordered container */
|
|
30
|
+
segmented?: boolean;
|
|
29
31
|
onSetValues: (value: string[]) => void;
|
|
30
32
|
}
|
|
31
|
-
export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidated, notValidatedText, actAsRadioButtonBar, footerText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidated, notValidatedText, actAsRadioButtonBar, footerText, disableGroup, segmented, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
32
34
|
export {};
|
|
@@ -1,78 +1,109 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { c as
|
|
4
|
-
import { Label as
|
|
5
|
-
import { FeedbackBox as
|
|
6
|
-
import { ControlsButton as
|
|
7
|
-
import '../../assets/CheckboxButtonBar.css';const
|
|
8
|
-
"checkbox-button-bar__container": "_checkbox-button-
|
|
9
|
-
"checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-
|
|
10
|
-
"checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-
|
|
11
|
-
"checkbox-button-bar__row-container": "_checkbox-button-bar__row-
|
|
12
|
-
"checkbox-button-bar__row": "_checkbox-button-
|
|
13
|
-
"checkbox-button-bar__row
|
|
14
|
-
"checkbox-button-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
1
|
+
import { jsxs as y, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { useState as j } from "react";
|
|
3
|
+
import { c as _ } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { Label as q } from "../Label/Label.js";
|
|
5
|
+
import { FeedbackBox as F } from "../FeedbackBox/FeedbackBox.js";
|
|
6
|
+
import { ControlsButton as N } from "../ControlsButton/ControlsButton.js";
|
|
7
|
+
import '../../assets/CheckboxButtonBar.css';const c = {
|
|
8
|
+
"checkbox-button-bar__container": "_checkbox-button-bar__container_u8hmc_1",
|
|
9
|
+
"checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_u8hmc_6",
|
|
10
|
+
"checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_u8hmc_12",
|
|
11
|
+
"checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_u8hmc_18",
|
|
12
|
+
"checkbox-button-bar__row-container--segmented": "_checkbox-button-bar__row-container--segmented_u8hmc_24",
|
|
13
|
+
"checkbox-button-bar__row": "_checkbox-button-bar__row_u8hmc_18",
|
|
14
|
+
"checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_u8hmc_39",
|
|
15
|
+
"checkbox-button-bar__footer": "_checkbox-button-bar__footer_u8hmc_43"
|
|
16
|
+
}, H = ({
|
|
17
|
+
checkboxes: k,
|
|
18
|
+
defaultValues: b,
|
|
19
|
+
label: m,
|
|
20
|
+
labelPosition: S = "top",
|
|
21
|
+
required: C = !1,
|
|
22
|
+
notValidated: x = !1,
|
|
23
|
+
notValidatedText: n = "",
|
|
24
|
+
actAsRadioButtonBar: a = !1,
|
|
25
|
+
footerText: d = "",
|
|
26
|
+
disableGroup: f = !1,
|
|
27
|
+
segmented: p = !1,
|
|
28
|
+
onSetValues: w
|
|
27
29
|
}) => {
|
|
28
|
-
const [h,
|
|
29
|
-
|
|
30
|
-
),
|
|
30
|
+
const [h, g] = j(
|
|
31
|
+
b && !a ? b.map(String) : b && a ? b.slice(0, 1) : []
|
|
32
|
+
), v = (e) => {
|
|
31
33
|
let o = h;
|
|
32
|
-
|
|
34
|
+
a ? (g([e]), w([e])) : (o.includes(e) ? o = o.filter((r) => r !== e) : o = [...o, e], g(o), w(o));
|
|
33
35
|
};
|
|
34
|
-
return /* @__PURE__ */
|
|
36
|
+
return /* @__PURE__ */ y(
|
|
35
37
|
"div",
|
|
36
38
|
{
|
|
37
|
-
className:
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
className: _(
|
|
40
|
+
c["checkbox-button-bar__container"],
|
|
41
|
+
c[`checkbox-button-bar__container--label-${S}`]
|
|
40
42
|
),
|
|
41
43
|
children: [
|
|
42
|
-
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
{
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
{
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
44
|
+
m && /* @__PURE__ */ t(q, { htmlFor: "", required: C, children: m }),
|
|
45
|
+
/* @__PURE__ */ t(
|
|
46
|
+
"div",
|
|
47
|
+
{
|
|
48
|
+
className: _(c["checkbox-button-bar__row-container"], {
|
|
49
|
+
[c["checkbox-button-bar__row-container--segmented"]]: p
|
|
50
|
+
}),
|
|
51
|
+
children: p ? k.map(({ label: e, value: o, prefix: r, tooltip: l, tooltipPosition: i, disabled: u }) => /* @__PURE__ */ t(
|
|
52
|
+
"div",
|
|
53
|
+
{
|
|
54
|
+
className: _(c["checkbox-button-bar__row"], {
|
|
55
|
+
[c["checkbox-button-bar__row--not-validated"]]: x || n
|
|
56
|
+
}),
|
|
57
|
+
children: /* @__PURE__ */ t(
|
|
58
|
+
N,
|
|
59
|
+
{
|
|
60
|
+
type: "checkbox",
|
|
61
|
+
label: e,
|
|
62
|
+
prefix: r,
|
|
63
|
+
tooltip: l,
|
|
64
|
+
tooltipPosition: i,
|
|
65
|
+
forceSquared: !0,
|
|
66
|
+
value: o,
|
|
67
|
+
checked: h.includes(o),
|
|
68
|
+
disabled: u || f,
|
|
69
|
+
onSetValue: (s) => v(s.target.value)
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
},
|
|
73
|
+
o
|
|
74
|
+
)) : /* @__PURE__ */ t(
|
|
75
|
+
"div",
|
|
76
|
+
{
|
|
77
|
+
className: _(c["checkbox-button-bar__row"], {
|
|
78
|
+
[c["checkbox-button-bar__row--not-validated"]]: x || n
|
|
79
|
+
}),
|
|
80
|
+
children: k.map(({ label: e, value: o, prefix: r, tooltip: l, tooltipPosition: i, disabled: u }) => /* @__PURE__ */ t(
|
|
81
|
+
N,
|
|
82
|
+
{
|
|
83
|
+
type: "checkbox",
|
|
84
|
+
label: e,
|
|
85
|
+
prefix: r,
|
|
86
|
+
tooltip: l,
|
|
87
|
+
tooltipPosition: i,
|
|
88
|
+
forceSquared: !0,
|
|
89
|
+
value: o,
|
|
90
|
+
checked: h.includes(o),
|
|
91
|
+
disabled: u || f,
|
|
92
|
+
onSetValue: (s) => v(s.target.value)
|
|
93
|
+
},
|
|
94
|
+
o
|
|
95
|
+
))
|
|
96
|
+
}
|
|
97
|
+
)
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
d && /* @__PURE__ */ t("div", { className: c["checkbox-button-bar__footer"], children: d }),
|
|
101
|
+
n !== "" && /* @__PURE__ */ t(F, { level: "error", feedback: n })
|
|
71
102
|
]
|
|
72
103
|
}
|
|
73
104
|
);
|
|
74
105
|
};
|
|
75
106
|
export {
|
|
76
|
-
|
|
107
|
+
H as CheckboxButtonBar
|
|
77
108
|
};
|
|
78
109
|
//# sourceMappingURL=CheckboxButtonBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n prefix?: string;\n tooltip?: ReactNode;\n tooltipPosition?: 'left' | 'center' | 'right';\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value, prefix and disabled*/\n checkboxes: CheckboxProps[];\n //** array with value(s) */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\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 missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** returns an array with only one value */\n actAsRadioButtonBar?: boolean;\n /** optional footer text */\n footerText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(\n defaultValues && !actAsRadioButtonBar\n ? defaultValues.map(String)\n : defaultValues && actAsRadioButtonBar\n ? defaultValues.slice(0, 1)\n : []\n );\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (actAsRadioButtonBar) {\n setCurrentValues([value]);\n onSetValues([value]);\n } else {\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n }\n };\n\n return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div
|
|
1
|
+
{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string | ReactNode;\n value: string;\n prefix?: string;\n tooltip?: ReactNode;\n tooltipPosition?: 'left' | 'center' | 'right';\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value, prefix and disabled*/\n checkboxes: CheckboxProps[];\n //** array with value(s) */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\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 missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** returns an array with only one value */\n actAsRadioButtonBar?: boolean;\n /** optional footer text */\n footerText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n /** `true` to sepearte each button in their own bordered container */\n segmented?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n segmented = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(\n defaultValues && !actAsRadioButtonBar\n ? defaultValues.map(String)\n : defaultValues && actAsRadioButtonBar\n ? defaultValues.slice(0, 1)\n : []\n );\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (actAsRadioButtonBar) {\n setCurrentValues([value]);\n onSetValues([value]);\n } else {\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n }\n };\n\n return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n\n <div\n className={clsx(styles['checkbox-button-bar__row-container'], {\n [styles['checkbox-button-bar__row-container--segmented']]: segmented,\n })}\n >\n {segmented ? (\n checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n <div\n key={value}\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n <ControlsButton\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n tooltip={tooltip}\n tooltipPosition={tooltipPosition}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n </div>\n ))\n ) : (\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n <ControlsButton\n key={value}\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n tooltip={tooltip}\n tooltipPosition={tooltipPosition}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n )}\n </div>\n\n {footerText && <div className={styles['checkbox-button-bar__footer']}>{footerText}</div>}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","segmented","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","tooltip","tooltipPosition","disabled","ControlsButton","event","FeedbackBox"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import { CheckboxButtonBarProps } from './CheckboxButtonBar';
|
|
|
3
3
|
declare const _default: Meta<CheckboxButtonBarProps>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const CheckboxButtonBarExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const
|
|
8
|
-
export declare const
|
|
6
|
+
export declare const AsRadioButtonBar: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
|
|
7
|
+
export declare const WithPrefix: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
|
|
8
|
+
export declare const WithTooltip: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
|
|
9
|
+
export declare const Segmented: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
|