@uva-glass/component-library 3.34.9 → 3.34.10
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.
|
@@ -94,7 +94,7 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
94
94
|
), z = (e, t) => {
|
|
95
95
|
if (t.disabled || e.target.tagName === "INPUT") return;
|
|
96
96
|
const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
|
|
97
|
-
h(o), k(o.length), m(o)
|
|
97
|
+
h(o), k(o.length), m(o);
|
|
98
98
|
}, U = g(
|
|
99
99
|
(e) => {
|
|
100
100
|
const { checked: t, value: l } = e.target;
|
|
@@ -104,8 +104,9 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
104
104
|
i && o.push(i);
|
|
105
105
|
} else
|
|
106
106
|
o = o.filter((i) => i.value !== l);
|
|
107
|
-
h(o), k(o.length), m(o);
|
|
107
|
+
h(o), k(o.length), m(o), M();
|
|
108
108
|
},
|
|
109
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
109
110
|
[c, n, m]
|
|
110
111
|
);
|
|
111
112
|
return w(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n label: string;\n value: string | number;\n disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n /** Array of label, values pairs */\n selectData: MultiSelectData[];\n /** Retuns selected label, values */\n onChange: (values: MultiSelectData[]) => void;\n /** Array of label, value pairs that should be check by default */\n defaultSelectedItems?: MultiSelectData[];\n /** Suffix label in the selectbutton '[count] selected' */\n labelSuffix?: string;\n /** Disables the multiselect */\n disabled?: boolean;\n /** If true sets the option dropdown min-width to the width of the select button. */\n fullWidth?: boolean;\n /** Dark border. */\n darkBorder?: boolean;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n optionPositionRight?: boolean;\n}\n\nexport const MultiSelectBox = ({\n selectData,\n onChange,\n defaultSelectedItems,\n labelSuffix = 'geselecteerd',\n disabled = false,\n fullWidth = false,\n darkBorder = false,\n maxOptionHeight,\n optionPositionRight,\n}: MultiSelectBoxProps) => {\n const multiselectboxId = useId();\n const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const optionListRef = useRef<HTMLUListElement>(null);\n\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n const { style: positionStyle, updatePosition } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n fullWidth,\n });\n\n const onMouseEventOutside = useCallback(\n ({ target }: Event | MouseEvent) => {\n if (!target || !wrapperRef.current) return;\n\n if (!wrapperRef.current.contains(target as Node)) {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n const onTriggerKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n setIsOpen(true);\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n default:\n break;\n }\n },\n [isOpen]\n );\n\n const onOptionKeyDown = useCallback(\n (event: KeyboardEvent<HTMLLIElement>) => {\n if (!isOpen) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'ArrowUp':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'Enter': {\n event.preventDefault();\n const selectedItem = selectData[activeIndex];\n if (!selectedItem || selectedItem.disabled) break;\n const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== selectedItem.value)\n : [...selectedItems, selectedItem];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n break;\n }\n case 'Tab':\n event.preventDefault();\n setIsOpen(false);\n break;\n case 'Escape':\n event.stopPropagation();\n setIsOpen(false);\n break;\n default:\n break;\n }\n },\n [activeIndex, isOpen, selectData, selectedItems, onChange]\n );\n\n const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n if (option.disabled) return;\n\n // Prevent toggle if click originated from the checkbox\n if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== option.value)\n : [...selectedItems, option];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n updatePosition();\n };\n\n const handleSelect = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { checked, value } = event.target;\n let updatedSelectedItems = [...selectedItems];\n\n if (checked) {\n const selectedItem = selectData.find((item) => item.value === value);\n if (selectedItem) {\n updatedSelectedItems.push(selectedItem);\n }\n } else {\n updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n }\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n },\n [selectData, selectedItems, onChange]\n );\n\n useEffect(() => {\n if (isOpen) {\n setActiveIndex(0);\n }\n }, [isOpen]);\n\n useEffect(() => {\n const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n activeOption?.focus();\n }, [activeIndex]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n document.addEventListener('click', onMouseEventOutside, true);\n document.addEventListener('scroll', onMouseEventOutside, true);\n\n return () => {\n document.removeEventListener('click', onMouseEventOutside, true);\n document.removeEventListener('scroll', onMouseEventOutside, true);\n };\n }, [onMouseEventOutside, isOpen]);\n\n return (\n <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n <button\n className={clsx(styles['multi-select-box-trigger'], {\n [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n })}\n type=\"button\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n onKeyDown={onTriggerKeyDown}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-label={`${selectedItemsCount} ${labelSuffix}`}\n disabled={disabled}\n {...(isOpen && { 'aria-controls': multiselectboxId })}\n ref={setReferenceElement}\n >\n <span className={styles['multi-select-box-trigger-label']}>\n {selectedItemsCount} {labelSuffix}\n </span>\n <Icon\n className={clsx(styles['multi-select-box-trigger-icon'], {\n [styles['multi-select-box-trigger-icon--open']]: isOpen,\n })}\n name=\"CheveronDown\"\n size={16}\n />\n </button>\n\n <div\n id={multiselectboxId}\n className={clsx(styles['multi-select-box-listbox--wrapper'])}\n style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n role=\"listbox\"\n ref={setPositionElement}\n >\n <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n {selectData.map(({ label, value, disabled }, index) => (\n <li\n className={clsx(styles['multi-select-box-listbox-option'], {\n [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n [styles['multi-select-box-listbox-option--disabled']]: disabled,\n })}\n key={value}\n role=\"option\"\n onKeyDown={onOptionKeyDown}\n onClick={(event) => onOptionClick(event, { label, value, disabled })}\n onMouseOver={() => setActiveIndex(index)}\n onFocus={() => setActiveIndex(index)}\n tabIndex={0}\n aria-selected={selectedItems.some((item) => item.value === value)}\n >\n <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n <Checkbox\n id={`${label}-${multiselectboxId}`}\n onChange={handleSelect}\n value={value}\n tabIndex={-1}\n disabled={disabled}\n checked={selectedItems.some((item) => item.value === value)}\n />\n <span>{label}</span>\n </label>\n </li>\n ))}\n </ul>\n </div>\n </div>\n );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","updatePosition","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n label: string;\n value: string | number;\n disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n /** Array of label, values pairs */\n selectData: MultiSelectData[];\n /** Retuns selected label, values */\n onChange: (values: MultiSelectData[]) => void;\n /** Array of label, value pairs that should be check by default */\n defaultSelectedItems?: MultiSelectData[];\n /** Suffix label in the selectbutton '[count] selected' */\n labelSuffix?: string;\n /** Disables the multiselect */\n disabled?: boolean;\n /** If true sets the option dropdown min-width to the width of the select button. */\n fullWidth?: boolean;\n /** Dark border. */\n darkBorder?: boolean;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n optionPositionRight?: boolean;\n}\n\nexport const MultiSelectBox = ({\n selectData,\n onChange,\n defaultSelectedItems,\n labelSuffix = 'geselecteerd',\n disabled = false,\n fullWidth = false,\n darkBorder = false,\n maxOptionHeight,\n optionPositionRight,\n}: MultiSelectBoxProps) => {\n const multiselectboxId = useId();\n const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const optionListRef = useRef<HTMLUListElement>(null);\n\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n const { style: positionStyle, updatePosition } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n fullWidth,\n });\n\n const onMouseEventOutside = useCallback(\n ({ target }: Event | MouseEvent) => {\n if (!target || !wrapperRef.current) return;\n\n if (!wrapperRef.current.contains(target as Node)) {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n const onTriggerKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n setIsOpen(true);\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n default:\n break;\n }\n },\n [isOpen]\n );\n\n const onOptionKeyDown = useCallback(\n (event: KeyboardEvent<HTMLLIElement>) => {\n if (!isOpen) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'ArrowUp':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'Enter': {\n event.preventDefault();\n const selectedItem = selectData[activeIndex];\n if (!selectedItem || selectedItem.disabled) break;\n const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== selectedItem.value)\n : [...selectedItems, selectedItem];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n break;\n }\n case 'Tab':\n event.preventDefault();\n setIsOpen(false);\n break;\n case 'Escape':\n event.stopPropagation();\n setIsOpen(false);\n break;\n default:\n break;\n }\n },\n [activeIndex, isOpen, selectData, selectedItems, onChange]\n );\n\n const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n if (option.disabled) return;\n\n // Prevent toggle if click originated from the checkbox\n if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== option.value)\n : [...selectedItems, option];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n };\n\n const handleSelect = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { checked, value } = event.target;\n let updatedSelectedItems = [...selectedItems];\n\n if (checked) {\n const selectedItem = selectData.find((item) => item.value === value);\n if (selectedItem) {\n updatedSelectedItems.push(selectedItem);\n }\n } else {\n updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n }\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n updatePosition();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [selectData, selectedItems, onChange]\n );\n\n useEffect(() => {\n if (isOpen) {\n setActiveIndex(0);\n }\n }, [isOpen]);\n\n useEffect(() => {\n const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n activeOption?.focus();\n }, [activeIndex]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n document.addEventListener('click', onMouseEventOutside, true);\n document.addEventListener('scroll', onMouseEventOutside, true);\n\n return () => {\n document.removeEventListener('click', onMouseEventOutside, true);\n document.removeEventListener('scroll', onMouseEventOutside, true);\n };\n }, [onMouseEventOutside, isOpen]);\n\n return (\n <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n <button\n className={clsx(styles['multi-select-box-trigger'], {\n [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n })}\n type=\"button\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n onKeyDown={onTriggerKeyDown}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-label={`${selectedItemsCount} ${labelSuffix}`}\n disabled={disabled}\n {...(isOpen && { 'aria-controls': multiselectboxId })}\n ref={setReferenceElement}\n >\n <span className={styles['multi-select-box-trigger-label']}>\n {selectedItemsCount} {labelSuffix}\n </span>\n <Icon\n className={clsx(styles['multi-select-box-trigger-icon'], {\n [styles['multi-select-box-trigger-icon--open']]: isOpen,\n })}\n name=\"CheveronDown\"\n size={16}\n />\n </button>\n\n <div\n id={multiselectboxId}\n className={clsx(styles['multi-select-box-listbox--wrapper'])}\n style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n role=\"listbox\"\n ref={setPositionElement}\n >\n <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n {selectData.map(({ label, value, disabled }, index) => (\n <li\n className={clsx(styles['multi-select-box-listbox-option'], {\n [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n [styles['multi-select-box-listbox-option--disabled']]: disabled,\n })}\n key={value}\n role=\"option\"\n onKeyDown={onOptionKeyDown}\n onClick={(event) => onOptionClick(event, { label, value, disabled })}\n onMouseOver={() => setActiveIndex(index)}\n onFocus={() => setActiveIndex(index)}\n tabIndex={0}\n aria-selected={selectedItems.some((item) => item.value === value)}\n >\n <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n <Checkbox\n id={`${label}-${multiselectboxId}`}\n onChange={handleSelect}\n value={value}\n tabIndex={-1}\n disabled={disabled}\n checked={selectedItems.some((item) => item.value === value)}\n />\n <span>{label}</span>\n </label>\n </li>\n ))}\n </ul>\n </div>\n </div>\n );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","updatePosition","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}
|