@uva-glass/component-library 2.7.1 → 3.0.1
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/{SelectListbox.module-DX1IVM9E.js → SelectListbox.module-BD2qbcmZ.js} +21 -21
- package/dist/SelectListbox.module-BD2qbcmZ.js.map +1 -0
- package/dist/{TablePlugin-C_QKVXSo.js → TablePlugin-CPEwD-wi.js} +2 -2
- package/dist/TablePlugin-CPEwD-wi.js.map +1 -0
- package/dist/assets/SelectListbox.css +1 -1
- package/dist/components/ActionList/ActionList.js +15 -5
- package/dist/components/ActionList/ActionList.js.map +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/CheckboxButton/CheckboxButton.stories.js +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +10 -10
- package/dist/components/Chip/Chip.stories.js +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/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
- package/dist/components/OverlayStepBar/OverlayStepBar.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 +2 -2
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js +1 -1
- package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.d.ts +1 -0
- package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +1 -1
- 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/LinkPlugin/LinkPlugin.js.map +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/index.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.d.ts +1 -0
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/index.js +1 -1
- package/dist/components/RteEditor/RteEditor.js +114 -115
- package/dist/components/RteEditor/RteEditor.js.map +1 -1
- package/dist/components/RteEditor/hooks/components/Flyout.js.map +1 -1
- package/dist/components/RteEditor/hooks/useFlyout.js.map +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js +1 -1
- package/dist/components/SelectListbox/SelectListbox.d.ts +2 -1
- package/dist/components/SelectListbox/SelectListbox.js +36 -39
- package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js +1 -1
- package/dist/components/SelectListbox/components/SelectContainer.js +1 -1
- package/dist/components/SelectListbox/components/SelectOption.d.ts +1 -1
- package/dist/components/SelectListbox/components/SelectOption.js +1 -1
- package/dist/components/SelectListbox/components/SelectOption.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectOptionBox.js +1 -1
- package/dist/components/Sortable/Sortable.stories.js +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.js +1 -1
- package/dist/components/hooks/useDebounce.js +5 -5
- package/dist/components/hooks/useDebounce.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/index-Sh2oo6_C.js +23304 -0
- package/dist/index-Sh2oo6_C.js.map +1 -0
- package/dist/index.js +1 -1
- package/dist/{react-18-CT6mjea2.js → react-18-C9Y1Flwa.js} +23 -23
- package/dist/{react-18-CT6mjea2.js.map → react-18-C9Y1Flwa.js.map} +1 -1
- package/dist/storybook__react.d.js +604 -562
- package/dist/storybook__react.d.js.map +1 -1
- package/package.json +29 -33
- package/dist/SelectListbox.module-DX1IVM9E.js.map +0 -1
- package/dist/TablePlugin-C_QKVXSo.js.map +0 -1
- package/dist/index-BpZ8v2ye.js +0 -19125
- package/dist/index-BpZ8v2ye.js.map +0 -1
- package/dist/index-CHX1d9_A.js +0 -21922
- package/dist/index-CHX1d9_A.js.map +0 -1
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
import './assets/SelectListbox.css';const e = {
|
|
2
|
-
"select-listbox-container": "_select-listbox-
|
|
3
|
-
"select-listbox__wrapper": "_select-
|
|
4
|
-
"select-listbox-trigger": "_select-listbox-
|
|
5
|
-
"select-listbox-trigger--default": "_select-listbox-trigger--
|
|
6
|
-
"select-listbox-trigger--small": "_select-listbox-trigger--
|
|
7
|
-
"select-listbox-trigger--medium": "_select-listbox-trigger--
|
|
8
|
-
"select-listbox-trigger-label": "_select-listbox-trigger-
|
|
9
|
-
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-
|
|
10
|
-
"select-listbox-trigger--bold": "_select-listbox-trigger--
|
|
11
|
-
"select-listbox-trigger--pill": "_select-listbox-trigger--
|
|
12
|
-
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--
|
|
13
|
-
"select-listbox-trigger--pillRight": "_select-listbox-trigger--
|
|
14
|
-
"select-listbox-trigger--darkBorder": "_select-listbox-trigger--
|
|
15
|
-
"select-listbox-trigger--noborder": "_select-listbox-trigger--
|
|
16
|
-
"select-listbox-trigger-icon": "_select-listbox-trigger-
|
|
17
|
-
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--
|
|
18
|
-
"select-listbox": "_select-
|
|
19
|
-
"select-listbox-option": "_select-listbox-
|
|
20
|
-
"select-listbox-option--active": "_select-listbox-option--
|
|
21
|
-
"select-listbox-divider": "_select-listbox-
|
|
2
|
+
"select-listbox-container": "_select-listbox-container_j9bke_1",
|
|
3
|
+
"select-listbox__wrapper": "_select-listbox__wrapper_j9bke_5",
|
|
4
|
+
"select-listbox-trigger": "_select-listbox-trigger_j9bke_15",
|
|
5
|
+
"select-listbox-trigger--default": "_select-listbox-trigger--default_j9bke_30",
|
|
6
|
+
"select-listbox-trigger--small": "_select-listbox-trigger--small_j9bke_34",
|
|
7
|
+
"select-listbox-trigger--medium": "_select-listbox-trigger--medium_j9bke_38",
|
|
8
|
+
"select-listbox-trigger-label": "_select-listbox-trigger-label_j9bke_43",
|
|
9
|
+
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_j9bke_52",
|
|
10
|
+
"select-listbox-trigger--bold": "_select-listbox-trigger--bold_j9bke_56",
|
|
11
|
+
"select-listbox-trigger--pill": "_select-listbox-trigger--pill_j9bke_60",
|
|
12
|
+
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_j9bke_65",
|
|
13
|
+
"select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_j9bke_70",
|
|
14
|
+
"select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_j9bke_75",
|
|
15
|
+
"select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_j9bke_89",
|
|
16
|
+
"select-listbox-trigger-icon": "_select-listbox-trigger-icon_j9bke_101",
|
|
17
|
+
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_j9bke_106",
|
|
18
|
+
"select-listbox": "_select-listbox_j9bke_1",
|
|
19
|
+
"select-listbox-option": "_select-listbox-option_j9bke_120",
|
|
20
|
+
"select-listbox-option--active": "_select-listbox-option--active_j9bke_133",
|
|
21
|
+
"select-listbox-divider": "_select-listbox-divider_j9bke_143"
|
|
22
22
|
};
|
|
23
23
|
export {
|
|
24
24
|
e as s
|
|
25
25
|
};
|
|
26
|
-
//# sourceMappingURL=SelectListbox.module-
|
|
26
|
+
//# sourceMappingURL=SelectListbox.module-BD2qbcmZ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectListbox.module-BD2qbcmZ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -206,7 +206,7 @@ const ve = "_linkform_x5q7m_1", we = "_linkform__footer_x5q7m_12", N = {
|
|
|
206
206
|
] })
|
|
207
207
|
] });
|
|
208
208
|
}), xe = 200, mt = $(({ isActive: _ }, d) => {
|
|
209
|
-
const a = B(), [l] = ee(), { flyout: n, showFlyout: f, hideFlyout: u, isVisible: s } = _e(), b = T(), w = T(null), h = T(!1), F = T(s), k = () => {
|
|
209
|
+
const a = B(), [l] = ee(), { flyout: n, showFlyout: f, hideFlyout: u, isVisible: s } = _e(), b = T(void 0), w = T(null), h = T(!1), F = T(s), k = () => {
|
|
210
210
|
var o;
|
|
211
211
|
const e = (o = w.current) == null ? void 0 : o.getBoundingClientRect();
|
|
212
212
|
!h.current && e && f({ position: { top: e.bottom, left: e.left }, ...y });
|
|
@@ -303,4 +303,4 @@ export {
|
|
|
303
303
|
ke as a,
|
|
304
304
|
ye as b
|
|
305
305
|
};
|
|
306
|
-
//# sourceMappingURL=TablePlugin-
|
|
306
|
+
//# sourceMappingURL=TablePlugin-CPEwD-wi.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TablePlugin-CPEwD-wi.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 } from '@lexical/table';\nimport { $getSelection, $isRangeSelection, $getRoot, KEY_DOWN_COMMAND, COMMAND_PRIORITY_EDITOR } from 'lexical';\nimport { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';\n\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 { createTable, deleteColumn, deleteRow, deleteTable, insertColumn, insertRow } from './helpers';\n\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\nconst PREVENT_OPEN_DELAY = 200;\n\ninterface TablePluginProps {\n isActive: boolean;\n}\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 if ($isRangeSelection(selection)) {\n selection.insertNodes([tableNode]);\n } else {\n $getRoot().append(tableNode);\n }\n const firstDescendant = tableNode.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","_a","useEffect","handleResizeScroll","setScrollableContainers","removeScrollableContainers","PREVENT_OPEN_DELAY","TablePlugin","isActive","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addTableForm","buttonRef","preventOpen","isVisibleRef","openFlyout","rect","flyoutOptions","closeFlyout","insertTable","nrOfRows","nrOfColumns","selection","$getSelection","tableNode","createTable","$isRangeSelection","$getRoot","firstDescendant","mutateTable","action","anchorNode","currentNode","$getTableCellNodeFromLexicalNode","$isTableCellNode","insertRow","deleteRow","insertColumn","deleteColumn","deleteTable","rows","columns","_b","removeKeyboardShortcut","KEY_DOWN_COMMAND","COMMAND_PRIORITY_EDITOR","removeKeydown"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._select-listbox-
|
|
1
|
+
._select-listbox-container_j9bke_1{position:relative}._select-listbox__wrapper_j9bke_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_j9bke_15{align-items:center;background-color:var(--color-white);border:1px solid var(--color-silver);border-radius:.5rem;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_j9bke_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_j9bke_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_j9bke_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_j9bke_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_j9bke_52{right:0}._select-listbox-trigger--bold_j9bke_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_j9bke_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_j9bke_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_j9bke_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_j9bke_75{border-color:var(--color-dark)}._select-listbox-trigger_j9bke_15:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._select-listbox-trigger_j9bke_15:focus-visible,._select-listbox-trigger_j9bke_15:hover{background-color:var(--color-lavender)}._select-listbox-trigger--noborder_j9bke_89{border:none}._select-listbox-trigger--pillLeft_j9bke_65+._select-listbox__wrapper_j9bke_5{left:1rem}._select-listbox-trigger--pillRight_j9bke_70+._select-listbox__wrapper--align-right_j9bke_52{right:1rem}._select-listbox-trigger-icon_j9bke_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_j9bke_106{transform:rotate(180deg)}._select-listbox_j9bke_1{background-color:var(--color-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_j9bke_120{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_j9bke_133,._select-listbox-option_j9bke_120:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._select-listbox-option_j9bke_120[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_j9bke_143{background-color:var(--color-grey-200);height:1px;margin:1px -.25rem}
|
|
@@ -43,11 +43,21 @@ function B({ label: h, prefixIcon: E, iconName: C, variant: L = "secondary", chi
|
|
|
43
43
|
});
|
|
44
44
|
});
|
|
45
45
|
}, [u]), /* @__PURE__ */ k("div", { className: p["action-list-container"], ref: r, children: [
|
|
46
|
-
/* @__PURE__ */ k(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
/* @__PURE__ */ k(
|
|
47
|
+
$,
|
|
48
|
+
{
|
|
49
|
+
onClick: x,
|
|
50
|
+
onKeyDown: y,
|
|
51
|
+
onKeyUp: A,
|
|
52
|
+
buttonRef: _,
|
|
53
|
+
variant: L,
|
|
54
|
+
children: [
|
|
55
|
+
E && /* @__PURE__ */ c(m, { size: 24, name: E }),
|
|
56
|
+
h,
|
|
57
|
+
C ? /* @__PURE__ */ c(m, { size: 24, name: C }) : /* @__PURE__ */ c(m, { size: 16, name: a ? "CheveronUp" : "CheveronDown" })
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
),
|
|
51
61
|
/* @__PURE__ */ c(
|
|
52
62
|
"div",
|
|
53
63
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionList.js","sources":["../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Children, useEffect, useId, useRef, useState } from 'react';\n\nimport type { KeyboardEvent, MouseEvent as ReactMouseEvent, ReactElement } from 'react';\nimport type { IconProps } from 'components/Icon';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './ActionList.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { MenuButton } from 'components/Buttons';\n\nexport interface ActionListProps {\n /** The label that is displayed before the icon. */\n label: string;\n /** The icon that is shown in front of the label. */\n prefixIcon?: IconProps['name'];\n /** The icon that is shown to toggle the menu. If none is specified, CheveronUp and CheveronDown is used depending on whether the menu is opened or closed. */\n iconName?: IconProps['name'];\n /** Determines the button variant. */\n variant?: UIButtonVariant;\n /** The child component(s). */\n children: ReactElement | ReactElement[];\n}\n\nconst inactiveIndex = -1;\nconst indexIncrement = 1;\n\n/** A component to show an action list to toggle a menu. */\nexport function ActionList({ label, prefixIcon, iconName, variant = 'secondary', children }: ActionListProps) {\n const listId = useId();\n const triggerRef = useRef<HTMLButtonElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const numberOfChildren = Children.count(children);\n\n const [activeIndex, setActiveIndex] = useState(inactiveIndex);\n const [isOpen, setIsOpen] = useState(false);\n\n function open() {\n setIsOpen(true);\n\n document.addEventListener('click', onClickOutside, { once: true, capture: true });\n }\n\n function close(event?: ReactMouseEvent<HTMLDivElement>) {\n // When a click occurs on an element that is not an immediate descendant of the action list container\n // (can happen when a modal window is triggered from a button in the action list), the setIsOpen state\n // handler should not be called, because this causes a re-render of the entire component and can lead\n // to undesired effects, like a select element closing immediately after it has been clicked.\n if (event && containerRef.current && !containerRef.current.contains(event.target as Node)) {\n return;\n }\n\n setActiveIndex(inactiveIndex);\n setIsOpen(false);\n\n document.removeEventListener('click', onClickOutside, { capture: true });\n }\n\n function toggle() {\n if (isOpen) close();\n else open();\n }\n\n function onKeyDown(event: KeyboardEvent) {\n if (!isOpen) return;\n\n const eventPreventCodes = ['ArrowUp', 'ArrowDown', 'Home', 'End'];\n\n if (eventPreventCodes.includes(event.code)) {\n // prevent page from scrolling when navigating through items in list\n event.preventDefault();\n }\n\n if (event.code === 'Tab') {\n close();\n }\n }\n\n function onKeyUp(event: KeyboardEvent) {\n if (event.code === 'Space' || event.key === 'Enter') {\n if (event.target === triggerRef.current) {\n toggle();\n } else if (event.key === 'Enter' && event.target !== listRef.current) {\n if ('firstChild' in event.target) {\n const firstChild = event.target.firstChild as HTMLButtonElement;\n\n firstChild.click();\n }\n }\n }\n\n if (event.code === 'Escape') close();\n\n if (event.code === 'ArrowUp') {\n setActiveIndex((prevState) => {\n if (prevState === 0) return numberOfChildren - indexIncrement;\n\n return prevState - indexIncrement;\n });\n }\n\n if (event.code === 'ArrowDown') {\n setActiveIndex((prevState) => {\n if (prevState === numberOfChildren - indexIncrement) return 0;\n\n return prevState + indexIncrement;\n });\n }\n\n if (event.code === 'Home') {\n setActiveIndex(0);\n }\n\n if (event.code === 'End') {\n setActiveIndex(numberOfChildren - indexIncrement);\n }\n }\n\n const onClickOutside = (event: MouseEvent) => {\n const { target } = event;\n\n if (!target || !containerRef.current) return;\n\n if (!containerRef.current.contains(target as Node)) {\n close();\n }\n };\n\n useEffect(() => {\n if (activeIndex < 0 || !listRef.current) return;\n\n const listItem = listRef.current.children.item(activeIndex);\n\n if (listItem) {\n (listItem as HTMLDivElement).focus();\n }\n }, [activeIndex]);\n\n useEffect(() => {\n if (!listRef.current || !listRef.current.hasChildNodes()) return;\n\n Array.from(listRef.current.children)\n .filter((overlayChild) => overlayChild.nodeType === Node.ELEMENT_NODE && overlayChild.hasChildNodes())\n .forEach((overlayChild) => {\n Array.from(overlayChild.children)\n .filter((childOfChild) => childOfChild.nodeType === Node.ELEMENT_NODE)\n .forEach((childOfChild) => {\n // internal children may be buttons and can get focus when tab is pressed; preventing those elements\n // from getting focus so that list can be tabbed over and traversed with arrow keys\n childOfChild.setAttribute('tabIndex', '-1');\n });\n });\n }, [children]);\n\n return (\n <div className={styles['action-list-container']} ref={containerRef}>\n <MenuButton
|
|
1
|
+
{"version":3,"file":"ActionList.js","sources":["../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Children, useEffect, useId, useRef, useState } from 'react';\n\nimport type { KeyboardEvent, MouseEvent as ReactMouseEvent, ReactElement, RefObject } from 'react';\nimport type { IconProps } from 'components/Icon';\nimport type { UIButtonVariant } from 'types/UserInterface';\n\nimport styles from './ActionList.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { MenuButton } from 'components/Buttons';\n\nexport interface ActionListProps {\n /** The label that is displayed before the icon. */\n label: string;\n /** The icon that is shown in front of the label. */\n prefixIcon?: IconProps['name'];\n /** The icon that is shown to toggle the menu. If none is specified, CheveronUp and CheveronDown is used depending on whether the menu is opened or closed. */\n iconName?: IconProps['name'];\n /** Determines the button variant. */\n variant?: UIButtonVariant;\n /** The child component(s). */\n children: ReactElement | ReactElement[];\n}\n\nconst inactiveIndex = -1;\nconst indexIncrement = 1;\n\n/** A component to show an action list to toggle a menu. */\nexport function ActionList({ label, prefixIcon, iconName, variant = 'secondary', children }: ActionListProps) {\n const listId = useId();\n const triggerRef = useRef<HTMLButtonElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const numberOfChildren = Children.count(children);\n\n const [activeIndex, setActiveIndex] = useState(inactiveIndex);\n const [isOpen, setIsOpen] = useState(false);\n\n function open() {\n setIsOpen(true);\n\n document.addEventListener('click', onClickOutside, { once: true, capture: true });\n }\n\n function close(event?: ReactMouseEvent<HTMLDivElement>) {\n // When a click occurs on an element that is not an immediate descendant of the action list container\n // (can happen when a modal window is triggered from a button in the action list), the setIsOpen state\n // handler should not be called, because this causes a re-render of the entire component and can lead\n // to undesired effects, like a select element closing immediately after it has been clicked.\n if (event && containerRef.current && !containerRef.current.contains(event.target as Node)) {\n return;\n }\n\n setActiveIndex(inactiveIndex);\n setIsOpen(false);\n\n document.removeEventListener('click', onClickOutside, { capture: true });\n }\n\n function toggle() {\n if (isOpen) close();\n else open();\n }\n\n function onKeyDown(event: KeyboardEvent) {\n if (!isOpen) return;\n\n const eventPreventCodes = ['ArrowUp', 'ArrowDown', 'Home', 'End'];\n\n if (eventPreventCodes.includes(event.code)) {\n // prevent page from scrolling when navigating through items in list\n event.preventDefault();\n }\n\n if (event.code === 'Tab') {\n close();\n }\n }\n\n function onKeyUp(event: KeyboardEvent) {\n if (event.code === 'Space' || event.key === 'Enter') {\n if (event.target === triggerRef.current) {\n toggle();\n } else if (event.key === 'Enter' && event.target !== listRef.current) {\n if ('firstChild' in event.target) {\n const firstChild = event.target.firstChild as HTMLButtonElement;\n\n firstChild.click();\n }\n }\n }\n\n if (event.code === 'Escape') close();\n\n if (event.code === 'ArrowUp') {\n setActiveIndex((prevState) => {\n if (prevState === 0) return numberOfChildren - indexIncrement;\n\n return prevState - indexIncrement;\n });\n }\n\n if (event.code === 'ArrowDown') {\n setActiveIndex((prevState) => {\n if (prevState === numberOfChildren - indexIncrement) return 0;\n\n return prevState + indexIncrement;\n });\n }\n\n if (event.code === 'Home') {\n setActiveIndex(0);\n }\n\n if (event.code === 'End') {\n setActiveIndex(numberOfChildren - indexIncrement);\n }\n }\n\n const onClickOutside = (event: MouseEvent) => {\n const { target } = event;\n\n if (!target || !containerRef.current) return;\n\n if (!containerRef.current.contains(target as Node)) {\n close();\n }\n };\n\n useEffect(() => {\n if (activeIndex < 0 || !listRef.current) return;\n\n const listItem = listRef.current.children.item(activeIndex);\n\n if (listItem) {\n (listItem as HTMLDivElement).focus();\n }\n }, [activeIndex]);\n\n useEffect(() => {\n if (!listRef.current || !listRef.current.hasChildNodes()) return;\n\n Array.from(listRef.current.children)\n .filter((overlayChild) => overlayChild.nodeType === Node.ELEMENT_NODE && overlayChild.hasChildNodes())\n .forEach((overlayChild) => {\n Array.from(overlayChild.children)\n .filter((childOfChild) => childOfChild.nodeType === Node.ELEMENT_NODE)\n .forEach((childOfChild) => {\n // internal children may be buttons and can get focus when tab is pressed; preventing those elements\n // from getting focus so that list can be tabbed over and traversed with arrow keys\n childOfChild.setAttribute('tabIndex', '-1');\n });\n });\n }, [children]);\n\n return (\n <div className={styles['action-list-container']} ref={containerRef}>\n <MenuButton\n onClick={toggle}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n buttonRef={triggerRef as RefObject<HTMLButtonElement>}\n variant={variant}\n >\n {prefixIcon && <Icon size={24} name={prefixIcon} />}\n {label}\n {iconName ? (\n <Icon size={24} name={iconName} />\n ) : (\n <Icon size={16} name={isOpen ? 'CheveronUp' : 'CheveronDown'} />\n )}\n </MenuButton>\n <div\n aria-activedescendant={`${listId}-child-${activeIndex}`}\n aria-label={label}\n className={clsx(styles['action-list'], {\n [styles['action-list--open']]: isOpen,\n })}\n onClickCapture={close}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n ref={listRef}\n role=\"menu\"\n tabIndex={-1}\n >\n {Children.map(children, (child, index) => (\n <div key={`${listId}-child-${index}`} role=\"menuitem\" tabIndex={-1}>\n {child}\n </div>\n ))}\n </div>\n </div>\n );\n}\n"],"names":["inactiveIndex","indexIncrement","ActionList","label","prefixIcon","iconName","variant","children","listId","useId","triggerRef","useRef","listRef","containerRef","numberOfChildren","Children","activeIndex","setActiveIndex","useState","isOpen","setIsOpen","open","onClickOutside","close","event","toggle","onKeyDown","onKeyUp","prevState","target","useEffect","listItem","overlayChild","childOfChild","styles","jsxs","MenuButton","jsx","Icon","clsx","child","index"],"mappings":";;;;;;;;;;;GAyBMA,IAAgB,IAChBC,IAAiB;AAGP,SAAAC,EAAW,EAAE,OAAAC,GAAO,YAAAC,GAAY,UAAAC,GAAU,SAAAC,IAAU,aAAa,UAAAC,KAA6B;AAC5G,QAAMC,IAASC,EAAM,GACfC,IAAaC,EAA0B,IAAI,GAC3CC,IAAUD,EAAuB,IAAI,GACrCE,IAAeF,EAAuB,IAAI,GAE1CG,IAAmBC,EAAS,MAAMR,CAAQ,GAE1C,CAACS,GAAaC,CAAc,IAAIC,EAASlB,CAAa,GACtD,CAACmB,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,WAASG,IAAO;AACd,IAAAD,EAAU,EAAI,GAEL,SAAA,iBAAiB,SAASE,GAAgB,EAAE,MAAM,IAAM,SAAS,IAAM;AAAA,EAAA;AAGlF,WAASC,EAAMC,GAAyC;AAKlD,IAAAA,KAASX,EAAa,WAAW,CAACA,EAAa,QAAQ,SAASW,EAAM,MAAc,MAIxFP,EAAejB,CAAa,GAC5BoB,EAAU,EAAK,GAEf,SAAS,oBAAoB,SAASE,GAAgB,EAAE,SAAS,IAAM;AAAA,EAAA;AAGzE,WAASG,IAAS;AAChB,IAAIN,IAAcI,EAAA,IACRF,EAAA;AAAA,EAAA;AAGZ,WAASK,EAAUF,GAAsB;AACvC,QAAI,CAACL,EAAQ;AAIb,IAF0B,CAAC,WAAW,aAAa,QAAQ,KAAK,EAE1C,SAASK,EAAM,IAAI,KAEvCA,EAAM,eAAe,GAGnBA,EAAM,SAAS,SACXD,EAAA;AAAA,EACR;AAGF,WAASI,EAAQH,GAAsB;AACrC,KAAIA,EAAM,SAAS,WAAWA,EAAM,QAAQ,aACtCA,EAAM,WAAWd,EAAW,UACvBe,EAAA,IACED,EAAM,QAAQ,WAAWA,EAAM,WAAWZ,EAAQ,WACvD,gBAAgBY,EAAM,UACLA,EAAM,OAAO,WAErB,MAAM,IAKnBA,EAAM,SAAS,YAAgBD,EAAA,GAE/BC,EAAM,SAAS,aACjBP,EAAe,CAACW,MACVA,MAAc,IAAUd,IAAmBb,IAExC2B,IAAY3B,CACpB,GAGCuB,EAAM,SAAS,eACjBP,EAAe,CAACW,MACVA,MAAcd,IAAmBb,IAAuB,IAErD2B,IAAY3B,CACpB,GAGCuB,EAAM,SAAS,UACjBP,EAAe,CAAC,GAGdO,EAAM,SAAS,SACjBP,EAAeH,IAAmBb,CAAc;AAAA,EAClD;AAGI,QAAAqB,IAAiB,CAACE,MAAsB;AACtC,UAAA,EAAE,QAAAK,MAAWL;AAEnB,IAAI,CAACK,KAAU,CAAChB,EAAa,WAExBA,EAAa,QAAQ,SAASgB,CAAc,KACzCN,EAAA;AAAA,EAEV;AAEA,SAAAO,EAAU,MAAM;AACd,QAAId,IAAc,KAAK,CAACJ,EAAQ,QAAS;AAEzC,UAAMmB,IAAWnB,EAAQ,QAAQ,SAAS,KAAKI,CAAW;AAE1D,IAAIe,KACDA,EAA4B,MAAM;AAAA,EACrC,GACC,CAACf,CAAW,CAAC,GAEhBc,EAAU,MAAM;AACd,IAAI,CAAClB,EAAQ,WAAW,CAACA,EAAQ,QAAQ,mBAEzC,MAAM,KAAKA,EAAQ,QAAQ,QAAQ,EAChC,OAAO,CAACoB,MAAiBA,EAAa,aAAa,KAAK,gBAAgBA,EAAa,cAAA,CAAe,EACpG,QAAQ,CAACA,MAAiB;AACzB,YAAM,KAAKA,EAAa,QAAQ,EAC7B,OAAO,CAACC,MAAiBA,EAAa,aAAa,KAAK,YAAY,EACpE,QAAQ,CAACA,MAAiB;AAGZ,QAAAA,EAAA,aAAa,YAAY,IAAI;AAAA,MAAA,CAC3C;AAAA,IAAA,CACJ;AAAA,EAAA,GACF,CAAC1B,CAAQ,CAAC,qBAGV,OAAI,EAAA,WAAW2B,EAAO,uBAAuB,GAAG,KAAKrB,GACpD,UAAA;AAAA,IAAA,gBAAAsB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAASX;AAAA,QACT,WAAAC;AAAA,QACA,SAAAC;AAAA,QACA,WAAWjB;AAAA,QACX,SAAAJ;AAAA,QAEC,UAAA;AAAA,UAAAF,KAAe,gBAAAiC,EAAAC,GAAA,EAAK,MAAM,IAAI,MAAMlC,GAAY;AAAA,UAChDD;AAAA,UACAE,IACC,gBAAAgC,EAACC,GAAK,EAAA,MAAM,IAAI,MAAMjC,EAAU,CAAA,IAEhC,gBAAAgC,EAACC,KAAK,MAAM,IAAI,MAAMnB,IAAS,eAAe,eAAgB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAElE;AAAA,IACA,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,yBAAuB,GAAG7B,CAAM,UAAUQ,CAAW;AAAA,QACrD,cAAYb;AAAA,QACZ,WAAWoC,EAAKL,EAAO,aAAa,GAAG;AAAA,UACrC,CAACA,EAAO,mBAAmB,CAAC,GAAGf;AAAA,QAAA,CAChC;AAAA,QACD,gBAAgBI;AAAA,QAChB,WAAAG;AAAA,QACA,SAAAC;AAAA,QACA,KAAKf;AAAA,QACL,MAAK;AAAA,QACL,UAAU;AAAA,QAET,YAAS,IAAIL,GAAU,CAACiC,GAAOC,wBAC7B,OAAqC,EAAA,MAAK,YAAW,UAAU,IAC7D,UADOD,EAAA,GAAA,GAAGhC,CAAM,UAAUiC,CAAK,EAElC,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as a, Fragment as s, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { f as l } from "../../index-
|
|
2
|
+
import { f as l } from "../../index-Sh2oo6_C.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 { jsxs as a, Fragment as l, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { f as s } from "../../index-
|
|
2
|
+
import { f as s } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { BrowserRouter as c } from "react-router";
|
|
4
4
|
import { LinkButton as n } from "./LinkButton.js";
|
|
5
5
|
const d = `
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as s, Fragment as l, jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { f as c } from "../../index-
|
|
2
|
+
import { f as c } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { MenuButton as t } 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 { f as e } from "../../index-
|
|
2
|
+
import { f as e } from "../../index-Sh2oo6_C.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,5 +1,5 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { f as n } from "../../index-
|
|
2
|
+
import { f as n } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { CheckboxButton as o } from "./CheckboxButton.js";
|
|
4
4
|
const a = "<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", b = {
|
|
5
5
|
title: "Atoms/CheckboxButton",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { f as l } from "../../index-
|
|
2
|
+
import { f as l } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
|
|
4
4
|
const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", i = {
|
|
5
5
|
title: "Molecules/CheckboxButtonBar",
|
|
@@ -17,7 +17,7 @@ import "../IconButton/IconButton.js";
|
|
|
17
17
|
import "../Input/Input.js";
|
|
18
18
|
import "../InputField/InputField.js";
|
|
19
19
|
import "react-router";
|
|
20
|
-
import "../../TablePlugin-
|
|
20
|
+
import "../../TablePlugin-CPEwD-wi.js";
|
|
21
21
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
22
22
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
23
23
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { createRef, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport type { MouseEventHandler, RefObject } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked.\n// When deselecting the parent checkbox, the disabled checkbox is deselected, and will never\n// be checked again. We'll leave this for now, until we run into a real world\n// example where this is necessary.\n\nexport type CheckboxLeaf = {\n itemName: string;\n itemValue: string;\n disabled?: boolean;\n};\n\nexport type CheckboxBranch = {\n itemName: string;\n children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n /** The title of the component. */\n title?: string;\n /** Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). */\n checkboxTree: CheckboxBranch[];\n /** Array of selected values. */\n selectedValues?: string[];\n /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n noLabelFrontWeight?: boolean;\n /** Returns array of selected values. */\n onChange?: (value: string[]) => void;\n}\n\n/** Represents a component to render a tree of checkboxes. */\nexport const CheckboxTree = ({\n title,\n checkboxTree,\n selectedValues,\n noLabelFrontWeight = false,\n onChange,\n}: CheckboxTreeProps) => {\n const checkboxRefs = useRef<Record<string, RefObject<HTMLInputElement>>>({});\n const [values, setValues] = useState<string[]>([]);\n const { lessThan } = useResponsive();\n\n const valuesAreEqual = (values1: string[], values2: string[]): boolean => {\n if (values1.length !== values2.length) return false;\n\n const countElements = (list: string[]) =>\n list.reduce((acc: Record<string, number>, val) => {\n acc[val] = (acc[val] || 0) + 1;\n return acc;\n }, {});\n\n const numberOfValues1 = countElements(values1);\n const numberOfValues2 = countElements(values2);\n\n return !Object.keys(numberOfValues1).some((key) => numberOfValues1[key] !== numberOfValues2[key]);\n };\n\n const createRefForKey = (key: string) => {\n if (!checkboxRefs.current[key]) {\n checkboxRefs.current[key] = createRef();\n }\n return checkboxRefs.current[key];\n };\n\n const setValue = () => {\n const newValues: string[] = [];\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (chkBox && chkBox.name.indexOf('Group') === -1 && chkBox.checked) {\n newValues.push(chkBox.value);\n }\n });\n setValues(newValues);\n if (onChange) onChange(newValues);\n };\n\n const setCheckboxesState = (checkGroupName: string) => {\n if (checkGroupName === '') return;\n\n const groupStatus: boolean[] = [];\n\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox?.getAttribute('data-groupname') === checkGroupName) {\n groupStatus.push(chkBox.checked);\n }\n });\n\n const every = groupStatus.every(Boolean);\n const some = groupStatus.some(Boolean);\n\n if (checkboxRefs.current[checkGroupName].current) {\n checkboxRefs.current[checkGroupName].current.checked = every;\n checkboxRefs.current[checkGroupName].current.indeterminate = !every && every !== some;\n checkboxRefs.current[checkGroupName].current.checked = every && every === some;\n }\n };\n\n const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element | null) => {\n const children = container?.querySelector('[data-ul]');\n\n (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n container\n ?.closest('[data-li]')\n ?.setAttribute(\n 'aria-expanded',\n container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n );\n\n if (children) {\n children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n }\n };\n\n const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n const check = event.target as HTMLInputElement;\n\n if (check.type !== 'checkbox' && check.type !== 'button') return;\n\n if (\n lessThan.md &&\n check.name.indexOf('Group') !== -1 &&\n check.parentNode &&\n (check.parentNode.parentNode as HTMLElement).getAttribute('aria-expanded') === 'false'\n ) {\n event.preventDefault();\n setExpandedAttributes(check.parentNode as HTMLButtonElement, check.parentNode.parentNode as HTMLElement);\n return;\n }\n\n if (check.name.indexOf('Group') !== -1) {\n const childPrefix = check.name;\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n if (key.indexOf(`${childPrefix}_`) !== -1) {\n const chkBox = checkboxRefs.current[key].current;\n const parentCheckbox = checkboxRefs.current[childPrefix].current;\n if (!chkBox || !parentCheckbox) return;\n chkBox.checked = parentCheckbox.checked ? true : false;\n }\n });\n setCheckboxesState(childPrefix);\n setValue();\n return;\n }\n setCheckboxesState(check.getAttribute('data-groupname') || '');\n setValue();\n };\n\n const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n const target = event.target as HTMLButtonElement;\n const parent = target.closest('[data-li]');\n setExpandedAttributes(target, parent);\n };\n\n useEffect(() => {\n if (selectedValues && !valuesAreEqual(selectedValues, values)) {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (selectedValues?.includes(chkBox.value)) {\n chkBox.checked = true;\n } else {\n chkBox.checked = false;\n }\n if (chkBox.name.indexOf('Group') !== -1) {\n setValues(selectedValues || []);\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedValues]);\n\n useEffect(() => {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox.name.indexOf('Group') !== -1) {\n setCheckboxesState(chkBox.name);\n }\n });\n }, [values]);\n\n return (\n <div>\n {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n {checkboxTree.map(({ itemName, children }, index) => (\n <div\n key={itemName}\n className={styles['checkbox-tree__branch']}\n data-li\n aria-expanded={lessThan.md ? 'false' : 'true'}\n >\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Button variant=\"blank\" onClick={handleExpanded}>\n <Icon\n name=\"CheveronRight\"\n size={16}\n className={clsx(styles['checkbox-tree__branch--icon'], {\n [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n })}\n />\n </Button>\n <Checkbox\n id={itemName}\n name={`Group${index}`}\n disabled={children.every((checkbox) => checkbox.disabled)}\n ref={createRefForKey(`Group${index}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n <div\n className={clsx(styles['checkbox-tree__leaves'], {\n [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n })}\n data-ul\n >\n {children.map(({ itemName, itemValue, disabled }) => (\n <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Checkbox\n id={itemName}\n name={itemName}\n value={itemValue}\n disabled={disabled}\n data-groupname={`Group${index}`}\n ref={createRefForKey(`Group${index}_${itemName}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxTree","title","checkboxTree","selectedValues","noLabelFrontWeight","onChange","checkboxRefs","useRef","values","setValues","useState","lessThan","useResponsive","valuesAreEqual","values1","values2","countElements","list","acc","val","numberOfValues1","numberOfValues2","key","createRefForKey","createRef","setValue","newValues","chkBox","setCheckboxesState","checkGroupName","groupStatus","every","some","setExpandedAttributes","trigger","container","children","styles","_b","_a","handleChange","event","check","childPrefix","parentCheckbox","handleExpanded","target","parent","useEffect","itemName","index","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","checkbox","Label","itemValue","disabled"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { createRef, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport type { MouseEventHandler, RefObject } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked.\n// When deselecting the parent checkbox, the disabled checkbox is deselected, and will never\n// be checked again. We'll leave this for now, until we run into a real world\n// example where this is necessary.\n\nexport type CheckboxLeaf = {\n itemName: string;\n itemValue: string;\n disabled?: boolean;\n};\n\nexport type CheckboxBranch = {\n itemName: string;\n children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n /** The title of the component. */\n title?: string;\n /** Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). */\n checkboxTree: CheckboxBranch[];\n /** Array of selected values. */\n selectedValues?: string[];\n /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n noLabelFrontWeight?: boolean;\n /** Returns array of selected values. */\n onChange?: (value: string[]) => void;\n}\n\n/** Represents a component to render a tree of checkboxes. */\nexport const CheckboxTree = ({\n title,\n checkboxTree,\n selectedValues,\n noLabelFrontWeight = false,\n onChange,\n}: CheckboxTreeProps) => {\n const checkboxRefs = useRef<Record<string, RefObject<HTMLInputElement | null>>>({});\n const [values, setValues] = useState<string[]>([]);\n const { lessThan } = useResponsive();\n\n const valuesAreEqual = (values1: string[], values2: string[]): boolean => {\n if (values1.length !== values2.length) return false;\n\n const countElements = (list: string[]) =>\n list.reduce((acc: Record<string, number>, val) => {\n acc[val] = (acc[val] || 0) + 1;\n return acc;\n }, {});\n\n const numberOfValues1 = countElements(values1);\n const numberOfValues2 = countElements(values2);\n\n return !Object.keys(numberOfValues1).some((key) => numberOfValues1[key] !== numberOfValues2[key]);\n };\n\n const createRefForKey = (key: string) => {\n if (!checkboxRefs.current[key]) {\n checkboxRefs.current[key] = createRef();\n }\n return checkboxRefs.current[key];\n };\n\n const setValue = () => {\n const newValues: string[] = [];\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (chkBox && chkBox.name.indexOf('Group') === -1 && chkBox.checked) {\n newValues.push(chkBox.value);\n }\n });\n setValues(newValues);\n if (onChange) onChange(newValues);\n };\n\n const setCheckboxesState = (checkGroupName: string) => {\n if (checkGroupName === '') return;\n\n const groupStatus: boolean[] = [];\n\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox?.getAttribute('data-groupname') === checkGroupName) {\n groupStatus.push(chkBox.checked);\n }\n });\n\n const every = groupStatus.every(Boolean);\n const some = groupStatus.some(Boolean);\n\n if (checkboxRefs.current[checkGroupName].current) {\n checkboxRefs.current[checkGroupName].current.checked = every;\n checkboxRefs.current[checkGroupName].current.indeterminate = !every && every !== some;\n checkboxRefs.current[checkGroupName].current.checked = every && every === some;\n }\n };\n\n const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element | null) => {\n const children = container?.querySelector('[data-ul]');\n\n (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n container\n ?.closest('[data-li]')\n ?.setAttribute(\n 'aria-expanded',\n container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n );\n\n if (children) {\n children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n }\n };\n\n const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n const check = event.target as HTMLInputElement;\n\n if (check.type !== 'checkbox' && check.type !== 'button') return;\n\n if (\n lessThan.md &&\n check.name.indexOf('Group') !== -1 &&\n check.parentNode &&\n (check.parentNode.parentNode as HTMLElement).getAttribute('aria-expanded') === 'false'\n ) {\n event.preventDefault();\n setExpandedAttributes(check.parentNode as HTMLButtonElement, check.parentNode.parentNode as HTMLElement);\n return;\n }\n\n if (check.name.indexOf('Group') !== -1) {\n const childPrefix = check.name;\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n if (key.indexOf(`${childPrefix}_`) !== -1) {\n const chkBox = checkboxRefs.current[key].current;\n const parentCheckbox = checkboxRefs.current[childPrefix].current;\n if (!chkBox || !parentCheckbox) return;\n chkBox.checked = parentCheckbox.checked ? true : false;\n }\n });\n setCheckboxesState(childPrefix);\n setValue();\n return;\n }\n setCheckboxesState(check.getAttribute('data-groupname') || '');\n setValue();\n };\n\n const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n const target = event.target as HTMLButtonElement;\n const parent = target.closest('[data-li]');\n setExpandedAttributes(target, parent);\n };\n\n useEffect(() => {\n if (selectedValues && !valuesAreEqual(selectedValues, values)) {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (selectedValues?.includes(chkBox.value)) {\n chkBox.checked = true;\n } else {\n chkBox.checked = false;\n }\n if (chkBox.name.indexOf('Group') !== -1) {\n setValues(selectedValues || []);\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedValues]);\n\n useEffect(() => {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox.name.indexOf('Group') !== -1) {\n setCheckboxesState(chkBox.name);\n }\n });\n }, [values]);\n\n return (\n <div>\n {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n {checkboxTree.map(({ itemName, children }, index) => (\n <div\n key={itemName}\n className={styles['checkbox-tree__branch']}\n data-li\n aria-expanded={lessThan.md ? 'false' : 'true'}\n >\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Button variant=\"blank\" onClick={handleExpanded}>\n <Icon\n name=\"CheveronRight\"\n size={16}\n className={clsx(styles['checkbox-tree__branch--icon'], {\n [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n })}\n />\n </Button>\n <Checkbox\n id={itemName}\n name={`Group${index}`}\n disabled={children.every((checkbox) => checkbox.disabled)}\n ref={createRefForKey(`Group${index}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n <div\n className={clsx(styles['checkbox-tree__leaves'], {\n [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n })}\n data-ul\n >\n {children.map(({ itemName, itemValue, disabled }) => (\n <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Checkbox\n id={itemName}\n name={itemName}\n value={itemValue}\n disabled={disabled}\n data-groupname={`Group${index}`}\n ref={createRefForKey(`Group${index}_${itemName}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxTree","title","checkboxTree","selectedValues","noLabelFrontWeight","onChange","checkboxRefs","useRef","values","setValues","useState","lessThan","useResponsive","valuesAreEqual","values1","values2","countElements","list","acc","val","numberOfValues1","numberOfValues2","key","createRefForKey","createRef","setValue","newValues","chkBox","setCheckboxesState","checkGroupName","groupStatus","every","some","setExpandedAttributes","trigger","container","children","styles","_b","_a","handleChange","event","check","childPrefix","parentCheckbox","handleExpanded","target","parent","useEffect","itemName","index","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","checkbox","Label","itemValue","disabled"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as g, jsxs as x } from "react/jsx-runtime";
|
|
2
|
-
import { j as S,
|
|
2
|
+
import { j as S, G as D, f as V } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { s as f } from "../../index-2mUSc_Ki.js";
|
|
4
4
|
import { useState as v } from "react";
|
|
5
5
|
import { CheckboxTree as y } from "./CheckboxTree.js";
|
|
@@ -78,31 +78,31 @@ const K = (e, t, n) => {
|
|
|
78
78
|
["1", "2", "3", "4", "5", "6", "7"],
|
|
79
79
|
z,
|
|
80
80
|
L
|
|
81
|
-
),
|
|
81
|
+
), G = "<CheckboxTree title={} checkboxTree={} selectedValues={} onChange={} />", oe = {
|
|
82
82
|
title: "Organisms/CheckboxTree",
|
|
83
83
|
component: y,
|
|
84
84
|
parameters: {
|
|
85
85
|
inspectComponent: y,
|
|
86
|
-
codeString:
|
|
86
|
+
codeString: G
|
|
87
87
|
}
|
|
88
|
-
},
|
|
89
|
-
|
|
88
|
+
}, H = (e) => /* @__PURE__ */ g(y, { ...e }), J = H.bind({});
|
|
89
|
+
J.args = {
|
|
90
90
|
title: "Periode",
|
|
91
91
|
checkboxTree: C,
|
|
92
92
|
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
|
93
93
|
selectedValues: ["3", "4"],
|
|
94
94
|
onChange: V()
|
|
95
95
|
};
|
|
96
|
-
const u = 3,
|
|
96
|
+
const u = 3, Y = (e) => {
|
|
97
97
|
const t = Math.ceil(parseInt(e) / u), n = t === u ? "" : `.${parseInt(e) % u || u}`;
|
|
98
98
|
return `${t}${n}`;
|
|
99
|
-
},
|
|
99
|
+
}, X = (e) => {
|
|
100
100
|
const [t, n] = e.split(".").map(Number);
|
|
101
101
|
return `${(t - 1) * u + (n || 1)}`;
|
|
102
102
|
}, re = () => {
|
|
103
103
|
const [e, t] = v(["5", "4", "1"]), n = (c) => {
|
|
104
104
|
const s = JSON.parse(JSON.stringify(e)).filter(
|
|
105
|
-
(m) => m !==
|
|
105
|
+
(m) => m !== X(c)
|
|
106
106
|
);
|
|
107
107
|
t(() => s), _("onChange value:")(s);
|
|
108
108
|
}, o = (c) => {
|
|
@@ -112,7 +112,7 @@ const u = 3, q = (e) => {
|
|
|
112
112
|
/* @__PURE__ */ g("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", width: "100%", marginBottom: "1rem" }, children: e && e.map((c, s) => /* @__PURE__ */ g(
|
|
113
113
|
I,
|
|
114
114
|
{
|
|
115
|
-
label:
|
|
115
|
+
label: Y(c),
|
|
116
116
|
onDelete: n
|
|
117
117
|
},
|
|
118
118
|
`${s}_${c}`
|
|
@@ -129,7 +129,7 @@ const u = 3, q = (e) => {
|
|
|
129
129
|
] });
|
|
130
130
|
};
|
|
131
131
|
export {
|
|
132
|
-
|
|
132
|
+
J as CheckboxTreeExample,
|
|
133
133
|
re as CheckboxTreeWithChips,
|
|
134
134
|
oe as default
|
|
135
135
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import { f as t } from "../../index-
|
|
2
|
+
import { f as t } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { Chip as e } from "./Chip.js";
|
|
4
4
|
const s = "<Chip label={string} onDelete={onDeleteFunction(label)}/>", b = {
|
|
5
5
|
title: "Atoms/Chip",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { OverlayProvider as p } from "@react-aria/overlays";
|
|
3
|
-
import { f as m } from "../../index-
|
|
3
|
+
import { f as m } from "../../index-Sh2oo6_C.js";
|
|
4
4
|
import { useState as c } from "react";
|
|
5
5
|
import { Drawer as r } from "./Drawer.js";
|
|
6
6
|
import { Button as o } from "../Buttons/Button.js";
|
|
@@ -16,7 +16,7 @@ import "../IconButton/IconButton.js";
|
|
|
16
16
|
import "../Input/Input.js";
|
|
17
17
|
import "../InputField/InputField.js";
|
|
18
18
|
import "react-router";
|
|
19
|
-
import "../../TablePlugin-
|
|
19
|
+
import "../../TablePlugin-CPEwD-wi.js";
|
|
20
20
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
21
21
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
22
22
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { f as i } from "../../index-
|
|
2
|
+
import { f as i } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { FormInput as a } from "./FormInput.js";
|
|
4
4
|
import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
|
|
5
5
|
const m = `
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { f as r } from "../../index-
|
|
2
|
+
import { f as r } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { IconButton as t } from "./IconButton.js";
|
|
4
4
|
import { Icon as i } from "../Icon/Icon.js";
|
|
5
5
|
const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { useState as d, useRef as g } from "react";
|
|
3
|
-
import { f as p } from "../../index-
|
|
3
|
+
import { f as p } from "../../index-Sh2oo6_C.js";
|
|
4
4
|
import { InputField as o } from "./InputField.js";
|
|
5
5
|
import { Container as u } from "../../storyComponents/Container/Container.js";
|
|
6
6
|
import { Icon as f } from "../Icon/Icon.js";
|
|
@@ -16,7 +16,7 @@ import "../GridRow/GridRow.js";
|
|
|
16
16
|
import "../IconButton/IconButton.js";
|
|
17
17
|
import "../Input/Input.js";
|
|
18
18
|
import "react-router";
|
|
19
|
-
import "../../TablePlugin-
|
|
19
|
+
import "../../TablePlugin-CPEwD-wi.js";
|
|
20
20
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
21
21
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
22
22
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { ModalProvider as l } from "@react-aria/overlays";
|
|
3
|
-
import { f as i } from "../../index-
|
|
3
|
+
import { f as i } from "../../index-Sh2oo6_C.js";
|
|
4
4
|
import { ModalDialog as t } from "./ModalDialog.js";
|
|
5
5
|
import { Button as n } from "../Buttons/Button.js";
|
|
6
6
|
import "../Buttons/LinkButton.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as S, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { f as d } from "../../index-
|
|
2
|
+
import { f as d } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { useState as p } from "react";
|
|
4
|
-
import { M as e } from "../../TablePlugin-
|
|
4
|
+
import { M as e } from "../../TablePlugin-CPEwD-wi.js";
|
|
5
5
|
import { Container as M } from "../../storyComponents/Container/Container.js";
|
|
6
6
|
const C = `
|
|
7
7
|
// MultiSelectHeader can be added optionally
|
|
@@ -15,7 +15,7 @@ import "../../IconButton/IconButton.js";
|
|
|
15
15
|
import "../../Input/Input.js";
|
|
16
16
|
import "../../InputField/InputField.js";
|
|
17
17
|
import "react-router";
|
|
18
|
-
import { a as y } from "../../../TablePlugin-
|
|
18
|
+
import { a as y } from "../../../TablePlugin-CPEwD-wi.js";
|
|
19
19
|
import "../../RteEditor/Providers/LanguageProvider.js";
|
|
20
20
|
import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
21
21
|
import "../../RteEditor/hooks/components/Flyout.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { f as a } from "../../index-
|
|
2
|
+
import { f as a } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
|
|
4
4
|
import { Container as l } from "../../storyComponents/Container/Container.js";
|
|
5
5
|
const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {
|
|
@@ -15,7 +15,7 @@ import "../IconButton/IconButton.js";
|
|
|
15
15
|
import "../Input/Input.js";
|
|
16
16
|
import "../InputField/InputField.js";
|
|
17
17
|
import "react-router";
|
|
18
|
-
import "../../TablePlugin-
|
|
18
|
+
import "../../TablePlugin-CPEwD-wi.js";
|
|
19
19
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
20
20
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
21
21
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -17,7 +17,7 @@ import "../Input/Input.js";
|
|
|
17
17
|
import "../InputField/InputField.js";
|
|
18
18
|
import { Label as D } from "../Label/Label.js";
|
|
19
19
|
import "react-router";
|
|
20
|
-
import "../../TablePlugin-
|
|
20
|
+
import "../../TablePlugin-CPEwD-wi.js";
|
|
21
21
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
22
22
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
23
23
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { f as t } from "../../index-
|
|
2
|
+
import { f as t } from "../../index-Sh2oo6_C.js";
|
|
3
3
|
import { PeriodSelector as e } from "./PeriodSelector.js";
|
|
4
4
|
const i = "<PeriodSelector maxPeriods={} defaultValues={} label={} labelPosition={} required={} onChange={} />", m = {
|
|
5
5
|
title: "Organisms/PeriodSelector",
|