@uva-glass/component-library 3.39.1 → 3.41.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 (53) hide show
  1. package/dist/{TablePlugin-C38z2r5y.js → TablePlugin-DNGtPPjq.js} +6 -5
  2. package/dist/{TablePlugin-C38z2r5y.js.map → TablePlugin-DNGtPPjq.js.map} +1 -1
  3. package/dist/assets/ControlsButton.css +1 -1
  4. package/dist/components/Accordion/Accordion.d.ts +5 -1
  5. package/dist/components/Accordion/Accordion.js +77 -73
  6. package/dist/components/Accordion/Accordion.js.map +1 -1
  7. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts +1 -0
  8. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +14 -13
  9. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
  10. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +13 -11
  11. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
  12. package/dist/components/CheckboxTree/CheckboxTree.js +4 -3
  13. package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
  14. package/dist/components/ControlsButton/ControlsButton.d.ts +3 -1
  15. package/dist/components/ControlsButton/ControlsButton.js +52 -40
  16. package/dist/components/ControlsButton/ControlsButton.js.map +1 -1
  17. package/dist/components/ControlsButton/ControlsButton.stories.js +15 -14
  18. package/dist/components/ControlsButton/ControlsButton.stories.js.map +1 -1
  19. package/dist/components/FormInput/FormInput.js +4 -3
  20. package/dist/components/FormInput/FormInput.js.map +1 -1
  21. package/dist/components/InputField/InputField.stories.js +19 -18
  22. package/dist/components/InputField/InputField.stories.js.map +1 -1
  23. package/dist/components/MultiSelect/MultiSelect.js +1 -1
  24. package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
  25. package/dist/components/MultiSelect/components/MultiSelectHeader.js +3 -2
  26. package/dist/components/MultiSelect/components/MultiSelectHeader.js.map +1 -1
  27. package/dist/components/MultiSelect/index.js +1 -1
  28. package/dist/components/PeriodSelector/PeriodSelector.js +4 -3
  29. package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
  30. package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +4 -3
  31. package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
  32. package/dist/components/RadioTabSelector/RadioTabSelector.js +4 -3
  33. package/dist/components/RadioTabSelector/RadioTabSelector.js.map +1 -1
  34. package/dist/components/RteEditor/EditorHeader/EditorHeader.js +4 -3
  35. package/dist/components/RteEditor/EditorHeader/EditorHeader.js.map +1 -1
  36. package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +4 -3
  37. package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js.map +1 -1
  38. package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +3 -2
  39. package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js.map +1 -1
  40. package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +4 -3
  41. package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js.map +1 -1
  42. package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js +3 -2
  43. package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js.map +1 -1
  44. package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js +3 -2
  45. package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js.map +1 -1
  46. package/dist/components/RteEditor/Plugins/TablePlugin/index.js +1 -1
  47. package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +1 -1
  48. package/dist/components/RteEditor/Plugins/index.js +1 -1
  49. package/dist/components/RteEditor/RteEditor.js +4 -3
  50. package/dist/components/RteEditor/RteEditor.js.map +1 -1
  51. package/dist/components/index.js +1 -1
  52. package/dist/index.js +1 -1
  53. package/package.json +3 -3
@@ -4,6 +4,7 @@ import { c as $ } from "./clsx-OuTLNxxd.js";
4
4
  import { W as te, R as re } from "./LexicalTable.prod-CwkGGOke.js";
5
5
  import { ar as oe, J as le, P as U, _ as z, ag as ne } from "./Lexical.prod-7x3WP3vd.js";
6
6
  import { forwardRef as A, useState as C, useRef as T, useId as q, useImperativeHandle as B, useEffect as R } from "react";
7
+ import "./components/Accordion/Accordion.js";
7
8
  import { Button as L } from "./components/Buttons/Button.js";
8
9
  import "./components/Buttons/LinkButton.js";
9
10
  import "@react-aria/button";
@@ -71,7 +72,7 @@ const ve = "_linkform_ki2qx_1", we = "_linkform__footer_ki2qx_12", N = {
71
72
  linkform__footer: we,
72
73
  "linkform__input-url-wrapper": "_linkform__input-url-wrapper_ki2qx_19",
73
74
  "linkform__open-url-button": "_linkform__open-url-button_ki2qx_31"
74
- }, ct = A(
75
+ }, mt = A(
75
76
  ({ onCloseHandler: _, onSaveHandler: d, isLink: a = { active: !1, url: "", linktext: "" } }, r) => {
76
77
  const o = H(), [f, u] = C(a.url || ""), [s, b] = C(a.linktext || ""), [w, k] = C(!1), [F, h] = C(null), [v, p] = C(null), l = T(null), y = `link_${q()}`, t = `text_${q()}`, n = () => {
77
78
  window.open(ae(f), "_blank");
@@ -201,7 +202,7 @@ const ve = "_linkform_ki2qx_1", we = "_linkform__footer_ki2qx_12", N = {
201
202
  )
202
203
  ] })
203
204
  ] });
204
- }), xe = 200, mt = A(({ isActive: _ }, d) => {
205
+ }), xe = 200, ut = A(({ isActive: _ }, d) => {
205
206
  const a = H(), [r] = ee(), { flyout: o, showFlyout: f, hideFlyout: u, isVisible: s } = _e(), b = T(void 0), w = T(null), k = T(!1), F = T(s), h = () => {
206
207
  const t = w.current?.getBoundingClientRect();
207
208
  !k.current && t && f({ position: { top: t.bottom, left: t.left }, ...y });
@@ -291,10 +292,10 @@ const ve = "_linkform_ki2qx_1", we = "_linkform__footer_ki2qx_12", N = {
291
292
  ] }) });
292
293
  });
293
294
  export {
294
- ct as A,
295
+ mt as A,
295
296
  W as M,
296
- mt as T,
297
+ ut as T,
297
298
  he as a,
298
299
  ye as b
299
300
  };
300
- //# sourceMappingURL=TablePlugin-C38z2r5y.js.map
301
+ //# sourceMappingURL=TablePlugin-DNGtPPjq.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TablePlugin-C38z2r5y.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","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","removeKeyboardShortcut","KEY_DOWN_COMMAND","COMMAND_PRIORITY_EDITOR","removeKeydown"],"mappings":"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"}
1
+ {"version":3,"file":"TablePlugin-DNGtPPjq.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","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","removeKeyboardShortcut","KEY_DOWN_COMMAND","COMMAND_PRIORITY_EDITOR","removeKeydown"],"mappings":"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"}
@@ -1 +1 @@
1
- ._controls-input_1hbz5_1{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-input_1hbz5_1:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_1hbz5_1:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_1hbz5_1:disabled+label,._controls-input_1hbz5_1:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_1hbz5_1:hover+label{background-color:var(--new-color-grey-300)}._controls-button_1hbz5_32{align-items:center;background-color:var(--new-color-uva-white);border:1px solid transparent;border-radius:.25rem;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;min-width:2.25rem;padding:.5rem;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}._controls-button--squared_1hbz5_50{width:2.25rem}._controls-button_1hbz5_32:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-button--with-prefix_1hbz5_62{height:auto;padding:.125rem .5rem;width:auto}._controls-button--with-icon_1hbz5_68{gap:.5rem}._controls-button__wrapper_1hbz5_72{align-items:center;display:flex;flex-direction:column}._controls-button__prefix_1hbz5_78{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}._controls-button__tooltip_1hbz5_83{background-color:var(--new-color-uva-white);box-shadow:0 0 .25rem #00000040;color:var(--new-color-grey-700);display:none;font-size:var(--font-size-text-non-essential);font-style:italic;font-weight:400;left:50%;padding:.5rem 1rem;position:absolute;text-align:center;top:calc(100% + .5rem);transform:translate(-50%);z-index:1}._controls-button__tooltip_1hbz5_83:before{border-color:transparent transparent var(--new-color-grey-400) transparent;border-style:solid;border-width:.5rem;bottom:calc(100% + .125rem);content:"";filter:blur(.125rem);left:50%;position:absolute;transform:translate(-50%);z-index:-1}._controls-button__tooltip_1hbz5_83:after{border-color:transparent transparent var(--new-color-uva-white) transparent;border-style:solid;border-width:.5rem;bottom:100%;content:"";left:50%;position:absolute;transform:translate(-50%)}._controls-button_1hbz5_32:hover ._controls-button__tooltip_1hbz5_83,._controls-input_1hbz5_1:focus-visible+label ._controls-button__tooltip_1hbz5_83{display:block}
1
+ ._controls-input_lu12f_1{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-input_lu12f_1:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_lu12f_1:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_lu12f_1:disabled+label,._controls-input_lu12f_1:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_lu12f_1:hover+label{background-color:var(--new-color-grey-300)}._controls-button_lu12f_32{align-items:center;background-color:var(--new-color-uva-white);border:1px solid transparent;border-radius:.25rem;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;min-width:2.25rem;padding:.5rem;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}._controls-button--squared_lu12f_50{width:2.25rem}._controls-button_lu12f_32:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-button--with-prefix_lu12f_62{height:auto;padding:.125rem .5rem;width:auto}._controls-button--with-icon_lu12f_68{gap:.5rem}._controls-button__wrapper_lu12f_72{align-items:center;display:flex;flex-direction:column}._controls-button__prefix_lu12f_78{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}._controls-button__tooltip_lu12f_83{background-color:var(--new-color-uva-white);box-shadow:0 0 .25rem #00000040;color:var(--new-color-grey-700);display:none;font-size:var(--font-size-text-non-essential);font-style:italic;font-weight:400;padding:.5rem 1rem;position:absolute;text-align:center;top:calc(100% + .5rem);z-index:1}._controls-button__tooltip--left_lu12f_98{left:0rem}._controls-button__tooltip--center_lu12f_102{left:50%;transform:translate(-50%)}._controls-button__tooltip--right_lu12f_107{right:0rem}._controls-button__tooltip_lu12f_83:before{border-color:transparent transparent var(--new-color-grey-400) transparent;border-style:solid;border-width:.5rem;bottom:calc(100% + .125rem);content:"";filter:blur(.125rem);position:absolute;z-index:-1}._controls-button__tooltip_lu12f_83:after{border-color:transparent transparent var(--new-color-uva-white) transparent;border-style:solid;border-width:.5rem;bottom:100%;content:"";position:absolute}._controls-button_lu12f_32:hover ._controls-button__tooltip_lu12f_83,._controls-input_lu12f_1:focus-visible+label ._controls-button__tooltip_lu12f_83{display:block}._controls-button__tooltip--left_lu12f_98:before,._controls-button__tooltip--left_lu12f_98:after{left:.5rem}._controls-button__tooltip--center_lu12f_102:before,._controls-button__tooltip--center_lu12f_102:after{left:50%;transform:translate(-50%)}._controls-button__tooltip--right_lu12f_107:before,._controls-button__tooltip--right_lu12f_107:after{right:.5rem}
@@ -11,5 +11,9 @@ export interface AccordionProps {
11
11
  /** Indicator for cheveron icon margin. By default '050'. */
12
12
  cheveronMargin?: '0' | '025' | '050' | '075' | '100' | '150' | '200';
13
13
  }
14
+ export interface AccordionMethods {
15
+ closeContent: () => void;
16
+ openContent: () => void;
17
+ }
14
18
  /** A controller for accordion display toggling of content with click on a title. */
15
- export declare const Accordion: ({ title, content, expanded, cheveronPlacement, cheveronMargin, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
19
+ export declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<AccordionMethods>>;
@@ -1,10 +1,10 @@
1
- import { jsx as o, jsxs as d } from "react/jsx-runtime";
2
- import { c } from "../../clsx-OuTLNxxd.js";
3
- import { useState as w, useId as h } from "react";
1
+ import { jsx as c, jsxs as d } from "react/jsx-runtime";
2
+ import { c as _ } from "../../clsx-OuTLNxxd.js";
3
+ import { forwardRef as u, useState as I, useId as v, useImperativeHandle as C } from "react";
4
4
  import { Icon as l } from "../Icon/Icon.js";
5
- import '../../assets/Accordion.css';const f = "_accordion_19w0n_1", u = "_accordion__title_19w0n_6", I = "_accordion__content_19w0n_66", n = {
6
- accordion: f,
7
- accordion__title: u,
5
+ import '../../assets/Accordion.css';const N = "_accordion_19w0n_1", b = "_accordion__title_19w0n_6", y = "_accordion__content_19w0n_66", n = {
6
+ accordion: N,
7
+ accordion__title: b,
8
8
  "accordion__title-icon": "_accordion__title-icon_19w0n_21",
9
9
  "accordion__title-icon-right": "_accordion__title-icon-right_19w0n_22",
10
10
  "accordion__title-icon--margin-0": "_accordion__title-icon--margin-0_19w0n_28",
@@ -16,75 +16,79 @@ import '../../assets/Accordion.css';const f = "_accordion_19w0n_1", u = "_accord
16
16
  "accordion__title-icon--margin-200": "_accordion__title-icon--margin-200_19w0n_52",
17
17
  "accordion__title-icon--expanded": "_accordion__title-icon--expanded_19w0n_60",
18
18
  "accordion__title-icon-right--expanded": "_accordion__title-icon-right--expanded_19w0n_61",
19
- accordion__content: I,
19
+ accordion__content: y,
20
20
  "accordion__content--expanded": "_accordion__content--expanded_19w0n_70"
21
- }, C = ({
22
- title: s,
23
- content: m,
24
- expanded: g = !1,
25
- cheveronPlacement: _ = "right",
26
- cheveronMargin: t = "050"
27
- }) => {
28
- const [i, a] = w(g), e = h();
29
- function p(x) {
30
- const { code: r } = x;
31
- (r === "Enter" || r === "Space") && a(!i);
21
+ }, S = u(
22
+ ({ title: s, content: m, expanded: g = !1, cheveronPlacement: t = "right", cheveronMargin: e = "050" }, p) => {
23
+ const [o, i] = I(g), a = v();
24
+ function x(h) {
25
+ const { code: r } = h;
26
+ (r === "Enter" || r === "Space") && i(!o);
27
+ }
28
+ const w = () => {
29
+ i(!1);
30
+ }, f = () => {
31
+ i(!0);
32
+ };
33
+ return C(p, () => ({
34
+ closeContent: w,
35
+ openContent: f
36
+ })), /* @__PURE__ */ c("div", { children: /* @__PURE__ */ d("div", { className: n.accordion, children: [
37
+ /* @__PURE__ */ d(
38
+ "div",
39
+ {
40
+ className: n.accordion__title,
41
+ id: a,
42
+ role: "button",
43
+ tabIndex: 0,
44
+ onClick: () => i(!o),
45
+ onKeyUp: x,
46
+ "aria-expanded": o,
47
+ children: [
48
+ t === "left" && /* @__PURE__ */ c(
49
+ l,
50
+ {
51
+ className: _(
52
+ n["accordion__title-icon"],
53
+ n[`accordion__title-icon--margin-${e}`],
54
+ {
55
+ [n["accordion__title-icon--expanded"]]: o
56
+ }
57
+ ),
58
+ name: "CheveronLeft",
59
+ size: 16
60
+ }
61
+ ),
62
+ s,
63
+ t === "right" && /* @__PURE__ */ c(
64
+ l,
65
+ {
66
+ className: _(
67
+ n["accordion__title-icon-right"],
68
+ n[`accordion__title-icon--margin-${e}`],
69
+ {
70
+ [n["accordion__title-icon-right--expanded"]]: o
71
+ }
72
+ ),
73
+ name: "CheveronLeft",
74
+ size: 16
75
+ }
76
+ )
77
+ ]
78
+ }
79
+ ),
80
+ /* @__PURE__ */ c(
81
+ "div",
82
+ {
83
+ "aria-labelledby": a,
84
+ className: _(n.accordion__content, { [n["accordion__content--expanded"]]: o }),
85
+ children: m
86
+ }
87
+ )
88
+ ] }) });
32
89
  }
33
- return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ d("div", { className: n.accordion, children: [
34
- /* @__PURE__ */ d(
35
- "div",
36
- {
37
- className: n.accordion__title,
38
- id: e,
39
- role: "button",
40
- tabIndex: 0,
41
- onClick: () => a(!i),
42
- onKeyUp: p,
43
- "aria-expanded": i,
44
- children: [
45
- _ === "left" && /* @__PURE__ */ o(
46
- l,
47
- {
48
- className: c(
49
- n["accordion__title-icon"],
50
- n[`accordion__title-icon--margin-${t}`],
51
- {
52
- [n["accordion__title-icon--expanded"]]: i
53
- }
54
- ),
55
- name: "CheveronLeft",
56
- size: 16
57
- }
58
- ),
59
- s,
60
- _ === "right" && /* @__PURE__ */ o(
61
- l,
62
- {
63
- className: c(
64
- n["accordion__title-icon-right"],
65
- n[`accordion__title-icon--margin-${t}`],
66
- {
67
- [n["accordion__title-icon-right--expanded"]]: i
68
- }
69
- ),
70
- name: "CheveronLeft",
71
- size: 16
72
- }
73
- )
74
- ]
75
- }
76
- ),
77
- /* @__PURE__ */ o(
78
- "div",
79
- {
80
- "aria-labelledby": e,
81
- className: c(n.accordion__content, { [n["accordion__content--expanded"]]: i }),
82
- children: m
83
- }
84
- )
85
- ] }) });
86
- };
90
+ );
87
91
  export {
88
- C as Accordion
92
+ S as Accordion
89
93
  };
90
94
  //# sourceMappingURL=Accordion.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n /** Clickable title (always visible). */\n title: ReactNode;\n /** Main content (hidden when expanded is false). */\n content: ReactNode;\n /** Indicator if Accordion should be expanded by default.*/\n expanded?: boolean;\n /** Indicator for cheveron icon placement.*/\n cheveronPlacement?: 'left' | 'right';\n /** Indicator for cheveron icon margin. By default '050'. */\n cheveronMargin?: '0' | '025' | '050' | '075' | '100' | '150' | '200';\n}\n\n/** A controller for accordion display toggling of content with click on a title. */\nexport const Accordion = ({\n title,\n content,\n expanded = false,\n cheveronPlacement = 'right',\n cheveronMargin = '050',\n}: AccordionProps) => {\n const [isExpanded, setIsExpanded] = useState(expanded);\n const accordionId = useId();\n\n function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n const { code } = event;\n\n if (code === 'Enter' || code === 'Space') {\n setIsExpanded(!isExpanded);\n }\n }\n\n return (\n <div>\n <div className={styles['accordion']}>\n <div\n className={styles['accordion__title']}\n id={accordionId}\n role=\"button\"\n tabIndex={0}\n onClick={() => setIsExpanded(!isExpanded)}\n onKeyUp={onKeyUp}\n aria-expanded={isExpanded}\n >\n {cheveronPlacement === 'left' && (\n <Icon\n className={clsx(\n styles['accordion__title-icon'],\n styles[`accordion__title-icon--margin-${cheveronMargin}`],\n {\n [styles['accordion__title-icon--expanded']]: isExpanded,\n }\n )}\n name=\"CheveronLeft\"\n size={16}\n />\n )}\n\n {title}\n {cheveronPlacement === 'right' && (\n <Icon\n className={clsx(\n styles['accordion__title-icon-right'],\n styles[`accordion__title-icon--margin-${cheveronMargin}`],\n {\n [styles['accordion__title-icon-right--expanded']]: isExpanded,\n }\n )}\n name=\"CheveronLeft\"\n size={16}\n />\n )}\n </div>\n <div\n aria-labelledby={accordionId}\n className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n >\n {content}\n </div>\n </div>\n </div>\n );\n};\n"],"names":["Accordion","title","content","expanded","cheveronPlacement","cheveronMargin","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;GAuBaA,IAAY,CAAC;AAAA,EACxB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,mBAAAC,IAAoB;AAAA,EACpB,gBAAAC,IAAiB;AACnB,MAAsB;AACpB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASL,CAAQ,GAC/CM,IAAcC,EAAA;AAEpB,WAASC,EAAQC,GAAsC;AACrD,UAAM,EAAE,MAAAC,MAASD;AAEjB,KAAIC,MAAS,WAAWA,MAAS,YAC/BN,EAAc,CAACD,CAAU;AAAA,EAC3B;AAGF,2BACG,OAAA,EACC,UAAA,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,WACrB,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO;AAAA,QAClB,IAAIN;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS,MAAMF,EAAc,CAACD,CAAU;AAAA,QACxC,SAAAK;AAAA,QACA,iBAAeL;AAAA,QAEd,UAAA;AAAA,UAAAF,MAAsB,UACrB,gBAAAY;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC;AAAA,gBACTH,EAAO,uBAAuB;AAAA,gBAC9BA,EAAO,iCAAiCV,CAAc,EAAE;AAAA,gBACxD;AAAA,kBACE,CAACU,EAAO,iCAAiC,CAAC,GAAGT;AAAA,gBAAA;AAAA,cAC/C;AAAA,cAEF,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAITL;AAAA,UACAG,MAAsB,WACrB,gBAAAY;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC;AAAA,gBACTH,EAAO,6BAA6B;AAAA,gBACpCA,EAAO,iCAAiCV,CAAc,EAAE;AAAA,gBACxD;AAAA,kBACE,CAACU,EAAO,uCAAuC,CAAC,GAAGT;AAAA,gBAAA;AAAA,cACrD;AAAA,cAEF,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiBP;AAAA,QACjB,WAAWS,EAAKH,EAAO,oBAAoB,EAAE,CAACA,EAAO,8BAA8B,CAAC,GAAGT,GAAY;AAAA,QAElG,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,EAAA,CACF,EAAA,CACF;AAEJ;"}
1
+ {"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId, useImperativeHandle, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n /** Clickable title (always visible). */\n title: ReactNode;\n /** Main content (hidden when expanded is false). */\n content: ReactNode;\n /** Indicator if Accordion should be expanded by default.*/\n expanded?: boolean;\n /** Indicator for cheveron icon placement.*/\n cheveronPlacement?: 'left' | 'right';\n /** Indicator for cheveron icon margin. By default '050'. */\n cheveronMargin?: '0' | '025' | '050' | '075' | '100' | '150' | '200';\n}\n\nexport interface AccordionMethods {\n closeContent: () => void;\n openContent: () => void;\n}\n\n/** A controller for accordion display toggling of content with click on a title. */\nexport const Accordion = forwardRef<AccordionMethods, AccordionProps>(\n ({ title, content, expanded = false, cheveronPlacement = 'right', cheveronMargin = '050' }, ref) => {\n const [isExpanded, setIsExpanded] = useState(expanded);\n const accordionId = useId();\n\n function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n const { code } = event;\n\n if (code === 'Enter' || code === 'Space') {\n setIsExpanded(!isExpanded);\n }\n }\n\n const closeContent = () => {\n setIsExpanded(false);\n };\n\n const openContent = () => {\n setIsExpanded(true);\n };\n\n useImperativeHandle(ref, () => ({\n closeContent,\n openContent,\n }));\n\n return (\n <div>\n <div className={styles['accordion']}>\n <div\n className={styles['accordion__title']}\n id={accordionId}\n role=\"button\"\n tabIndex={0}\n onClick={() => setIsExpanded(!isExpanded)}\n onKeyUp={onKeyUp}\n aria-expanded={isExpanded}\n >\n {cheveronPlacement === 'left' && (\n <Icon\n className={clsx(\n styles['accordion__title-icon'],\n styles[`accordion__title-icon--margin-${cheveronMargin}`],\n {\n [styles['accordion__title-icon--expanded']]: isExpanded,\n }\n )}\n name=\"CheveronLeft\"\n size={16}\n />\n )}\n\n {title}\n {cheveronPlacement === 'right' && (\n <Icon\n className={clsx(\n styles['accordion__title-icon-right'],\n styles[`accordion__title-icon--margin-${cheveronMargin}`],\n {\n [styles['accordion__title-icon-right--expanded']]: isExpanded,\n }\n )}\n name=\"CheveronLeft\"\n size={16}\n />\n )}\n </div>\n <div\n aria-labelledby={accordionId}\n className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n >\n {content}\n </div>\n </div>\n </div>\n );\n }\n);\n"],"names":["Accordion","forwardRef","title","content","expanded","cheveronPlacement","cheveronMargin","ref","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","closeContent","openContent","useImperativeHandle","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;GA4BaA,IAAYC;AAAA,EACvB,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,IAAO,mBAAAC,IAAoB,SAAS,gBAAAC,IAAiB,MAAA,GAASC,MAAQ;AAClG,UAAM,CAACC,GAAYC,CAAa,IAAIC,EAASN,CAAQ,GAC/CO,IAAcC,EAAA;AAEpB,aAASC,EAAQC,GAAsC;AACrD,YAAM,EAAE,MAAAC,MAASD;AAEjB,OAAIC,MAAS,WAAWA,MAAS,YAC/BN,EAAc,CAACD,CAAU;AAAA,IAC3B;AAGF,UAAMQ,IAAe,MAAM;AACzB,MAAAP,EAAc,EAAK;AAAA,IAAA,GAGfQ,IAAc,MAAM;AACxB,MAAAR,EAAc,EAAI;AAAA,IAAA;AAGpB,WAAAS,EAAoBX,GAAK,OAAO;AAAA,MAC9B,cAAAS;AAAA,MACA,aAAAC;AAAA,IAAA,EACA,qBAGC,OAAA,EACC,UAAA,gBAAAE,EAAC,SAAI,WAAWC,EAAO,WACrB,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAO;AAAA,UAClB,IAAIT;AAAA,UACJ,MAAK;AAAA,UACL,UAAU;AAAA,UACV,SAAS,MAAMF,EAAc,CAACD,CAAU;AAAA,UACxC,SAAAK;AAAA,UACA,iBAAeL;AAAA,UAEd,UAAA;AAAA,YAAAH,MAAsB,UACrB,gBAAAgB;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,WAAWC;AAAA,kBACTH,EAAO,uBAAuB;AAAA,kBAC9BA,EAAO,iCAAiCd,CAAc,EAAE;AAAA,kBACxD;AAAA,oBACE,CAACc,EAAO,iCAAiC,CAAC,GAAGZ;AAAA,kBAAA;AAAA,gBAC/C;AAAA,gBAEF,MAAK;AAAA,gBACL,MAAM;AAAA,cAAA;AAAA,YAAA;AAAA,YAITN;AAAA,YACAG,MAAsB,WACrB,gBAAAgB;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,WAAWC;AAAA,kBACTH,EAAO,6BAA6B;AAAA,kBACpCA,EAAO,iCAAiCd,CAAc,EAAE;AAAA,kBACxD;AAAA,oBACE,CAACc,EAAO,uCAAuC,CAAC,GAAGZ;AAAA,kBAAA;AAAA,gBACrD;AAAA,gBAEF,MAAK;AAAA,gBACL,MAAM;AAAA,cAAA;AAAA,YAAA;AAAA,UACR;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,mBAAiBV;AAAA,UACjB,WAAWY,EAAKH,EAAO,oBAAoB,EAAE,CAACA,EAAO,8BAA8B,CAAC,GAAGZ,GAAY;AAAA,UAElG,UAAAL;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF,EAAA,CACF;AAAA,EAAA;AAGN;"}
@@ -4,6 +4,7 @@ type CheckboxProps = {
4
4
  value: string;
5
5
  prefix?: string;
6
6
  tooltip?: ReactNode;
7
+ tooltipPosition?: 'left' | 'center' | 'right';
7
8
  disabled?: boolean;
8
9
  };
9
10
  export interface CheckboxButtonBarProps {
@@ -1,9 +1,9 @@
1
1
  import { jsxs as k, jsx as c } from "react/jsx-runtime";
2
- import { useState as N } from "react";
2
+ import { useState as S } from "react";
3
3
  import { c as x } from "../../clsx-OuTLNxxd.js";
4
- import { Label as S } from "../Label/Label.js";
5
- import { FeedbackBox as j } from "../FeedbackBox/FeedbackBox.js";
6
- import { ControlsButton as y } from "../ControlsButton/ControlsButton.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
7
  import '../../assets/CheckboxButtonBar.css';const t = {
8
8
  "checkbox-button-bar__container": "_checkbox-button-bar__container_5gd9n_1",
9
9
  "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_5gd9n_5",
@@ -12,7 +12,7 @@ import '../../assets/CheckboxButtonBar.css';const t = {
12
12
  "checkbox-button-bar__row": "_checkbox-button-bar__row_5gd9n_15",
13
13
  "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_5gd9n_30",
14
14
  "checkbox-button-bar__footer": "_checkbox-button-bar__footer_5gd9n_33"
15
- }, D = ({
15
+ }, E = ({
16
16
  checkboxes: d,
17
17
  defaultValues: r,
18
18
  label: a,
@@ -25,7 +25,7 @@ import '../../assets/CheckboxButtonBar.css';const t = {
25
25
  disableGroup: p = !1,
26
26
  onSetValues: i
27
27
  }) => {
28
- const [h, s] = N(
28
+ const [h, s] = S(
29
29
  r && !n ? r.map(String) : r && n ? r.slice(0, 1) : []
30
30
  ), g = (e) => {
31
31
  let o = h;
@@ -39,7 +39,7 @@ import '../../assets/CheckboxButtonBar.css';const t = {
39
39
  t[`checkbox-button-bar__container--label-${u}`]
40
40
  ),
41
41
  children: [
42
- a && /* @__PURE__ */ c(S, { htmlFor: "", required: m, children: a }),
42
+ a && /* @__PURE__ */ c(j, { htmlFor: "", required: m, children: a }),
43
43
  /* @__PURE__ */ k("div", { className: t["checkbox-button-bar__row-container"], children: [
44
44
  /* @__PURE__ */ c(
45
45
  "div",
@@ -47,31 +47,32 @@ import '../../assets/CheckboxButtonBar.css';const t = {
47
47
  className: x(t["checkbox-button-bar__row"], {
48
48
  [t["checkbox-button-bar__row--not-validated"]]: f || b
49
49
  }),
50
- children: d.map(({ label: e, value: o, prefix: _, tooltip: w, disabled: v }) => /* @__PURE__ */ c(
51
- y,
50
+ children: d.map(({ label: e, value: o, prefix: _, tooltip: w, tooltipPosition: v, disabled: C }) => /* @__PURE__ */ c(
51
+ F,
52
52
  {
53
53
  type: "checkbox",
54
54
  label: e,
55
55
  prefix: _,
56
56
  tooltip: w,
57
+ tooltipPosition: v,
57
58
  forceSquared: !0,
58
59
  value: o,
59
60
  checked: h.includes(o),
60
- disabled: v || p,
61
- onSetValue: (C) => g(C.target.value)
61
+ disabled: C || p,
62
+ onSetValue: (N) => g(N.target.value)
62
63
  },
63
64
  `${o}`
64
65
  ))
65
66
  }
66
67
  ),
67
68
  l && /* @__PURE__ */ c("div", { className: t["checkbox-button-bar__footer"], children: l }),
68
- b !== "" && /* @__PURE__ */ c(j, { level: "error", feedback: b })
69
+ b !== "" && /* @__PURE__ */ c(y, { level: "error", feedback: b })
69
70
  ] })
70
71
  ]
71
72
  }
72
73
  );
73
74
  };
74
75
  export {
75
- D as CheckboxButtonBar
76
+ E as CheckboxButtonBar
76
77
  };
77
78
  //# 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 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, disabled }) => (\n <ControlsButton\n key={`${value}`}\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n tooltip={tooltip}\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","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;GA0CaA,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,EACpB;AAGF,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,UAAAC,EAAA,MAChD,gBAAAJ;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,OAAOxB;AAAAA,kBACP,QAAAqB;AAAA,kBACA,SAAAC;AAAA,kBACA,cAAc;AAAA,kBACd,OAAAT;AAAA,kBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,kBACrC,UAAUU,KAAYhB;AAAA,kBACtB,YAAY,CAACkB,MAAUb,EAAaa,EAAM,OAAO,KAAK;AAAA,gBAAA;AAAA,gBATjD,GAAGZ,CAAK;AAAA,cAAA,CAWhB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFP,KAAc,gBAAAa,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAAI,UAAAZ,GAAW;AAAA,UACjFF,MAAqB,MAAM,gBAAAe,EAACO,KAAY,OAAM,SAAQ,UAAUtB,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;\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,EACpB;AAGF,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,5 +1,5 @@
1
1
  import { jsx as e, jsxs as l, Fragment as t } from "react/jsx-runtime";
2
- import { l as a } from "../../index-BYGu3RV5.js";
2
+ import { l as o } from "../../index-BYGu3RV5.js";
3
3
  import { CheckboxButtonBar as r } from "./CheckboxButtonBar.js";
4
4
  const b = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", f = {
5
5
  title: "Molecules/CheckboxButtonBar",
@@ -44,7 +44,7 @@ const b = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosit
44
44
  inspectComponent: r,
45
45
  codeString: b
46
46
  }
47
- }, o = (i) => /* @__PURE__ */ e(r, { ...i }), u = o.bind({});
47
+ }, a = (i) => /* @__PURE__ */ e(r, { ...i }), u = a.bind({});
48
48
  u.args = {
49
49
  label: "Periode",
50
50
  required: !0,
@@ -77,9 +77,9 @@ u.args = {
77
77
  defaultValues: ["1", "2"],
78
78
  labelPosition: "top",
79
79
  footerText: "Weken in periode 2",
80
- onSetValues: a()
80
+ onSetValues: o()
81
81
  };
82
- const n = o.bind({});
82
+ const n = a.bind({});
83
83
  n.args = {
84
84
  label: "Weken",
85
85
  required: !0,
@@ -112,9 +112,9 @@ n.args = {
112
112
  defaultValues: ["1"],
113
113
  labelPosition: "top",
114
114
  actAsRadioButtonBar: !0,
115
- onSetValues: a()
115
+ onSetValues: o()
116
116
  };
117
- const s = o.bind({});
117
+ const s = a.bind({});
118
118
  s.args = {
119
119
  label: "Weken",
120
120
  required: !0,
@@ -153,9 +153,9 @@ s.args = {
153
153
  defaultValues: ["1"],
154
154
  labelPosition: "top",
155
155
  actAsRadioButtonBar: !1,
156
- onSetValues: a()
156
+ onSetValues: o()
157
157
  };
158
- const p = o.bind({});
158
+ const p = a.bind({});
159
159
  p.args = {
160
160
  label: "Weken",
161
161
  required: !0,
@@ -168,7 +168,8 @@ p.args = {
168
168
  "1 sept - 5 sept",
169
169
  /* @__PURE__ */ e("br", {}),
170
170
  "2025"
171
- ] })
171
+ ] }),
172
+ tooltipPosition: "left"
172
173
  },
173
174
  {
174
175
  label: "2",
@@ -238,13 +239,14 @@ p.args = {
238
239
  "20 okt - 24 okt",
239
240
  /* @__PURE__ */ e("br", {}),
240
241
  "2025"
241
- ] })
242
+ ] }),
243
+ tooltipPosition: "right"
242
244
  }
243
245
  ],
244
246
  defaultValues: ["1"],
245
247
  labelPosition: "top",
246
248
  actAsRadioButtonBar: !1,
247
- onSetValues: a()
249
+ onSetValues: o()
248
250
  };
249
251
  export {
250
252
  n as CheckboxButtonBarAsRadioButtonBar,