@uva-glass/component-library 3.43.1 → 3.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (121) hide show
  1. package/dist/SearchField.module-fyOzyOPm.js +17 -0
  2. package/dist/SearchField.module-fyOzyOPm.js.map +1 -0
  3. package/dist/SelectListbox.module-CAKDuwcy.js +28 -0
  4. package/dist/SelectListbox.module-CAKDuwcy.js.map +1 -0
  5. package/dist/{TablePlugin-DaKDRL4G.js → TablePlugin-4Zj0xZie.js} +6 -5
  6. package/dist/{TablePlugin-DaKDRL4G.js.map → TablePlugin-4Zj0xZie.js.map} +1 -1
  7. package/dist/assets/CheckboxButtonBar.css +1 -1
  8. package/dist/assets/SearchField.css +1 -0
  9. package/dist/assets/SelectListbox.css +1 -1
  10. package/dist/components/Buttons/Button.stories.js +1 -1
  11. package/dist/components/Buttons/LinkButton.stories.js +1 -1
  12. package/dist/components/Buttons/MenuButton.stories.js +1 -1
  13. package/dist/components/Checkbox/Checkbox.stories.js +1 -1
  14. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts +4 -2
  15. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +95 -64
  16. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
  17. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.d.ts +4 -3
  18. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +61 -26
  19. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
  20. package/dist/components/CheckboxTree/CheckboxTree.js +9 -8
  21. package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
  22. package/dist/components/CheckboxTree/CheckboxTree.stories.js +2 -2
  23. package/dist/components/Chip/Chip.stories.js +1 -1
  24. package/dist/components/ControlsButton/ControlsButton.d.ts +1 -1
  25. package/dist/components/ControlsButton/ControlsButton.js +27 -27
  26. package/dist/components/ControlsButton/ControlsButton.js.map +1 -1
  27. package/dist/components/ControlsButton/ControlsButton.stories.d.ts +1 -0
  28. package/dist/components/ControlsButton/ControlsButton.stories.js +70 -25
  29. package/dist/components/ControlsButton/ControlsButton.stories.js.map +1 -1
  30. package/dist/components/Drawer/Drawer.stories.js +1 -1
  31. package/dist/components/FormInput/FormInput.js +4 -3
  32. package/dist/components/FormInput/FormInput.js.map +1 -1
  33. package/dist/components/FormInput/FormInput.stories.js +1 -1
  34. package/dist/components/Icon/icons/index.d.ts +6 -0
  35. package/dist/components/Icon/icons/index.js +76 -71
  36. package/dist/components/Icon/icons/index.js.map +1 -1
  37. package/dist/components/IconButton/IconButton.stories.js +1 -1
  38. package/dist/components/InputField/InputField.stories.js +9 -8
  39. package/dist/components/InputField/InputField.stories.js.map +1 -1
  40. package/dist/components/ModalDialog/ModalDialog.stories.js +1 -1
  41. package/dist/components/MultiSelect/MultiSelect.js +1 -1
  42. package/dist/components/MultiSelect/MultiSelect.stories.js +2 -2
  43. package/dist/components/MultiSelect/components/MultiSelectHeader.js +3 -2
  44. package/dist/components/MultiSelect/components/MultiSelectHeader.js.map +1 -1
  45. package/dist/components/MultiSelect/index.js +1 -1
  46. package/dist/components/MultiSelectBox/MultiSelectBox.stories.js +1 -1
  47. package/dist/components/Notification/Notification.stories.js +1 -1
  48. package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
  49. package/dist/components/PeriodSelector/PeriodSelector.js +4 -3
  50. package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
  51. package/dist/components/PeriodSelector/PeriodSelector.stories.js +1 -1
  52. package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +9 -8
  53. package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
  54. package/dist/components/RadioGroup/RadioGroup.stories.js +1 -1
  55. package/dist/components/RadioTabSelector/RadioTabSelector.js +4 -3
  56. package/dist/components/RadioTabSelector/RadioTabSelector.js.map +1 -1
  57. package/dist/components/RadioTabSelector/RadioTabSelector.stories.js +1 -1
  58. package/dist/components/RteEditor/EditorHeader/EditorHeader.js +4 -3
  59. package/dist/components/RteEditor/EditorHeader/EditorHeader.js.map +1 -1
  60. package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +8 -7
  61. package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js.map +1 -1
  62. package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +3 -2
  63. package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js.map +1 -1
  64. package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +4 -3
  65. package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js.map +1 -1
  66. package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js +3 -2
  67. package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js.map +1 -1
  68. package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js +3 -2
  69. package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js.map +1 -1
  70. package/dist/components/RteEditor/Plugins/TablePlugin/index.js +1 -1
  71. package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +1 -1
  72. package/dist/components/RteEditor/Plugins/index.js +1 -1
  73. package/dist/components/RteEditor/RteEditor.js +4 -3
  74. package/dist/components/RteEditor/RteEditor.js.map +1 -1
  75. package/dist/components/SearchField/SearchField.d.ts +24 -0
  76. package/dist/components/SearchField/SearchField.js +77 -0
  77. package/dist/components/SearchField/SearchField.js.map +1 -0
  78. package/dist/components/SearchField/SearcheField.stories.d.ts +5 -0
  79. package/dist/components/SearchField/SearcheField.stories.js +113 -0
  80. package/dist/components/SearchField/SearcheField.stories.js.map +1 -0
  81. package/dist/components/SearchField/components/ResultOptionBox.d.ts +6 -0
  82. package/dist/components/SearchField/components/ResultOptionBox.js +11 -0
  83. package/dist/components/SearchField/components/ResultOptionBox.js.map +1 -0
  84. package/dist/components/SearchField/components/ResultsOption.d.ts +9 -0
  85. package/dist/components/SearchField/components/ResultsOption.js +37 -0
  86. package/dist/components/SearchField/components/ResultsOption.js.map +1 -0
  87. package/dist/components/SearchField/index.d.ts +1 -0
  88. package/dist/components/SearchField/index.js +5 -0
  89. package/dist/components/SearchField/index.js.map +1 -0
  90. package/dist/components/SearchField/mockData.d.ts +11 -0
  91. package/dist/components/SearchField/mockData.js +237 -0
  92. package/dist/components/SearchField/mockData.js.map +1 -0
  93. package/dist/components/SelectListbox/SelectListBox.stories.js +6 -6
  94. package/dist/components/SelectListbox/SelectListBox.stories.js.map +1 -1
  95. package/dist/components/SelectListbox/SelectListbox.d.ts +1 -1
  96. package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
  97. package/dist/components/SelectListbox/components/SelectButton.d.ts +1 -1
  98. package/dist/components/SelectListbox/components/SelectButton.js +1 -1
  99. package/dist/components/SelectListbox/components/SelectButton.js.map +1 -1
  100. package/dist/components/SelectListbox/components/SelectContainer.js +1 -1
  101. package/dist/components/SelectListbox/components/SelectOption.js +1 -1
  102. package/dist/components/SelectListbox/components/SelectOptionBox.js +1 -1
  103. package/dist/components/Sortable/Sortable.stories.js +1 -1
  104. package/dist/components/TextArea/TextArea.stories.js +1 -1
  105. package/dist/components/TextArea/TextArea.test.js +1 -1
  106. package/dist/components/ToggleSwitch/ToggleSwitch.stories.js +1 -1
  107. package/dist/components/VarIndicator/VarIndicator.stories.js +1 -1
  108. package/dist/components/index.d.ts +1 -0
  109. package/dist/components/index.js +40 -38
  110. package/dist/components/index.js.map +1 -1
  111. package/dist/{index-BVrrnUn0.js → index-BfMTX2kB.js} +6 -3
  112. package/dist/index-BfMTX2kB.js.map +1 -0
  113. package/dist/{index-BamlKH-k.js → index-DvUwfXNb.js} +3 -2
  114. package/dist/{index-BamlKH-k.js.map → index-DvUwfXNb.js.map} +1 -1
  115. package/dist/index.js +40 -38
  116. package/dist/index.js.map +1 -1
  117. package/dist/storybook__react.d.js +3 -3
  118. package/package.json +11 -11
  119. package/dist/SelectListbox.module-yzXaWwsm.js +0 -26
  120. package/dist/SelectListbox.module-yzXaWwsm.js.map +0 -1
  121. package/dist/index-BVrrnUn0.js.map +0 -1
@@ -0,0 +1,17 @@
1
+ import './assets/SearchField.css';const _ = {
2
+ "search-field__input-wrapper": "_search-field__input-wrapper_5fm8z_1",
3
+ "search-field__input-field": "_search-field__input-field_5fm8z_8",
4
+ "search-field__icon": "_search-field__icon_5fm8z_39",
5
+ "search-field__result-wrapper": "_search-field__result-wrapper_5fm8z_47",
6
+ "search-field__input-container": "_search-field__input-container_5fm8z_61",
7
+ "search-field__input-container--hidden": "_search-field__input-container--hidden_5fm8z_66",
8
+ "search-field__input-container--visible": "_search-field__input-container--visible_5fm8z_70",
9
+ "search-field__compact-button": "_search-field__compact-button_5fm8z_80",
10
+ "search-field__compact-icon": "_search-field__compact-icon_5fm8z_96",
11
+ "search-field__result-list": "_search-field__result-list_5fm8z_100",
12
+ "search-field__result-item": "_search-field__result-item_5fm8z_110"
13
+ };
14
+ export {
15
+ _ as s
16
+ };
17
+ //# sourceMappingURL=SearchField.module-fyOzyOPm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SearchField.module-fyOzyOPm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
@@ -0,0 +1,28 @@
1
+ import './assets/SelectListbox.css';const t = {
2
+ "select-listbox-container": "_select-listbox-container_xfwty_1",
3
+ "select-listbox__wrapper": "_select-listbox__wrapper_xfwty_5",
4
+ "select-listbox-trigger": "_select-listbox-trigger_xfwty_15",
5
+ "select-listbox-trigger--default": "_select-listbox-trigger--default_xfwty_30",
6
+ "select-listbox-trigger--small": "_select-listbox-trigger--small_xfwty_34",
7
+ "select-listbox-trigger--medium": "_select-listbox-trigger--medium_xfwty_38",
8
+ "select-listbox-trigger-label": "_select-listbox-trigger-label_xfwty_43",
9
+ "select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_xfwty_52",
10
+ "select-listbox-trigger--bold": "_select-listbox-trigger--bold_xfwty_56",
11
+ "select-listbox-trigger--pill": "_select-listbox-trigger--pill_xfwty_60",
12
+ "select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_xfwty_65",
13
+ "select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_xfwty_70",
14
+ "select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_xfwty_75",
15
+ "select-listbox-trigger--roundedLeft": "_select-listbox-trigger--roundedLeft_xfwty_79",
16
+ "select-listbox-trigger--roundedRight": "_select-listbox-trigger--roundedRight_xfwty_83",
17
+ "select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_xfwty_97",
18
+ "select-listbox-trigger-icon": "_select-listbox-trigger-icon_xfwty_109",
19
+ "select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_xfwty_114",
20
+ "select-listbox": "_select-listbox_xfwty_1",
21
+ "select-listbox-option": "_select-listbox-option_xfwty_128",
22
+ "select-listbox-option--active": "_select-listbox-option--active_xfwty_141",
23
+ "select-listbox-divider": "_select-listbox-divider_xfwty_151"
24
+ };
25
+ export {
26
+ t as s
27
+ };
28
+ //# sourceMappingURL=SelectListbox.module-CAKDuwcy.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SelectListbox.module-CAKDuwcy.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -35,6 +35,7 @@ import { useFlyout as Ne } from "./components/RteEditor/hooks/useFlyout.js";
35
35
  import { s as q } from "./RteEditor.module-CovRFt0S.js";
36
36
  import "react-dom";
37
37
  import "./index-yEhaxKq-.js";
38
+ import "./components/SearchField/SearchField.js";
38
39
  import "./components/SelectListbox/SelectListbox.js";
39
40
  import "./components/SelectListbox/SelectProvider.js";
40
41
  import "./components/Sortable/components/SortableItem.js";
@@ -75,7 +76,7 @@ const Ee = "_linkform_ki2qx_1", Re = "_linkform__footer_ki2qx_12", T = {
75
76
  linkform__footer: Re,
76
77
  "linkform__input-url-wrapper": "_linkform__input-url-wrapper_ki2qx_19",
77
78
  "linkform__open-url-button": "_linkform__open-url-button_ki2qx_31"
78
- }, Ft = V(
79
+ }, Ct = V(
79
80
  ({ onCloseHandler: _, onSaveHandler: u, isLink: a = { active: !1, url: "", linktext: "" } }, o) => {
80
81
  const l = j(), [f, m] = y(a.url || ""), [s, h] = y(a.linktext || ""), [F, k] = y(!1), [C, v] = y(null), [w, p] = y(null), n = g(null), N = `link_${P()}`, t = `text_${P()}`, r = () => {
81
82
  window.open(me(f), "_blank");
@@ -205,7 +206,7 @@ const Ee = "_linkform_ki2qx_1", Re = "_linkform__footer_ki2qx_12", T = {
205
206
  )
206
207
  ] })
207
208
  ] });
208
- }), Ct = V(({ isActive: _ }, u) => {
209
+ }), yt = V(({ isActive: _ }, u) => {
209
210
  const a = j(), [o] = ee(), { flyout: l, showFlyout: f, hideFlyout: m, isVisible: s } = Ne(), h = g(void 0), F = g(null), k = g(!1), C = g(s), v = () => {
210
211
  const t = F.current?.getBoundingClientRect();
211
212
  !k.current && t && f({ position: { top: t.bottom, left: t.left }, ...N });
@@ -297,10 +298,10 @@ const Ee = "_linkform_ki2qx_1", Re = "_linkform__footer_ki2qx_12", T = {
297
298
  ] }) });
298
299
  });
299
300
  export {
300
- Ft as A,
301
+ Ct as A,
301
302
  Q as M,
302
- Ct as T,
303
+ yt as T,
303
304
  ge as a,
304
305
  Se as b
305
306
  };
306
- //# sourceMappingURL=TablePlugin-DaKDRL4G.js.map
307
+ //# sourceMappingURL=TablePlugin-4Zj0xZie.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TablePlugin-DaKDRL4G.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx","../src/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.tsx","../src/components/RteEditor/Plugins/TablePlugin/AddTableFrom.tsx","../src/components/RteEditor/Plugins/TablePlugin/TablePlugin.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n label: string;\n clearTrigger?: string;\n onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n return (\n <header className={styles['multi-select__header']}>\n <Label htmlFor=\"multi-select-list\">{label}</Label>\n {clearTrigger && (\n <Button variant={'blank'} onClick={onClear}>\n {clearTrigger}\n </Button>\n )}\n </header>\n );\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\n\nexport interface MultiSelectProps {\n /** `true` if the container should scroll on overflow; otherwise, `false` to resize the container to its contents. The default is `true`. */\n scrollable?: boolean;\n /** `true` to disable the border around the container; otherwise, `false`. The default is `false`. */\n noBorder?: boolean;\n /** The header contents. */\n header?: ReactNode;\n}\n\n/** Represents a component to list a number of checkboxes. */\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n <>\n {header}\n <div\n className={clsx(styles['multi-select'], {\n [styles['multi-select--no-border']]: noBorder,\n })}\n >\n <ul\n className={clsx(styles['multi-select__list'], {\n [styles['multi-select__list--scrollable']]: scrollable,\n })}\n id=\"multi-select-list\"\n >\n {children}\n </ul>\n </div>\n </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n","import { useState, forwardRef, useImperativeHandle, useRef, useId } from 'react';\n\nimport type { ChangeEvent, JSX } from 'react';\nimport type { LinkType } from 'components/RteEditor/Plugins/LinkPlugin';\n\nimport styles from './AddLinkForm.module.css';\n\nimport { ensureHttps, validateUrlWithProtocol } from 'components/RteEditor/Plugins/LinkPlugin/helpers';\nimport { Button, FeedbackBox, FormField, Icon, InputField, Label } from 'components';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ninterface AddLinkFormProps {\n onCloseHandler: () => void;\n onSaveHandler: (url: string, linktext: string) => void;\n isLink: LinkType;\n}\n\nexport interface addLinkFormMethods {\n clearForm: () => void;\n focusFirstField: () => void;\n setDefaults: (url: string, linktext: string) => void;\n}\n\nexport const AddLinkForm = forwardRef(\n (\n { onCloseHandler, onSaveHandler, isLink = { active: false, url: '', linktext: '' } }: AddLinkFormProps,\n ref\n ): JSX.Element => {\n const t = useTranslation();\n const [url, setUrl] = useState<string>(isLink.url || '');\n const [linkText, setLinkText] = useState<string>(isLink.linktext || '');\n const [showLinktextField, setShowLinktextField] = useState<boolean>(false);\n const [urlError, setUrlError] = useState<string | null>(null);\n const [linkTextError, setLinkTextError] = useState<string | null>(null);\n const firstField = useRef<HTMLInputElement>(null);\n const linkId = `link_${useId()}`;\n const textId = `text_${useId()}`;\n\n const handleOpenUrl = () => {\n window.open(ensureHttps(url), '_blank');\n };\n\n const handleUrl = (event: ChangeEvent<HTMLInputElement>) => {\n setUrl(event.target.value);\n };\n\n const handleLinkText = (event: ChangeEvent<HTMLInputElement>) => {\n setLinkText(event.target.value);\n };\n\n const validateUrl = (url: string): boolean => {\n if (validateUrlWithProtocol(url) === false || url.trim() === '') {\n setUrlError(t.errortext.urlNotValid);\n return false;\n }\n setUrlError(null);\n return true;\n };\n\n const validateLinkText = (linkText: string): boolean => {\n if (linkText.trim() === '') {\n setLinkTextError(t.errortext.linkTextNotValid);\n return false;\n }\n setLinkTextError(null);\n return true;\n };\n\n const handleSave = () => {\n if (!validateUrl(url) || (showLinktextField && !validateLinkText(linkText))) {\n return;\n }\n\n onSaveHandler(url, linkText);\n resetForm();\n };\n\n const handleClose = () => {\n onCloseHandler();\n resetForm();\n };\n\n const resetForm = () => {\n setUrl('');\n setShowLinktextField(false);\n setUrlError(null);\n setLinkTextError(null);\n };\n\n const setDefaults = (url: string, linktext: string) => {\n setUrl(url);\n if (!linktext && !url) {\n setShowLinktextField(true);\n }\n };\n\n const focusFirstField = () => {\n if (firstField.current) {\n firstField.current.focus();\n }\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: resetForm,\n focusFirstField,\n setDefaults,\n }));\n\n return (\n <div className={styles['linkform']}>\n <FormField className={styles['linkform__input-field']}>\n <Label htmlFor={linkId}>{t.links.linkLabel}</Label>\n <div className={styles['linkform__input-url-wrapper']}>\n <InputField\n id={linkId}\n placeholder={t.links.linkPlaceholder}\n value={url}\n onChange={(event) => handleUrl(event)}\n onFocus={() => setUrlError(null)}\n ref={firstField}\n aria-label={t.aria.labels.linkField}\n />\n {url && (\n <button type=\"button\" onClick={handleOpenUrl} className={styles['linkform__open-url-button']}>\n <Icon name=\"ArrowTopRightOnSquare\" size={20} />\n </button>\n )}\n </div>\n {urlError && <FeedbackBox level=\"error\" feedback={urlError} />}\n </FormField>\n {showLinktextField && (\n <FormField className={styles['linkform__input-field']}>\n <Label htmlFor={textId}>{t.links.linkText}</Label>\n <InputField\n id={textId}\n value={linkText}\n onChange={(event) => handleLinkText(event)}\n onFocus={() => setLinkTextError(null)}\n aria-label={t.aria.labels.linkTextfield}\n />\n {linkTextError && <FeedbackBox level=\"error\" feedback={linkTextError} />}\n </FormField>\n )}\n <div className={styles['linkform__footer']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\n {t.common.cancel}\n </Button>\n <Button variant={'primary'} onClick={handleSave} aria-label={t.aria.labels.linkOkButton} type=\"button\">\n {t.links.addLink}\n </Button>\n </div>\n </div>\n );\n }\n);\n","import { useState, forwardRef, useImperativeHandle, useRef, useId, useEffect } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './AddTableFrom.module.css';\n\nimport { Button, FormField, InputField, Label } from 'components';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\ninterface AddTableFormProps {\n onCloseHandler: () => void;\n onSaveHandler: (nrfOfRows: number, nrOfColumns: number) => void;\n}\n\nexport interface addTableForm {\n clearForm: () => void;\n focusFirstField: () => void;\n}\n\nexport const AddTableForm = forwardRef(({ onCloseHandler, onSaveHandler }: AddTableFormProps, ref) => {\n const t = useTranslation();\n const [rowCount, setRowCount] = useState<number>();\n const [columnCount, setColumnCount] = useState<number>();\n const firstField = useRef<HTMLInputElement>(null);\n const rowId = `row_${useId()}`;\n const columnId = `column_${useId()}`;\n\n const handleDimentionChange = (event: ChangeEvent<HTMLInputElement>, type: string) => {\n const value = event.target.value;\n type === 'row' ? setRowCount(parseInt(value)) : setColumnCount(parseInt(value));\n };\n\n const handleSave = () => {\n if (rowCount !== undefined && columnCount !== undefined) {\n onSaveHandler(rowCount, columnCount);\n resetForm();\n }\n };\n\n const handleClose = () => {\n onCloseHandler();\n resetForm();\n };\n\n const resetForm = () => {\n setRowCount(undefined);\n setColumnCount(undefined);\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: resetForm,\n focusFirstField: () => firstField.current?.focus(),\n }));\n\n useEffect(() => {\n const handleResizeScroll = () => {\n handleClose();\n };\n\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['tableform']}>\n <FormField className={styles['tableform__input-field']}>\n <Label htmlFor={rowId}>{t.table.nrofRows}</Label>\n <InputField\n id={rowId}\n placeholder={t.table.nrofRowsPlaceholder}\n value={rowCount ? rowCount : ''}\n onChange={(event) => handleDimentionChange(event, 'row')}\n aria-label={t.aria.labels.tableRowfield}\n ref={firstField}\n />\n </FormField>\n <FormField className={styles['tableform__input-field']}>\n <Label htmlFor={columnId}>{t.table.nrofColumns}</Label>\n <InputField\n id={columnId}\n placeholder={t.table.nrofColumnsPlaceholder}\n value={columnCount ? columnCount : ''}\n onChange={(event) => handleDimentionChange(event, 'column')}\n aria-label={t.aria.labels.tableColumnfield}\n />\n </FormField>\n <div className={styles['tableform__footer']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel}>\n {t.common.cancel}\n </Button>\n <Button\n variant={'primary'}\n onClick={handleSave}\n disabled={!rowCount || !columnCount}\n aria-label={t.aria.labels.tableOkButton}\n >\n {t.common.add}\n </Button>\n </div>\n </div>\n );\n});\n","import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $getTableCellNodeFromLexicalNode, $isTableCellNode, TableCellNode } from '@lexical/table';\nimport {\n $getSelection,\n $isRangeSelection,\n $getRoot,\n KEY_DOWN_COMMAND,\n COMMAND_PRIORITY_EDITOR,\n $isNodeSelection,\n} from 'lexical';\nimport { $getNearestNodeOfType } from '@lexical/utils';\nimport { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';\n\nimport type { TableNode } from '@lexical/table';\nimport type { JSX } from 'react';\nimport type { TextNode } from 'lexical';\nimport type { addTableForm } from './AddTableFrom';\nimport type { Actions } from './TableCellContextMenu';\n\nimport { AddTableForm } from './AddTableFrom';\nimport {\n createTable,\n DEFAULT_COL_WIDTH,\n DEFAULT_EDITOR_WIDTH,\n deleteColumn,\n deleteRow,\n deleteTable,\n getEditorContentWidth,\n getEditorParrentCellWidth,\n insertColumn,\n insertRow,\n PREVENT_OPEN_DELAY,\n} from './helpers';\n\nimport { $createTableWrapperNode } from 'components/RteEditor/nodes';\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ninterface TablePluginProps {\n isActive: boolean;\n}\nexport interface TableMutation {\n mutateTable: (type: Actions) => void;\n}\n\nexport const TablePlugin = forwardRef(({ isActive }: TablePluginProps, ref): JSX.Element => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n const addTableForm = useRef<addTableForm>(undefined);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const preventOpen = useRef(false);\n const isVisibleRef = useRef(isVisible);\n\n const openFlyout = () => {\n const rect = buttonRef.current?.getBoundingClientRect();\n if (!preventOpen.current && rect) {\n showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n }\n };\n\n const closeFlyout = () => {\n hideFlyout();\n };\n\n const insertTable = (nrOfRows: number, nrOfColumns: number) => {\n editor.update(() => {\n const selection = $getSelection();\n const tableNode = createTable(nrOfRows, nrOfColumns);\n\n const anchorNode =\n ($isRangeSelection(selection) && selection.anchor.getNode()) ||\n ($isNodeSelection(selection) && selection.getNodes()[0]) ||\n null;\n\n const willBeNested = anchorNode ? $getNearestNodeOfType(anchorNode, TableCellNode) : null;\n\n const availibleWidth = willBeNested\n ? getEditorParrentCellWidth(willBeNested, nrOfColumns, editor)\n : getEditorContentWidth(editor) || DEFAULT_EDITOR_WIDTH;\n\n const perCol = Math.max(DEFAULT_COL_WIDTH, Math.floor(availibleWidth / Math.max(1, nrOfColumns)));\n\n const colWidths = Array.from({ length: nrOfColumns }, () => perCol);\n\n (tableNode as TableNode).setColWidths(colWidths);\n\n const tableWrapper = $createTableWrapperNode();\n tableWrapper.append(tableNode);\n if ($isRangeSelection(selection)) {\n selection.insertNodes([tableWrapper]);\n } else {\n $getRoot().append(tableWrapper);\n }\n const firstDescendant = tableWrapper.getFirstDescendant();\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n });\n\n closeFlyout();\n };\n\n const mutateTable = (action: Actions) => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode();\n const currentNode = $getTableCellNodeFromLexicalNode(anchorNode);\n\n if ($isTableCellNode(currentNode)) {\n switch (action) {\n case 'insertRowAbove':\n case 'insertRowBelow':\n insertRow(currentNode, action);\n break;\n case 'deleteRow':\n deleteRow(currentNode);\n break;\n case 'insertColumnLeft':\n case 'insertColumnRight':\n insertColumn(currentNode, action);\n break;\n case 'deleteColumn':\n deleteColumn(currentNode);\n break;\n case 'deleteTable':\n deleteTable(currentNode);\n break;\n }\n }\n }\n });\n };\n\n const flyoutOptions = {\n children: (\n <AddTableForm\n onCloseHandler={closeFlyout}\n onSaveHandler={(rows, columns) => insertTable(rows, columns)}\n ref={addTableForm}\n />\n ),\n };\n\n useEffect(() => {\n if (!isVisible) {\n addTableForm.current?.clearForm();\n setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n } else {\n preventOpen.current = true;\n addTableForm.current?.focusFirstField();\n }\n }, [addTableForm, isVisible]);\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit9') {\n event.preventDefault();\n openFlyout();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n return () => {\n removeKeyboardShortcut();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n isVisibleRef.current = isVisible;\n }, [isVisible]);\n\n useEffect(() => {\n const removeKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isVisibleRef.current) {\n event.preventDefault();\n event.stopPropagation();\n closeFlyout();\n }\n };\n\n document.addEventListener('keydown', removeKeydown, { capture: true });\n\n return () => {\n document.removeEventListener('keydown', removeKeydown);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useImperativeHandle(ref, () => ({\n mutateTable,\n }));\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n <button\n onClick={openFlyout}\n title={t.table.tableTooltip}\n className={clsx(styles['editor__toolbar-button'], isActive && styles[`editor__toolbar-button--active`])}\n aria-label={t.aria.labels.table}\n aria-keyshortcuts={t.aria.keyshortcuts.table}\n ref={buttonRef}\n type=\"button\"\n >\n <Icon name=\"Table\" size={24} />\n </button>\n {flyout}\n </div>\n </div>\n );\n});\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem","AddLinkForm","forwardRef","onCloseHandler","onSaveHandler","isLink","ref","t","useTranslation","url","setUrl","useState","linkText","setLinkText","showLinktextField","setShowLinktextField","urlError","setUrlError","linkTextError","setLinkTextError","firstField","useRef","linkId","useId","textId","handleOpenUrl","ensureHttps","handleUrl","event","handleLinkText","validateUrl","validateUrlWithProtocol","validateLinkText","handleSave","resetForm","handleClose","setDefaults","linktext","focusFirstField","useImperativeHandle","FormField","InputField","Icon","FeedbackBox","AddTableForm","rowCount","setRowCount","columnCount","setColumnCount","rowId","columnId","handleDimentionChange","type","value","useEffect","handleResizeScroll","setScrollableContainers","removeScrollableContainers","TablePlugin","isActive","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addTableForm","buttonRef","preventOpen","isVisibleRef","openFlyout","rect","flyoutOptions","closeFlyout","insertTable","nrOfRows","nrOfColumns","selection","$getSelection","tableNode","createTable","anchorNode","$isRangeSelection","$isNodeSelection","willBeNested","$getNearestNodeOfType","TableCellNode","availibleWidth","getEditorParrentCellWidth","getEditorContentWidth","DEFAULT_EDITOR_WIDTH","perCol","DEFAULT_COL_WIDTH","colWidths","tableWrapper","$createTableWrapperNode","$getRoot","firstDescendant","mutateTable","action","currentNode","$getTableCellNodeFromLexicalNode","$isTableCellNode","insertRow","deleteRow","insertColumn","deleteColumn","deleteTable","rows","columns","PREVENT_OPEN_DELAY","removeKeyboardShortcut","KEY_DOWN_COMMAND","COMMAND_PRIORITY_EDITOR","removeKeydown"],"mappings":"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"}
1
+ {"version":3,"file":"TablePlugin-4Zj0xZie.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx","../src/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.tsx","../src/components/RteEditor/Plugins/TablePlugin/AddTableFrom.tsx","../src/components/RteEditor/Plugins/TablePlugin/TablePlugin.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n label: string;\n clearTrigger?: string;\n onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n return (\n <header className={styles['multi-select__header']}>\n <Label htmlFor=\"multi-select-list\">{label}</Label>\n {clearTrigger && (\n <Button variant={'blank'} onClick={onClear}>\n {clearTrigger}\n </Button>\n )}\n </header>\n );\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\n\nexport interface MultiSelectProps {\n /** `true` if the container should scroll on overflow; otherwise, `false` to resize the container to its contents. The default is `true`. */\n scrollable?: boolean;\n /** `true` to disable the border around the container; otherwise, `false`. The default is `false`. */\n noBorder?: boolean;\n /** The header contents. */\n header?: ReactNode;\n}\n\n/** Represents a component to list a number of checkboxes. */\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n <>\n {header}\n <div\n className={clsx(styles['multi-select'], {\n [styles['multi-select--no-border']]: noBorder,\n })}\n >\n <ul\n className={clsx(styles['multi-select__list'], {\n [styles['multi-select__list--scrollable']]: scrollable,\n })}\n id=\"multi-select-list\"\n >\n {children}\n </ul>\n </div>\n </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n","import { useState, forwardRef, useImperativeHandle, useRef, useId } from 'react';\n\nimport type { ChangeEvent, JSX } from 'react';\nimport type { LinkType } from 'components/RteEditor/Plugins/LinkPlugin';\n\nimport styles from './AddLinkForm.module.css';\n\nimport { ensureHttps, validateUrlWithProtocol } from 'components/RteEditor/Plugins/LinkPlugin/helpers';\nimport { Button, FeedbackBox, FormField, Icon, InputField, Label } from 'components';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ninterface AddLinkFormProps {\n onCloseHandler: () => void;\n onSaveHandler: (url: string, linktext: string) => void;\n isLink: LinkType;\n}\n\nexport interface addLinkFormMethods {\n clearForm: () => void;\n focusFirstField: () => void;\n setDefaults: (url: string, linktext: string) => void;\n}\n\nexport const AddLinkForm = forwardRef(\n (\n { onCloseHandler, onSaveHandler, isLink = { active: false, url: '', linktext: '' } }: AddLinkFormProps,\n ref\n ): JSX.Element => {\n const t = useTranslation();\n const [url, setUrl] = useState<string>(isLink.url || '');\n const [linkText, setLinkText] = useState<string>(isLink.linktext || '');\n const [showLinktextField, setShowLinktextField] = useState<boolean>(false);\n const [urlError, setUrlError] = useState<string | null>(null);\n const [linkTextError, setLinkTextError] = useState<string | null>(null);\n const firstField = useRef<HTMLInputElement>(null);\n const linkId = `link_${useId()}`;\n const textId = `text_${useId()}`;\n\n const handleOpenUrl = () => {\n window.open(ensureHttps(url), '_blank');\n };\n\n const handleUrl = (event: ChangeEvent<HTMLInputElement>) => {\n setUrl(event.target.value);\n };\n\n const handleLinkText = (event: ChangeEvent<HTMLInputElement>) => {\n setLinkText(event.target.value);\n };\n\n const validateUrl = (url: string): boolean => {\n if (validateUrlWithProtocol(url) === false || url.trim() === '') {\n setUrlError(t.errortext.urlNotValid);\n return false;\n }\n setUrlError(null);\n return true;\n };\n\n const validateLinkText = (linkText: string): boolean => {\n if (linkText.trim() === '') {\n setLinkTextError(t.errortext.linkTextNotValid);\n return false;\n }\n setLinkTextError(null);\n return true;\n };\n\n const handleSave = () => {\n if (!validateUrl(url) || (showLinktextField && !validateLinkText(linkText))) {\n return;\n }\n\n onSaveHandler(url, linkText);\n resetForm();\n };\n\n const handleClose = () => {\n onCloseHandler();\n resetForm();\n };\n\n const resetForm = () => {\n setUrl('');\n setShowLinktextField(false);\n setUrlError(null);\n setLinkTextError(null);\n };\n\n const setDefaults = (url: string, linktext: string) => {\n setUrl(url);\n if (!linktext && !url) {\n setShowLinktextField(true);\n }\n };\n\n const focusFirstField = () => {\n if (firstField.current) {\n firstField.current.focus();\n }\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: resetForm,\n focusFirstField,\n setDefaults,\n }));\n\n return (\n <div className={styles['linkform']}>\n <FormField className={styles['linkform__input-field']}>\n <Label htmlFor={linkId}>{t.links.linkLabel}</Label>\n <div className={styles['linkform__input-url-wrapper']}>\n <InputField\n id={linkId}\n placeholder={t.links.linkPlaceholder}\n value={url}\n onChange={(event) => handleUrl(event)}\n onFocus={() => setUrlError(null)}\n ref={firstField}\n aria-label={t.aria.labels.linkField}\n />\n {url && (\n <button type=\"button\" onClick={handleOpenUrl} className={styles['linkform__open-url-button']}>\n <Icon name=\"ArrowTopRightOnSquare\" size={20} />\n </button>\n )}\n </div>\n {urlError && <FeedbackBox level=\"error\" feedback={urlError} />}\n </FormField>\n {showLinktextField && (\n <FormField className={styles['linkform__input-field']}>\n <Label htmlFor={textId}>{t.links.linkText}</Label>\n <InputField\n id={textId}\n value={linkText}\n onChange={(event) => handleLinkText(event)}\n onFocus={() => setLinkTextError(null)}\n aria-label={t.aria.labels.linkTextfield}\n />\n {linkTextError && <FeedbackBox level=\"error\" feedback={linkTextError} />}\n </FormField>\n )}\n <div className={styles['linkform__footer']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\n {t.common.cancel}\n </Button>\n <Button variant={'primary'} onClick={handleSave} aria-label={t.aria.labels.linkOkButton} type=\"button\">\n {t.links.addLink}\n </Button>\n </div>\n </div>\n );\n }\n);\n","import { useState, forwardRef, useImperativeHandle, useRef, useId, useEffect } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './AddTableFrom.module.css';\n\nimport { Button, FormField, InputField, Label } from 'components';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\ninterface AddTableFormProps {\n onCloseHandler: () => void;\n onSaveHandler: (nrfOfRows: number, nrOfColumns: number) => void;\n}\n\nexport interface addTableForm {\n clearForm: () => void;\n focusFirstField: () => void;\n}\n\nexport const AddTableForm = forwardRef(({ onCloseHandler, onSaveHandler }: AddTableFormProps, ref) => {\n const t = useTranslation();\n const [rowCount, setRowCount] = useState<number>();\n const [columnCount, setColumnCount] = useState<number>();\n const firstField = useRef<HTMLInputElement>(null);\n const rowId = `row_${useId()}`;\n const columnId = `column_${useId()}`;\n\n const handleDimentionChange = (event: ChangeEvent<HTMLInputElement>, type: string) => {\n const value = event.target.value;\n type === 'row' ? setRowCount(parseInt(value)) : setColumnCount(parseInt(value));\n };\n\n const handleSave = () => {\n if (rowCount !== undefined && columnCount !== undefined) {\n onSaveHandler(rowCount, columnCount);\n resetForm();\n }\n };\n\n const handleClose = () => {\n onCloseHandler();\n resetForm();\n };\n\n const resetForm = () => {\n setRowCount(undefined);\n setColumnCount(undefined);\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: resetForm,\n focusFirstField: () => firstField.current?.focus(),\n }));\n\n useEffect(() => {\n const handleResizeScroll = () => {\n handleClose();\n };\n\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['tableform']}>\n <FormField className={styles['tableform__input-field']}>\n <Label htmlFor={rowId}>{t.table.nrofRows}</Label>\n <InputField\n id={rowId}\n placeholder={t.table.nrofRowsPlaceholder}\n value={rowCount ? rowCount : ''}\n onChange={(event) => handleDimentionChange(event, 'row')}\n aria-label={t.aria.labels.tableRowfield}\n ref={firstField}\n />\n </FormField>\n <FormField className={styles['tableform__input-field']}>\n <Label htmlFor={columnId}>{t.table.nrofColumns}</Label>\n <InputField\n id={columnId}\n placeholder={t.table.nrofColumnsPlaceholder}\n value={columnCount ? columnCount : ''}\n onChange={(event) => handleDimentionChange(event, 'column')}\n aria-label={t.aria.labels.tableColumnfield}\n />\n </FormField>\n <div className={styles['tableform__footer']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel}>\n {t.common.cancel}\n </Button>\n <Button\n variant={'primary'}\n onClick={handleSave}\n disabled={!rowCount || !columnCount}\n aria-label={t.aria.labels.tableOkButton}\n >\n {t.common.add}\n </Button>\n </div>\n </div>\n );\n});\n","import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $getTableCellNodeFromLexicalNode, $isTableCellNode, TableCellNode } from '@lexical/table';\nimport {\n $getSelection,\n $isRangeSelection,\n $getRoot,\n KEY_DOWN_COMMAND,\n COMMAND_PRIORITY_EDITOR,\n $isNodeSelection,\n} from 'lexical';\nimport { $getNearestNodeOfType } from '@lexical/utils';\nimport { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';\n\nimport type { TableNode } from '@lexical/table';\nimport type { JSX } from 'react';\nimport type { TextNode } from 'lexical';\nimport type { addTableForm } from './AddTableFrom';\nimport type { Actions } from './TableCellContextMenu';\n\nimport { AddTableForm } from './AddTableFrom';\nimport {\n createTable,\n DEFAULT_COL_WIDTH,\n DEFAULT_EDITOR_WIDTH,\n deleteColumn,\n deleteRow,\n deleteTable,\n getEditorContentWidth,\n getEditorParrentCellWidth,\n insertColumn,\n insertRow,\n PREVENT_OPEN_DELAY,\n} from './helpers';\n\nimport { $createTableWrapperNode } from 'components/RteEditor/nodes';\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ninterface TablePluginProps {\n isActive: boolean;\n}\nexport interface TableMutation {\n mutateTable: (type: Actions) => void;\n}\n\nexport const TablePlugin = forwardRef(({ isActive }: TablePluginProps, ref): JSX.Element => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n const addTableForm = useRef<addTableForm>(undefined);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const preventOpen = useRef(false);\n const isVisibleRef = useRef(isVisible);\n\n const openFlyout = () => {\n const rect = buttonRef.current?.getBoundingClientRect();\n if (!preventOpen.current && rect) {\n showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n }\n };\n\n const closeFlyout = () => {\n hideFlyout();\n };\n\n const insertTable = (nrOfRows: number, nrOfColumns: number) => {\n editor.update(() => {\n const selection = $getSelection();\n const tableNode = createTable(nrOfRows, nrOfColumns);\n\n const anchorNode =\n ($isRangeSelection(selection) && selection.anchor.getNode()) ||\n ($isNodeSelection(selection) && selection.getNodes()[0]) ||\n null;\n\n const willBeNested = anchorNode ? $getNearestNodeOfType(anchorNode, TableCellNode) : null;\n\n const availibleWidth = willBeNested\n ? getEditorParrentCellWidth(willBeNested, nrOfColumns, editor)\n : getEditorContentWidth(editor) || DEFAULT_EDITOR_WIDTH;\n\n const perCol = Math.max(DEFAULT_COL_WIDTH, Math.floor(availibleWidth / Math.max(1, nrOfColumns)));\n\n const colWidths = Array.from({ length: nrOfColumns }, () => perCol);\n\n (tableNode as TableNode).setColWidths(colWidths);\n\n const tableWrapper = $createTableWrapperNode();\n tableWrapper.append(tableNode);\n if ($isRangeSelection(selection)) {\n selection.insertNodes([tableWrapper]);\n } else {\n $getRoot().append(tableWrapper);\n }\n const firstDescendant = tableWrapper.getFirstDescendant();\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n });\n\n closeFlyout();\n };\n\n const mutateTable = (action: Actions) => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode();\n const currentNode = $getTableCellNodeFromLexicalNode(anchorNode);\n\n if ($isTableCellNode(currentNode)) {\n switch (action) {\n case 'insertRowAbove':\n case 'insertRowBelow':\n insertRow(currentNode, action);\n break;\n case 'deleteRow':\n deleteRow(currentNode);\n break;\n case 'insertColumnLeft':\n case 'insertColumnRight':\n insertColumn(currentNode, action);\n break;\n case 'deleteColumn':\n deleteColumn(currentNode);\n break;\n case 'deleteTable':\n deleteTable(currentNode);\n break;\n }\n }\n }\n });\n };\n\n const flyoutOptions = {\n children: (\n <AddTableForm\n onCloseHandler={closeFlyout}\n onSaveHandler={(rows, columns) => insertTable(rows, columns)}\n ref={addTableForm}\n />\n ),\n };\n\n useEffect(() => {\n if (!isVisible) {\n addTableForm.current?.clearForm();\n setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n } else {\n preventOpen.current = true;\n addTableForm.current?.focusFirstField();\n }\n }, [addTableForm, isVisible]);\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit9') {\n event.preventDefault();\n openFlyout();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n return () => {\n removeKeyboardShortcut();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n isVisibleRef.current = isVisible;\n }, [isVisible]);\n\n useEffect(() => {\n const removeKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isVisibleRef.current) {\n event.preventDefault();\n event.stopPropagation();\n closeFlyout();\n }\n };\n\n document.addEventListener('keydown', removeKeydown, { capture: true });\n\n return () => {\n document.removeEventListener('keydown', removeKeydown);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useImperativeHandle(ref, () => ({\n mutateTable,\n }));\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n <button\n onClick={openFlyout}\n title={t.table.tableTooltip}\n className={clsx(styles['editor__toolbar-button'], isActive && styles[`editor__toolbar-button--active`])}\n aria-label={t.aria.labels.table}\n aria-keyshortcuts={t.aria.keyshortcuts.table}\n ref={buttonRef}\n type=\"button\"\n >\n <Icon name=\"Table\" size={24} />\n </button>\n {flyout}\n </div>\n </div>\n );\n});\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem","AddLinkForm","forwardRef","onCloseHandler","onSaveHandler","isLink","ref","t","useTranslation","url","setUrl","useState","linkText","setLinkText","showLinktextField","setShowLinktextField","urlError","setUrlError","linkTextError","setLinkTextError","firstField","useRef","linkId","useId","textId","handleOpenUrl","ensureHttps","handleUrl","event","handleLinkText","validateUrl","validateUrlWithProtocol","validateLinkText","handleSave","resetForm","handleClose","setDefaults","linktext","focusFirstField","useImperativeHandle","FormField","InputField","Icon","FeedbackBox","AddTableForm","rowCount","setRowCount","columnCount","setColumnCount","rowId","columnId","handleDimentionChange","type","value","useEffect","handleResizeScroll","setScrollableContainers","removeScrollableContainers","TablePlugin","isActive","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addTableForm","buttonRef","preventOpen","isVisibleRef","openFlyout","rect","flyoutOptions","closeFlyout","insertTable","nrOfRows","nrOfColumns","selection","$getSelection","tableNode","createTable","anchorNode","$isRangeSelection","$isNodeSelection","willBeNested","$getNearestNodeOfType","TableCellNode","availibleWidth","getEditorParrentCellWidth","getEditorContentWidth","DEFAULT_EDITOR_WIDTH","perCol","DEFAULT_COL_WIDTH","colWidths","tableWrapper","$createTableWrapperNode","$getRoot","firstDescendant","mutateTable","action","currentNode","$getTableCellNodeFromLexicalNode","$isTableCellNode","insertRow","deleteRow","insertColumn","deleteColumn","deleteTable","rows","columns","PREVENT_OPEN_DELAY","removeKeyboardShortcut","KEY_DOWN_COMMAND","COMMAND_PRIORITY_EDITOR","removeKeydown"],"mappings":"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"}
@@ -1 +1 @@
1
- ._checkbox-button-bar__container_5gd9n_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_5gd9n_5{align-items:baseline;flex-direction:row;gap:1rem}._checkbox-button-bar__container--label-top_5gd9n_10{align-items:flex-start;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container_5gd9n_15{display:flex;flex-direction:column;gap:.5rem}._checkbox-button-bar__row_5gd9n_15{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem}._checkbox-button-bar__row--not-validated_5gd9n_30{border-color:var(--new-color-red-600)}._checkbox-button-bar__footer_5gd9n_33{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}
1
+ ._checkbox-button-bar__container_u8hmc_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_u8hmc_6{align-items:baseline;flex-direction:row;gap:1rem}._checkbox-button-bar__container--label-top_u8hmc_12{align-items:flex-start;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container_u8hmc_18{display:flex;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container--segmented_u8hmc_24{flex-direction:row}._checkbox-button-bar__row_u8hmc_18{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem}._checkbox-button-bar__row--not-validated_u8hmc_39{border-color:var(--new-color-red-600)}._checkbox-button-bar__footer_u8hmc_43{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}
@@ -0,0 +1 @@
1
+ ._search-field__input-wrapper_5fm8z_1{display:flex;justify-content:flex-end;position:relative;width:100%}._search-field__input-field_5fm8z_8{appearance:none;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.25rem;color:var(--new-color-uva-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 2.75rem 0 1rem;text-align:inherit;width:100%}._search-field__input-field_5fm8z_8::placeholder{color:var(--new-color-grey-700);font-size:inherit;opacity:1}._search-field__input-field_5fm8z_8:disabled{color:var(--new-color-grey-500)}._search-field__input-field_5fm8z_8:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._search-field__icon_5fm8z_39{color:var(--new-color-grey-700);position:absolute;right:.6rem;top:50%;transform:translateY(-50%)}._search-field__result-wrapper_5fm8z_47{background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.25rem;display:flex;flex-direction:column;left:0;min-width:100%;overflow:hidden;position:absolute;top:calc(100% + .25rem);z-index:10}._search-field__input-container_5fm8z_61{position:relative;width:100%}._search-field__input-container--hidden_5fm8z_66{display:none}._search-field__input-container--visible_5fm8z_70{display:block;max-width:20rem;position:absolute;right:0;top:0;width:20rem;z-index:10}._search-field__compact-button_5fm8z_80{align-items:center;appearance:none;background-color:transparent;border:1px solid var(--new-color-grey-700);border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;height:2.75rem;justify-content:center;margin:0;text-align:inherit;width:2.75rem}._search-field__compact-icon_5fm8z_96{color:var(--new-color-grey-700)}._search-field__result-list_5fm8z_100{border-bottom:1px solid var(--new-color-grey-700);max-height:10rem;overflow-y:auto}._search-field__result-list_5fm8z_100:empty{display:none}._search-field__result-item_5fm8z_110{font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}._search-field__result-item_5fm8z_110:focus-visible{background-color:var(--new-color-grey-300);outline:none}._search-field__result-item_5fm8z_110:hover,._search-field__result-item_5fm8z_110:focus-visible{background-color:var(--new-color-grey-300);cursor:pointer}._search-field__result-info_5fm8z_128{background-color:var(--new-color-uva-white);border-radius:0 0 .25rem .25rem;border-top:1px solid var(--new-color-grey-700);font-size:inherit;max-width:100%;padding:.5rem 1rem;white-space:nowrap}
@@ -1 +1 @@
1
- ._select-listbox-container_4xtnu_1{position:relative}._select-listbox__wrapper_4xtnu_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_4xtnu_15{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);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_4xtnu_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_4xtnu_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_4xtnu_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_4xtnu_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_4xtnu_52{right:0}._select-listbox-trigger--bold_4xtnu_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_4xtnu_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_4xtnu_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_4xtnu_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_4xtnu_75{border-color:var(--new-color-uva-black)}._select-listbox-trigger_4xtnu_15:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._select-listbox-trigger_4xtnu_15:focus-visible,._select-listbox-trigger_4xtnu_15:hover{background-color:var(--new-color-grey-300)}._select-listbox-trigger--noborder_4xtnu_89{border:none}._select-listbox-trigger--pillLeft_4xtnu_65+._select-listbox__wrapper_4xtnu_5{left:1rem}._select-listbox-trigger--pillRight_4xtnu_70+._select-listbox__wrapper--align-right_4xtnu_52{right:1rem}._select-listbox-trigger-icon_4xtnu_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_4xtnu_106{transform:rotate(180deg)}._select-listbox_4xtnu_1{background-color:var(--new-color-uva-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_4xtnu_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_4xtnu_133,._select-listbox-option_4xtnu_120:hover{background-color:var(--new-color-grey-300);box-shadow:0 0 0 1px var(--new-color-uva-white)}._select-listbox-option_4xtnu_120[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_4xtnu_143{background-color:var(--new-color-grey-400);height:1px;margin:1px -.25rem}
1
+ ._select-listbox-container_xfwty_1{position:relative}._select-listbox__wrapper_xfwty_5{border-radius:.25rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_xfwty_15{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.25rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_xfwty_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_xfwty_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_xfwty_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_xfwty_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_xfwty_52{right:0}._select-listbox-trigger--bold_xfwty_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_xfwty_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_xfwty_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_xfwty_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_xfwty_75{border-color:var(--new-color-uva-black)}._select-listbox-trigger--roundedLeft_xfwty_79{border-radius:.25rem 0 0 .25rem}._select-listbox-trigger--roundedRight_xfwty_83{border-radius:0 .25rem .25rem 0}._select-listbox-trigger_xfwty_15:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._select-listbox-trigger_xfwty_15:focus-visible,._select-listbox-trigger_xfwty_15:hover{background-color:var(--new-color-grey-300)}._select-listbox-trigger--noborder_xfwty_97{border:none}._select-listbox-trigger--pillLeft_xfwty_65+._select-listbox__wrapper_xfwty_5{left:1rem}._select-listbox-trigger--pillRight_xfwty_70+._select-listbox__wrapper--align-right_xfwty_52{right:1rem}._select-listbox-trigger-icon_xfwty_109{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_xfwty_114{transform:rotate(180deg)}._select-listbox_xfwty_1{background-color:var(--new-color-uva-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_xfwty_128{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_xfwty_141,._select-listbox-option_xfwty_128:hover{background-color:var(--new-color-grey-300);box-shadow:0 0 0 1px var(--new-color-uva-white)}._select-listbox-option_xfwty_128[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_xfwty_151{background-color:var(--new-color-grey-400);height:1px;margin:1px -.25rem}
@@ -1,5 +1,5 @@
1
1
  import { jsx as t, jsxs as a, Fragment as s } from "react/jsx-runtime";
2
- import { l } from "../../index-BamlKH-k.js";
2
+ import { l } from "../../index-DvUwfXNb.js";
3
3
  import { Button as n } from "./Button.js";
4
4
  const c = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
5
5
  title: "Atoms/Buttons/Button",
@@ -1,5 +1,5 @@
1
1
  import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
2
- import { l as s } from "../../index-BamlKH-k.js";
2
+ import { l as s } from "../../index-DvUwfXNb.js";
3
3
  import { BrowserRouter as c } from "react-router";
4
4
  import { LinkButton as e } from "./LinkButton.js";
5
5
  const d = `
@@ -1,5 +1,5 @@
1
1
  import { jsx as e, jsxs as l, Fragment as s } from "react/jsx-runtime";
2
- import { l as c } from "../../index-BamlKH-k.js";
2
+ import { l as c } from "../../index-DvUwfXNb.js";
3
3
  import { MenuButton as n } from "./MenuButton.js";
4
4
  const d = `
5
5
  // Has all LabelHTMLAttributes props available except "className" and "style"
@@ -1,5 +1,5 @@
1
1
  import { jsxs as g, jsx as o } from "react/jsx-runtime";
2
- import { l as e } from "../../index-BamlKH-k.js";
2
+ import { l as e } from "../../index-DvUwfXNb.js";
3
3
  import { Checkbox as n } from "./Checkbox.js";
4
4
  import { FormField as t } from "../FormField/FormField.js";
5
5
  import { Label as i } from "../Label/Label.js";
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  type CheckboxProps = {
3
- label: string;
3
+ label: string | ReactNode;
4
4
  value: string;
5
5
  prefix?: string;
6
6
  tooltip?: ReactNode;
@@ -26,7 +26,9 @@ export interface CheckboxButtonBarProps {
26
26
  footerText?: string;
27
27
  /** disables all checkboxes in the bar */
28
28
  disableGroup?: boolean;
29
+ /** `true` to sepearte each button in their own bordered container */
30
+ segmented?: boolean;
29
31
  onSetValues: (value: string[]) => void;
30
32
  }
31
- export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidated, notValidatedText, actAsRadioButtonBar, footerText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
33
+ export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidated, notValidatedText, actAsRadioButtonBar, footerText, disableGroup, segmented, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
32
34
  export {};
@@ -1,78 +1,109 @@
1
- import { jsxs as k, jsx as c } from "react/jsx-runtime";
2
- import { useState as S } from "react";
3
- import { c as x } from "../../clsx-OuTLNxxd.js";
4
- import { Label as j } from "../Label/Label.js";
5
- import { FeedbackBox as y } from "../FeedbackBox/FeedbackBox.js";
6
- import { ControlsButton as F } from "../ControlsButton/ControlsButton.js";
7
- import '../../assets/CheckboxButtonBar.css';const t = {
8
- "checkbox-button-bar__container": "_checkbox-button-bar__container_5gd9n_1",
9
- "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_5gd9n_5",
10
- "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_5gd9n_10",
11
- "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_5gd9n_15",
12
- "checkbox-button-bar__row": "_checkbox-button-bar__row_5gd9n_15",
13
- "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_5gd9n_30",
14
- "checkbox-button-bar__footer": "_checkbox-button-bar__footer_5gd9n_33"
15
- }, E = ({
16
- checkboxes: d,
17
- defaultValues: r,
18
- label: a,
19
- labelPosition: u = "top",
20
- required: m = !1,
21
- notValidated: f = !1,
22
- notValidatedText: b = "",
23
- actAsRadioButtonBar: n = !1,
24
- footerText: l = "",
25
- disableGroup: p = !1,
26
- onSetValues: i
1
+ import { jsxs as y, jsx as t } from "react/jsx-runtime";
2
+ import { useState as j } from "react";
3
+ import { c as _ } from "../../clsx-OuTLNxxd.js";
4
+ import { Label as q } from "../Label/Label.js";
5
+ import { FeedbackBox as F } from "../FeedbackBox/FeedbackBox.js";
6
+ import { ControlsButton as N } from "../ControlsButton/ControlsButton.js";
7
+ import '../../assets/CheckboxButtonBar.css';const c = {
8
+ "checkbox-button-bar__container": "_checkbox-button-bar__container_u8hmc_1",
9
+ "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_u8hmc_6",
10
+ "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_u8hmc_12",
11
+ "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_u8hmc_18",
12
+ "checkbox-button-bar__row-container--segmented": "_checkbox-button-bar__row-container--segmented_u8hmc_24",
13
+ "checkbox-button-bar__row": "_checkbox-button-bar__row_u8hmc_18",
14
+ "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_u8hmc_39",
15
+ "checkbox-button-bar__footer": "_checkbox-button-bar__footer_u8hmc_43"
16
+ }, H = ({
17
+ checkboxes: k,
18
+ defaultValues: b,
19
+ label: m,
20
+ labelPosition: S = "top",
21
+ required: C = !1,
22
+ notValidated: x = !1,
23
+ notValidatedText: n = "",
24
+ actAsRadioButtonBar: a = !1,
25
+ footerText: d = "",
26
+ disableGroup: f = !1,
27
+ segmented: p = !1,
28
+ onSetValues: w
27
29
  }) => {
28
- const [h, s] = S(
29
- r && !n ? r.map(String) : r && n ? r.slice(0, 1) : []
30
- ), g = (e) => {
30
+ const [h, g] = j(
31
+ b && !a ? b.map(String) : b && a ? b.slice(0, 1) : []
32
+ ), v = (e) => {
31
33
  let o = h;
32
- n ? (s([e]), i([e])) : (o.includes(e) ? o = o.filter((_) => _ !== e) : o = [...o, e], s(o), i(o));
34
+ a ? (g([e]), w([e])) : (o.includes(e) ? o = o.filter((r) => r !== e) : o = [...o, e], g(o), w(o));
33
35
  };
34
- return /* @__PURE__ */ k(
36
+ return /* @__PURE__ */ y(
35
37
  "div",
36
38
  {
37
- className: x(
38
- t["checkbox-button-bar__container"],
39
- t[`checkbox-button-bar__container--label-${u}`]
39
+ className: _(
40
+ c["checkbox-button-bar__container"],
41
+ c[`checkbox-button-bar__container--label-${S}`]
40
42
  ),
41
43
  children: [
42
- a && /* @__PURE__ */ c(j, { htmlFor: "", required: m, children: a }),
43
- /* @__PURE__ */ k("div", { className: t["checkbox-button-bar__row-container"], children: [
44
- /* @__PURE__ */ c(
45
- "div",
46
- {
47
- className: x(t["checkbox-button-bar__row"], {
48
- [t["checkbox-button-bar__row--not-validated"]]: f || b
49
- }),
50
- children: d.map(({ label: e, value: o, prefix: _, tooltip: w, tooltipPosition: v, disabled: C }) => /* @__PURE__ */ c(
51
- F,
52
- {
53
- type: "checkbox",
54
- label: e,
55
- prefix: _,
56
- tooltip: w,
57
- tooltipPosition: v,
58
- forceSquared: !0,
59
- value: o,
60
- checked: h.includes(o),
61
- disabled: C || p,
62
- onSetValue: (N) => g(N.target.value)
63
- },
64
- `${o}`
65
- ))
66
- }
67
- ),
68
- l && /* @__PURE__ */ c("div", { className: t["checkbox-button-bar__footer"], children: l }),
69
- b !== "" && /* @__PURE__ */ c(y, { level: "error", feedback: b })
70
- ] })
44
+ m && /* @__PURE__ */ t(q, { htmlFor: "", required: C, children: m }),
45
+ /* @__PURE__ */ t(
46
+ "div",
47
+ {
48
+ className: _(c["checkbox-button-bar__row-container"], {
49
+ [c["checkbox-button-bar__row-container--segmented"]]: p
50
+ }),
51
+ children: p ? k.map(({ label: e, value: o, prefix: r, tooltip: l, tooltipPosition: i, disabled: u }) => /* @__PURE__ */ t(
52
+ "div",
53
+ {
54
+ className: _(c["checkbox-button-bar__row"], {
55
+ [c["checkbox-button-bar__row--not-validated"]]: x || n
56
+ }),
57
+ children: /* @__PURE__ */ t(
58
+ N,
59
+ {
60
+ type: "checkbox",
61
+ label: e,
62
+ prefix: r,
63
+ tooltip: l,
64
+ tooltipPosition: i,
65
+ forceSquared: !0,
66
+ value: o,
67
+ checked: h.includes(o),
68
+ disabled: u || f,
69
+ onSetValue: (s) => v(s.target.value)
70
+ }
71
+ )
72
+ },
73
+ o
74
+ )) : /* @__PURE__ */ t(
75
+ "div",
76
+ {
77
+ className: _(c["checkbox-button-bar__row"], {
78
+ [c["checkbox-button-bar__row--not-validated"]]: x || n
79
+ }),
80
+ children: k.map(({ label: e, value: o, prefix: r, tooltip: l, tooltipPosition: i, disabled: u }) => /* @__PURE__ */ t(
81
+ N,
82
+ {
83
+ type: "checkbox",
84
+ label: e,
85
+ prefix: r,
86
+ tooltip: l,
87
+ tooltipPosition: i,
88
+ forceSquared: !0,
89
+ value: o,
90
+ checked: h.includes(o),
91
+ disabled: u || f,
92
+ onSetValue: (s) => v(s.target.value)
93
+ },
94
+ o
95
+ ))
96
+ }
97
+ )
98
+ }
99
+ ),
100
+ d && /* @__PURE__ */ t("div", { className: c["checkbox-button-bar__footer"], children: d }),
101
+ n !== "" && /* @__PURE__ */ t(F, { level: "error", feedback: n })
71
102
  ]
72
103
  }
73
104
  );
74
105
  };
75
106
  export {
76
- E as CheckboxButtonBar
107
+ H as CheckboxButtonBar
77
108
  };
78
109
  //# sourceMappingURL=CheckboxButtonBar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n prefix?: string;\n tooltip?: ReactNode;\n tooltipPosition?: 'left' | 'center' | 'right';\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value, prefix and disabled*/\n checkboxes: CheckboxProps[];\n //** array with value(s) */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** returns an array with only one value */\n actAsRadioButtonBar?: boolean;\n /** optional footer text */\n footerText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(\n defaultValues && !actAsRadioButtonBar\n ? defaultValues.map(String)\n : defaultValues && actAsRadioButtonBar\n ? defaultValues.slice(0, 1)\n : []\n );\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (actAsRadioButtonBar) {\n setCurrentValues([value]);\n onSetValues([value]);\n } else {\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n }\n };\n\n return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['checkbox-button-bar__row-container']}>\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n <ControlsButton\n key={`${value}`}\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n tooltip={tooltip}\n tooltipPosition={tooltipPosition}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n {footerText && <div className={styles['checkbox-button-bar__footer']}>{footerText}</div>}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","tooltip","tooltipPosition","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;GA2CaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AAC5B,QAAM,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCZ,KAAiB,CAACM,IACdN,EAAc,IAAI,MAAM,IACxBA,KAAiBM,IACfN,EAAc,MAAM,GAAG,CAAC,IACxB,CAAA;AAAA,EAAC,GAGHa,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAEb,IAAIJ,KACFK,EAAiB,CAACG,CAAK,CAAC,GACxBL,EAAY,CAACK,CAAK,CAAC,MAEfC,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAE7CC,IAAS,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EAEtB;AAEA,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCjB,CAAa,EAAE;AAAA,MAAA;AAAA,MAGhE,UAAA;AAAA,QAAAD,KACC,gBAAAmB,EAACC,GAAA,EAAM,SAAQ,IAAG,UAAAlB,GACf,UAAAF,GACH;AAAA,QAEF,gBAAAgB,EAAC,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,gBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGf,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAa,GAAO,QAAAQ,GAAQ,SAAAC,GAAS,iBAAAC,GAAiB,UAAAC,EAAA,MACjE,gBAAAL;AAAA,gBAACM;AAAA,gBAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,OAAOzB;AAAAA,kBACP,QAAAqB;AAAA,kBACA,SAAAC;AAAA,kBACA,iBAAAC;AAAA,kBACA,cAAc;AAAA,kBACd,OAAAV;AAAA,kBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,kBACrC,UAAUW,KAAYjB;AAAA,kBACtB,YAAY,CAACmB,MAAUd,EAAac,EAAM,OAAO,KAAK;AAAA,gBAAA;AAAA,gBAVjD,GAAGb,CAAK;AAAA,cAAA,CAYhB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFP,KAAc,gBAAAa,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAAI,UAAAZ,GAAW;AAAA,UACjFF,MAAqB,MAAM,gBAAAe,EAACQ,KAAY,OAAM,SAAQ,UAAUvB,EAAA,CAAkB;AAAA,QAAA,EAAA,CACrF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1
+ {"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string | ReactNode;\n value: string;\n prefix?: string;\n tooltip?: ReactNode;\n tooltipPosition?: 'left' | 'center' | 'right';\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value, prefix and disabled*/\n checkboxes: CheckboxProps[];\n //** array with value(s) */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** returns an array with only one value */\n actAsRadioButtonBar?: boolean;\n /** optional footer text */\n footerText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n /** `true` to sepearte each button in their own bordered container */\n segmented?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n segmented = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(\n defaultValues && !actAsRadioButtonBar\n ? defaultValues.map(String)\n : defaultValues && actAsRadioButtonBar\n ? defaultValues.slice(0, 1)\n : []\n );\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (actAsRadioButtonBar) {\n setCurrentValues([value]);\n onSetValues([value]);\n } else {\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n }\n };\n\n return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n\n <div\n className={clsx(styles['checkbox-button-bar__row-container'], {\n [styles['checkbox-button-bar__row-container--segmented']]: segmented,\n })}\n >\n {segmented ? (\n checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n <div\n key={value}\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n <ControlsButton\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n tooltip={tooltip}\n tooltipPosition={tooltipPosition}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n </div>\n ))\n ) : (\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n <ControlsButton\n key={value}\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n tooltip={tooltip}\n tooltipPosition={tooltipPosition}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n )}\n </div>\n\n {footerText && <div className={styles['checkbox-button-bar__footer']}>{footerText}</div>}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","segmented","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","tooltip","tooltipPosition","disabled","ControlsButton","event","FeedbackBox"],"mappings":"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"}
@@ -3,6 +3,7 @@ import { CheckboxButtonBarProps } from './CheckboxButtonBar';
3
3
  declare const _default: Meta<CheckboxButtonBarProps>;
4
4
  export default _default;
5
5
  export declare const CheckboxButtonBarExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
6
- export declare const CheckboxButtonBarAsRadioButtonBar: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
7
- export declare const CheckboxButtonBarWithPrefix: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
8
- export declare const CheckboxButtonBarWithTooltip: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
6
+ export declare const AsRadioButtonBar: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
7
+ export declare const WithPrefix: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
8
+ export declare const WithTooltip: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
9
+ export declare const Segmented: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;