@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.
Files changed (79) hide show
  1. package/dist/{SelectListbox.module-DX1IVM9E.js → SelectListbox.module-BD2qbcmZ.js} +21 -21
  2. package/dist/SelectListbox.module-BD2qbcmZ.js.map +1 -0
  3. package/dist/{TablePlugin-C_QKVXSo.js → TablePlugin-CPEwD-wi.js} +2 -2
  4. package/dist/TablePlugin-CPEwD-wi.js.map +1 -0
  5. package/dist/assets/SelectListbox.css +1 -1
  6. package/dist/components/ActionList/ActionList.js +15 -5
  7. package/dist/components/ActionList/ActionList.js.map +1 -1
  8. package/dist/components/Buttons/Button.stories.js +1 -1
  9. package/dist/components/Buttons/LinkButton.stories.js +1 -1
  10. package/dist/components/Buttons/MenuButton.stories.js +1 -1
  11. package/dist/components/Checkbox/Checkbox.stories.js +1 -1
  12. package/dist/components/CheckboxButton/CheckboxButton.stories.js +1 -1
  13. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +1 -1
  14. package/dist/components/CheckboxTree/CheckboxTree.js +1 -1
  15. package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
  16. package/dist/components/CheckboxTree/CheckboxTree.stories.js +10 -10
  17. package/dist/components/Chip/Chip.stories.js +1 -1
  18. package/dist/components/Drawer/Drawer.stories.js +1 -1
  19. package/dist/components/FormInput/FormInput.js +1 -1
  20. package/dist/components/FormInput/FormInput.stories.js +1 -1
  21. package/dist/components/IconButton/IconButton.stories.js +1 -1
  22. package/dist/components/InputField/InputField.stories.js +2 -2
  23. package/dist/components/ModalDialog/ModalDialog.stories.js +1 -1
  24. package/dist/components/MultiSelect/MultiSelect.js +1 -1
  25. package/dist/components/MultiSelect/MultiSelect.stories.js +2 -2
  26. package/dist/components/MultiSelect/components/MultiSelectHeader.js +1 -1
  27. package/dist/components/MultiSelect/index.js +1 -1
  28. package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
  29. package/dist/components/OverlayStepBar/OverlayStepBar.js +1 -1
  30. package/dist/components/PeriodSelector/PeriodSelector.js +1 -1
  31. package/dist/components/PeriodSelector/PeriodSelector.stories.js +1 -1
  32. package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +2 -2
  33. package/dist/components/RteEditor/EditorHeader/EditorHeader.js +1 -1
  34. package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.d.ts +1 -0
  35. package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js.map +1 -1
  36. package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +1 -1
  37. package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +1 -1
  38. package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +2 -2
  39. package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js.map +1 -1
  40. package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js +1 -1
  41. package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js +1 -1
  42. package/dist/components/RteEditor/Plugins/TablePlugin/index.js +1 -1
  43. package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.d.ts +1 -0
  44. package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +1 -1
  45. package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js.map +1 -1
  46. package/dist/components/RteEditor/Plugins/index.js +1 -1
  47. package/dist/components/RteEditor/RteEditor.js +114 -115
  48. package/dist/components/RteEditor/RteEditor.js.map +1 -1
  49. package/dist/components/RteEditor/hooks/components/Flyout.js.map +1 -1
  50. package/dist/components/RteEditor/hooks/useFlyout.js.map +1 -1
  51. package/dist/components/SelectListbox/SelectListBox.stories.js +1 -1
  52. package/dist/components/SelectListbox/SelectListbox.d.ts +2 -1
  53. package/dist/components/SelectListbox/SelectListbox.js +36 -39
  54. package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
  55. package/dist/components/SelectListbox/components/SelectButton.js +1 -1
  56. package/dist/components/SelectListbox/components/SelectContainer.js +1 -1
  57. package/dist/components/SelectListbox/components/SelectOption.d.ts +1 -1
  58. package/dist/components/SelectListbox/components/SelectOption.js +1 -1
  59. package/dist/components/SelectListbox/components/SelectOption.js.map +1 -1
  60. package/dist/components/SelectListbox/components/SelectOptionBox.js +1 -1
  61. package/dist/components/Sortable/Sortable.stories.js +1 -1
  62. package/dist/components/ToggleSwitch/ToggleSwitch.stories.js +1 -1
  63. package/dist/components/hooks/useDebounce.js +5 -5
  64. package/dist/components/hooks/useDebounce.js.map +1 -1
  65. package/dist/components/index.js +1 -1
  66. package/dist/index-Sh2oo6_C.js +23304 -0
  67. package/dist/index-Sh2oo6_C.js.map +1 -0
  68. package/dist/index.js +1 -1
  69. package/dist/{react-18-CT6mjea2.js → react-18-C9Y1Flwa.js} +23 -23
  70. package/dist/{react-18-CT6mjea2.js.map → react-18-C9Y1Flwa.js.map} +1 -1
  71. package/dist/storybook__react.d.js +604 -562
  72. package/dist/storybook__react.d.js.map +1 -1
  73. package/package.json +29 -33
  74. package/dist/SelectListbox.module-DX1IVM9E.js.map +0 -1
  75. package/dist/TablePlugin-C_QKVXSo.js.map +0 -1
  76. package/dist/index-BpZ8v2ye.js +0 -19125
  77. package/dist/index-BpZ8v2ye.js.map +0 -1
  78. package/dist/index-CHX1d9_A.js +0 -21922
  79. 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-container_w4hvm_1",
3
- "select-listbox__wrapper": "_select-listbox__wrapper_w4hvm_5",
4
- "select-listbox-trigger": "_select-listbox-trigger_w4hvm_15",
5
- "select-listbox-trigger--default": "_select-listbox-trigger--default_w4hvm_30",
6
- "select-listbox-trigger--small": "_select-listbox-trigger--small_w4hvm_34",
7
- "select-listbox-trigger--medium": "_select-listbox-trigger--medium_w4hvm_38",
8
- "select-listbox-trigger-label": "_select-listbox-trigger-label_w4hvm_43",
9
- "select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_w4hvm_52",
10
- "select-listbox-trigger--bold": "_select-listbox-trigger--bold_w4hvm_56",
11
- "select-listbox-trigger--pill": "_select-listbox-trigger--pill_w4hvm_60",
12
- "select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_w4hvm_65",
13
- "select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_w4hvm_70",
14
- "select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_w4hvm_75",
15
- "select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_w4hvm_89",
16
- "select-listbox-trigger-icon": "_select-listbox-trigger-icon_w4hvm_101",
17
- "select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_w4hvm_106",
18
- "select-listbox": "_select-listbox_w4hvm_1",
19
- "select-listbox-option": "_select-listbox-option_w4hvm_120",
20
- "select-listbox-option--active": "_select-listbox-option--active_w4hvm_133",
21
- "select-listbox-divider": "_select-listbox-divider_w4hvm_143"
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-DX1IVM9E.js.map
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-C_QKVXSo.js.map
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-container_w4hvm_1{position:relative}._select-listbox__wrapper_w4hvm_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_w4hvm_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_w4hvm_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_w4hvm_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_w4hvm_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_w4hvm_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_w4hvm_52{right:0}._select-listbox-trigger--bold_w4hvm_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_w4hvm_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_w4hvm_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_w4hvm_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_w4hvm_75{border-color:var(--color-dark)}._select-listbox-trigger_w4hvm_15:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._select-listbox-trigger_w4hvm_15:focus-visible,._select-listbox-trigger_w4hvm_15:hover{background-color:var(--color-lavender)}._select-listbox-trigger--noborder_w4hvm_89{border:none}._select-listbox-trigger--pillLeft_w4hvm_65+._select-listbox__wrapper_w4hvm_5{left:1rem}._select-listbox-trigger--pillRight_w4hvm_70+._select-listbox__wrapper--align-right_w4hvm_52{right:1rem}._select-listbox-trigger-icon_w4hvm_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_w4hvm_106{transform:rotate(180deg)}._select-listbox_w4hvm_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_w4hvm_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_w4hvm_133,._select-listbox-option_w4hvm_120:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._select-listbox-option_w4hvm_120[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_w4hvm_143{height:1px;background-color:var(--color-grey-200);margin:1px -.25rem}
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($, { onClick: x, onKeyDown: y, onKeyUp: A, buttonRef: _, variant: L, children: [
47
- E && /* @__PURE__ */ c(m, { size: 24, name: E }),
48
- h,
49
- C ? /* @__PURE__ */ c(m, { size: 24, name: C }) : /* @__PURE__ */ c(m, { size: 16, name: a ? "CheveronUp" : "CheveronDown" })
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 onClick={toggle} onKeyDown={onKeyDown} onKeyUp={onKeyUp} buttonRef={triggerRef} variant={variant}>\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":"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"}
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":"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"}
@@ -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-CHX1d9_A.js";
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-CHX1d9_A.js";
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-CHX1d9_A.js";
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-CHX1d9_A.js";
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-CHX1d9_A.js";
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-CHX1d9_A.js";
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-C_QKVXSo.js";
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, q as D, f as V } from "../../index-CHX1d9_A.js";
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
- ), H = "<CheckboxTree title={} checkboxTree={} selectedValues={} onChange={} />", oe = {
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: H
86
+ codeString: G
87
87
  }
88
- }, J = (e) => /* @__PURE__ */ g(y, { ...e }), Y = J.bind({});
89
- Y.args = {
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, q = (e) => {
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
- }, G = (e) => {
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 !== G(c)
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: q(c),
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
- Y as CheckboxTreeExample,
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-CHX1d9_A.js";
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-CHX1d9_A.js";
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-C_QKVXSo.js";
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-CHX1d9_A.js";
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-CHX1d9_A.js";
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-CHX1d9_A.js";
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-C_QKVXSo.js";
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-CHX1d9_A.js";
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 "react/jsx-runtime";
2
2
  import "../../clsx-OuTLNxxd.js";
3
3
  import "../../MultiSelectItem-D9PxdX43.js";
4
- import { M as p } from "../../TablePlugin-C_QKVXSo.js";
4
+ import { M as p } from "../../TablePlugin-CPEwD-wi.js";
5
5
  export {
6
6
  p as MultiSelect
7
7
  };
@@ -1,7 +1,7 @@
1
1
  import { jsxs as S, jsx as r } from "react/jsx-runtime";
2
- import { f as d } from "../../index-CHX1d9_A.js";
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-C_QKVXSo.js";
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-C_QKVXSo.js";
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,4 +1,4 @@
1
- import { M as l } from "../../TablePlugin-C_QKVXSo.js";
1
+ import { M as l } from "../../TablePlugin-CPEwD-wi.js";
2
2
  export {
3
3
  l as MultiSelect
4
4
  };
@@ -1,5 +1,5 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
- import { f as a } from "../../index-CHX1d9_A.js";
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-C_QKVXSo.js";
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-C_QKVXSo.js";
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-CHX1d9_A.js";
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",